Product Sensei
Product Sensei
  • Видео 45
  • Просмотров 420 726
Image Component Tutorial 2024 | Next.js 14 | Placeholder Blur | Static & Dynamic
Welcome to the ultimate guide on leveraging the Image Component in Next.js! In this comprehensive tutorial, we dive deep into Next.js's powerful features, exploring both static and dynamic implementations. Learn how to enhance user experience with placeholder blur techniques, ensuring seamless loading transitions. Whether you're a beginner or seasoned developer, this tutorial equips you with the skills to optimize your Next.js projects and harness the full potential of the Image Component. Watch now and level up your web development game!
_______________________________________________________
Video chapters:
0:00 - Intro
0:12 - Static Images
4:50 - Dynamic Images
#webdevelopment #nextjs #nextj...
Просмотров: 849

Видео

Collect Emails With Framer | Input Field Tutorial | 100% FREE
Просмотров 7 тыс.9 месяцев назад
Generating leads has never been so easy! Collect emails from potential customers on your landing page, without spending a dime. In this step-by-step tutorial, I'll walk you through the new input field feature in Framer. Learn how to customize the UI and link it to leading email providers like Mailchimp, Formspark, Waitlist, and Loops! Video chapters: 0:00 - Intro 0:12 - Customizing the input fi...
From Figma to Real Website With Framer | No Code
Просмотров 17 тыс.9 месяцев назад
In this quick tutorial, you'll discover how Figma and Framer seamlessly come together, allowing you to convert static UI designs into stunning real websites. With the “Figma to HTML with Framer” plugin, you can effortlessly bring your vision to life without any coding! Figma link: www.figma.com/file/tyvXfRB1KjS0aDRNnwPGP9/Car-Wash-Landing-Page?type=design&node-id=0:1&mode=design&t=u9dJD6OQLs85S...
Interactive Image Sliders Using String Variables | Figma Tutorial 2023
Просмотров 1,3 тыс.10 месяцев назад
Making nested components interactive has never been easier! In this video, I guide you through the process of constructing an interactive image slider using string variables. Whether you're a UI/UX designer or a Figma enthusiast, this tutorial empowers you to harness the true power of nested components. Join me and take your Figma skills to the next level. Figma link: www.figma.com/file/1OvkFOb...
Dark And Light Modes Using Color Variables | Figma Tutorial [CONFIG 2023]
Просмотров 20 тыс.10 месяцев назад
In this step-by-step guide, I’ll show you how to effortlessly create dark and light modes using Figma's new color variables to make your designs more scalable and consistent. Whether you're a design enthusiast or a professional, this tutorial will equip you with the knowledge and skills to elevate your design game. Get ready to wow your audience with visually stunning interfaces that seamlessly...
Prototyping With Variables in Figma [CONFIG 2023] | Advanced Tutorial
Просмотров 3,7 тыс.10 месяцев назад
Learn how to unleash the full power of variables to create a dynamic and interactive e-commerce cart. Discover conditional interactions, boolean and number variables, and see how to switch component variants using boolean variables. Follow along as I guide you through each step, providing valuable insights and tips to help you enhance your prototyping skills. Unleash the full potential of Figma...
Master Figma Auto Layout [CONFIG 2023] | Min / Max | Text Truncate | Direction Wrap
Просмотров 4 тыс.10 месяцев назад
In this Figma tutorial, I’ll show you how to harness the power of Min/Max Width, Height, Text Truncate, and Direction Wrap to create visually appealing and adaptable components. Discover expert tips, tricks, and best practices that will empower you to craft seamless and responsive designs for any screen size or orientation. Whether you're a beginner or seasoned developer, this tutorial is your ...
Creating 3 Splash/Loading Animations In Figma!
Просмотров 2,3 тыс.11 месяцев назад
In this Figma tutorial, I'll guide you step-by-step in creating 3 eye-catching splash animations for mobile apps. These animations not only enhance the user experience but can also serve as engaging loading screens. Whether you're a beginner or an experienced designer, you'll discover valuable tips and tricks to bring your app's splash screen to life using Figma. Join me! Figma link: www.figma....
Create STUNNING Animated Mesh Gradients in Figma | Step-by-Step Tutorial
Просмотров 85011 месяцев назад
Elevate your design game with animated mesh gradients in Figma! Dive into this comprehensive guide where I break down the process of creating mesmerizing gradients from start to finish using 3 different Figma plugins. Figma link: www.figma.com/file/mnkUtn0RXUfyllzalzgsVd/Animated-Mesh-Gradient?type=design&node-id=39:13&t=J0qtJrzFYhljLDJQ-1 VIDEO CHAPTERS 00:00 - Intro 00:14 - Shapes and colors ...
Designing Text Animations in Figma | Beginners Tutorial
Просмотров 11 тыс.11 месяцев назад
In this tutorial, I'll guide you through the process of creating captivating text animations in Figma. Specifically, we'll focus on animating the headline text of a hero section to make it stand out and grab your viewers' attention. Learn the techniques used by the pros as we explore the step-by-step process of crafting amazing text animations in Figma. Figma file: www.figma.com/file/kG1gHwpmaq...
Master 3D Isometric Perspective in Figma!
Просмотров 6 тыс.11 месяцев назад
Learn how to add a captivating 3D perspective to your Figma designs. From manipulating layers to incorporating realistic shadows, discover how to bring depth and dimension to your Figma frames. Elevate your design game and captivate your clients with 3D isometrics. Like, subscribe, and stay tuned for more design tutorials! Figma: www.figma.com/file/8JTp79Kj5jX944DyJxpcDh/3D-Perspective?type=des...
Ranking Top Figma Plugins in 2023!
Просмотров 72911 месяцев назад
In this highly anticipated video, I rank the most famous Figma plugins in 2023, based on my extensive experience in the field. Join me as I dive deep into the world of Figma plugins, evaluating them on two crucial factors: quality and frequency of use. With each plugin, I'll share my personal experiences and provide an honest assessment of its capabilities. The S (highest) rank is reserved for ...
REINVENTING CAROUSELS | Figma 2023 | Components, variants and properties tutorial
Просмотров 51711 месяцев назад
Unleash your creativity with Figma as I take you on a step-by-step tutorial journey to create a stunning carousel from scratch. This comprehensive video tutorial covers all the essential features, including components, variants, and properties. Dive deep into the world of Figma design and learn how to craft an all-new carousel that will captivate and engage your audience. Perfect for both begin...
Master Figma's Sticky Scroll in 5 MINUTES: Unlock New Design Possibilities! [2023 NEW FEATURE]
Просмотров 1,7 тыс.Год назад
In this tutorial, we dive deep into Figma's latest feature, Sticky Scroll, and explore three powerful use cases that will take your design skills to the next level. Video chapters: 00:00 - Intro 00:19 - Disclosure 00:39 - Example 1 02:33 - Example 2 03:38 - Example 3 04:48 - Outro
MidJourney Tutorial: Image Reference and Weight for Stunning Profile Pictures [v5.1]
Просмотров 23 тыс.Год назад
In this video, I'll be showing you how to use MidJourney to create different versions of your profile picture and turn yourself into an avatar. MidJourney is a powerful AI-powered image editing tool that can help you enhance your images with just a few clicks. I'll be walking you through the process of using image reference and modifying the image weight to get the best results possible. As a b...
Handoff with Figma Breakpoints: Responsive Design Like a Pro [2023]
Просмотров 6 тыс.Год назад
Handoff with Figma Breakpoints: Responsive Design Like a Pro [2023]
Create an interactive product card in less than 5 minutes! [FIGMA 2023]
Просмотров 858Год назад
Create an interactive product card in less than 5 minutes! [FIGMA 2023]
Mask Text with Animated Mesh Gradient! Figma Beginners Tutorial 2022
Просмотров 1,7 тыс.Год назад
Mask Text with Animated Mesh Gradient! Figma Beginners Tutorial 2022
How to Create a Scroll Bar Animation in Figma Using Smart Animate!
Просмотров 73 тыс.Год назад
How to Create a Scroll Bar Animation in Figma Using Smart Animate!
Master Figma Auto Layout!
Просмотров 1,1 тыс.Год назад
Master Figma Auto Layout!
How To Create a Dropdown Menu in Figma!
Просмотров 11 тыс.Год назад
How To Create a Dropdown Menu in Figma!
The Right Way To Build A Navigation Bar In Figma!
Просмотров 49 тыс.Год назад
The Right Way To Build A Navigation Bar In Figma!
Mouse Spotlight Effect in Figma. Make your website fun and interactive!!
Просмотров 15 тыс.Год назад
Mouse Spotlight Effect in Figma. Make your website fun and interactive!!
The BEST Remote Usability Test! Figma + Maze
Просмотров 14 тыс.Год назад
The BEST Remote Usability Test! Figma Maze
How to create loading animations in Adobe XD using Auto Animate!
Просмотров 25 тыс.Год назад
How to create loading animations in Adobe XD using Auto Animate!
Parallax Effect Animation Using Smart Animate [Figma]
Просмотров 8 тыс.Год назад
Parallax Effect Animation Using Smart Animate [Figma]
Protopie Beginner Tutorial - Prototyping a Feedback/Review Page
Просмотров 316Год назад
Protopie Beginner Tutorial - Prototyping a Feedback/Review Page
Remove Background And Add Outline To An Image In Figma!
Просмотров 6 тыс.Год назад
Remove Background And Add Outline To An Image In Figma!
FIGMA TUTORIAL: How to create rotating carousels using COMPONENTS & VARIANTS!
Просмотров 4,9 тыс.Год назад
FIGMA TUTORIAL: How to create rotating carousels using COMPONENTS & VARIANTS!
How to create amazing carousels using components | Figma [part 1]
Просмотров 46 тыс.Год назад
How to create amazing carousels using components | Figma [part 1]

Комментарии

  • @laracassardelia9178
    @laracassardelia9178 3 часа назад

    You're awesome. Thanks so much! Keep up the good content!!

  • @collinsk8754
    @collinsk8754 3 дня назад

    Great tips 👍👍!

  • @sugmabowls3461
    @sugmabowls3461 4 дня назад

    I had implemented using the same for dynamic images using plaiceholder, this seems to work in local but gives an error in production due to build failed - RangeError: Maximum call stack size exceeded Any idea how to solve this issue?

  • @prem_netha85
    @prem_netha85 5 дней назад

    Thanks you so much for the tutorial❤🙌 it will be great if you share the figma link

  • @iamwatchingthisvid.7682
    @iamwatchingthisvid.7682 5 дней назад

    doesnt seem to work if I put it into a group... am I missing something?

  • @ahsanzhabib7207
    @ahsanzhabib7207 6 дней назад

    You come back?

  • @hyperworm3004
    @hyperworm3004 8 дней назад

    And where is the point where you actually make a real website as stated in the description? This is just another prototype.

  • @sesenberhane3295
    @sesenberhane3295 11 дней назад

    Soooo helpful! Thank you!!

  • @RashiPandey-ux7dh
    @RashiPandey-ux7dh 12 дней назад

    Wow such a amazing tutorial. It was soo detailed and in very simple approach you explained everything.... Need more such tutorials... ❤

  • @Ibibiofame
    @Ibibiofame 18 дней назад

    the best one!!!! !! thank you so much. your video helped me with my school project

  • @hroman_codes
    @hroman_codes 22 дня назад

    Dude this is a great vid thank you!

  • @user-dp7wu7kh3i
    @user-dp7wu7kh3i 23 дня назад

    hey after designing this when I put that into the frame , its not working

  • @sureshs2973
    @sureshs2973 24 дня назад

    Hi Bro i am Suresh From India. thank you bro...

  • @darialysak4591
    @darialysak4591 25 дней назад

    HOW DID YOU SCROLL IN THAT LAYOUT?

  • @andrewstrasser
    @andrewstrasser 28 дней назад

    your resoultion is way too high and it is very hard to see for beginners all of the ui stuff from figma itself

  • @Abiisstudying.yessss
    @Abiisstudying.yessss 28 дней назад

    Is there a way to publish the website live through Figma instead of using this process?

  • @n3ff848
    @n3ff848 29 дней назад

    What do yo udo if you have 4 or more elements in the carousel? Then you can't just center align.

  • @izaaclem1376
    @izaaclem1376 Месяц назад

    Bro I have subscribed because you did something amazing. Make more of this.

  • @rifaparveenm5220
    @rifaparveenm5220 Месяц назад

    Thank you for the short video! Worked on my components too💚

  • @LumiWaveStudio
    @LumiWaveStudio Месяц назад

    thankyou

  • @ITC69
    @ITC69 Месяц назад

    not good explaning

  • @cavoarmani
    @cavoarmani Месяц назад

    Great video bro!❤ Thanks

  • @marcosangelmedina5845
    @marcosangelmedina5845 Месяц назад

    such an epic video. thank you

  • @user-bn7yn7mr2m
    @user-bn7yn7mr2m Месяц назад

    Thank uou so much 🙏🏽❤

  • @user-dp7wu7kh3i
    @user-dp7wu7kh3i Месяц назад

    thank youuu

  • @ceciliaw1065
    @ceciliaw1065 Месяц назад

    learned a lot in a short video, this is perfect thank u!

  • @lucianarosa3201
    @lucianarosa3201 Месяц назад

    Nice tutorial, very useful, but i missed the part when you explain how to prototype it. Do it have buttons to the modes?

  • @london713
    @london713 Месяц назад

    is there a way to embed from another website the looks of the form and make it in framer a working form?

  • @Shreya-qx9em
    @Shreya-qx9em Месяц назад

    Thankyou so much for the help!

  • @isaiahonabanjo1946
    @isaiahonabanjo1946 Месяц назад

    amazing I tried it but the animation is not actually changing in tge background any help 🙏🏾

  • @maiquynh7098
    @maiquynh7098 Месяц назад

    Thank you so much! This is very useful <3

  • @yan-hs9sn
    @yan-hs9sn Месяц назад

    straight forward and well explained! thank you

  • @romacannon7235
    @romacannon7235 Месяц назад

  • @vaishnavib.v4273
    @vaishnavib.v4273 Месяц назад

    thanks a lot means thanks a lot , life saver

  • @neuniad7316
    @neuniad7316 Месяц назад

    Sorry may I know what tool do you use for this screen recording with the mesh gradient background?

  • @bagasdhardanu
    @bagasdhardanu Месяц назад

    YOU ARE LEGEND!!!

  • @mljarmin
    @mljarmin Месяц назад

    Thank you for the tutorial! I was looking specifically for this design. I hope to see more figma tutorial uploads from you soon.

  • @rojanxaviergolez4462
    @rojanxaviergolez4462 Месяц назад

    any way to bypass if the icon gets warped?

  • @SvetlanaAnatolivna
    @SvetlanaAnatolivna Месяц назад

    Thanks a lot! You are a magician!

  • @vishakhasureja7439
    @vishakhasureja7439 Месяц назад

    I cannot seen active and inactive bar in Figma? which version of Figma did u used? as right now is totally change.

  • @TheJenZIon
    @TheJenZIon 2 месяца назад

    thx great explanaitions

  • @wollem5136
    @wollem5136 2 месяца назад

    Hi there, is it possible to add a toggle button to activate the dark-mode and to go back to light-mode?

    • @00RaiserRock
      @00RaiserRock Месяц назад

      Yes, but you have make it as component. E.g. Make light mode card as master component and make dark mode as a variant, then rename your dark mode card layer name to "Dark mode = True" and "Dark mode = False" for light mode card. You should see the toggle button once you use the component instance

  • @chiduugochukwu4201
    @chiduugochukwu4201 2 месяца назад

    Thank you. This was well detailed. However, I am unable to create new mode. Does that mean I have to pay to be able to use that feature?

  • @JaydonWinningnz
    @JaydonWinningnz 2 месяца назад

    Why use figma at all then? Genuine question.

  • @jeremyfultineer7
    @jeremyfultineer7 2 месяца назад

    Thank you, this video was concise, no filler. Not all heroes wear capes. Subscribed.

  • @jemimahprah4583
    @jemimahprah4583 2 месяца назад

    Hello please my loader just moves from 0 to 100 straightaway, with the other numbers not showing in between What do I do?

  • @legamers.f.n9740
    @legamers.f.n9740 2 месяца назад

    Can you do it in Framer ?

  • @DoremarPlay
    @DoremarPlay 2 месяца назад

    This method changes the proportion of the icons, and i dont know how to correct it since it dont let me do it because is a component. I cant just modify the size of the icons.

  • @pa3005
    @pa3005 2 месяца назад

    Thank you!

  • @wisdomezeogu6650
    @wisdomezeogu6650 2 месяца назад

    Thank you so much. Really helpful video.