Product Sensei
Product Sensei
  • 45
  • 436 878
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 #nextjstutorial #frontend
มุมมอง: 920

วีดีโอ

Collect Emails With Framer | Input Field Tutorial | 100% FREE
มุมมอง 7K10 หลายเดือนก่อน
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
มุมมอง 18K10 หลายเดือนก่อน
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.3K10 หลายเดือนก่อน
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]
มุมมอง 21K10 หลายเดือนก่อน
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.9K11 หลายเดือนก่อน
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.1K11 หลายเดือนก่อน
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.5K11 หลายเดือนก่อน
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
มุมมอง 85811 หลายเดือนก่อน
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
มุมมอง 12K11 หลายเดือนก่อน
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!
มุมมอง 7K11 หลายเดือนก่อน
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!
มุมมอง 741ปีที่แล้ว
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
มุมมอง 531ปีที่แล้ว
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.7Kปีที่แล้ว
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]
มุมมอง 23Kปีที่แล้ว
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]
มุมมอง 6Kปีที่แล้ว
Handoff with Figma Breakpoints: Responsive Design Like a Pro [2023]
Create an interactive product card in less than 5 minutes! [FIGMA 2023]
มุมมอง 878ปีที่แล้ว
Create an interactive product card in less than 5 minutes! [FIGMA 2023]
Mask Text with Animated Mesh Gradient! Figma Beginners Tutorial 2022
มุมมอง 1.8Kปีที่แล้ว
Mask Text with Animated Mesh Gradient! Figma Beginners Tutorial 2022
How to Create a Scroll Bar Animation in Figma Using Smart Animate!
มุมมอง 76Kปีที่แล้ว
How to Create a Scroll Bar Animation in Figma Using Smart Animate!
Master Figma Auto Layout!
มุมมอง 1.1Kปีที่แล้ว
Master Figma Auto Layout!
How To Create a Dropdown Menu in Figma!
มุมมอง 11Kปีที่แล้ว
How To Create a Dropdown Menu in Figma!
The Right Way To Build A Navigation Bar In Figma!
มุมมอง 52Kปีที่แล้ว
The Right Way To Build A Navigation Bar In Figma!
Mouse Spotlight Effect in Figma. Make your website fun and interactive!!
มุมมอง 15Kปีที่แล้ว
Mouse Spotlight Effect in Figma. Make your website fun and interactive!!
The BEST Remote Usability Test! Figma + Maze
มุมมอง 15Kปีที่แล้ว
The BEST Remote Usability Test! Figma Maze
How to create loading animations in Adobe XD using Auto Animate!
มุมมอง 25Kปีที่แล้ว
How to create loading animations in Adobe XD using Auto Animate!
Parallax Effect Animation Using Smart Animate [Figma]
มุมมอง 8Kปีที่แล้ว
Parallax Effect Animation Using Smart Animate [Figma]
Protopie Beginner Tutorial - Prototyping a Feedback/Review Page
มุมมอง 319ปีที่แล้ว
Protopie Beginner Tutorial - Prototyping a Feedback/Review Page
Remove Background And Add Outline To An Image In Figma!
มุมมอง 6Kปีที่แล้ว
Remove Background And Add Outline To An Image In Figma!
FIGMA TUTORIAL: How to create rotating carousels using COMPONENTS & VARIANTS!
มุมมอง 5Kปีที่แล้ว
FIGMA TUTORIAL: How to create rotating carousels using COMPONENTS & VARIANTS!
How to create amazing carousels using components | Figma [part 1]
มุมมอง 48Kปีที่แล้ว
How to create amazing carousels using components | Figma [part 1]

ความคิดเห็น

  • @mattm7426
    @mattm7426 2 วันที่ผ่านมา

    Cmd D duplicates the menu item in home, not in nav bar, and I cant drag it into the column

  • @TestadorDePrograma
    @TestadorDePrograma 3 วันที่ผ่านมา

    thank you for the video. but how do i change the images?

  • @Riya-fu1qz
    @Riya-fu1qz 7 วันที่ผ่านมา

    LIFESAVER

  • @gracehazel3697
    @gracehazel3697 7 วันที่ผ่านมา

    thanks it was really helpful, your bway of teaching is great!!!!

  • @WholeWheatPiano
    @WholeWheatPiano 8 วันที่ผ่านมา

    This is AMAZING. Thank you so much!! Also, I think you are stressing the wrong syllables and mispronouncing "Variant"... but that's just me listening as an American English speaker/English teacher... 😬

  • @carlmccormick4499
    @carlmccormick4499 11 วันที่ผ่านมา

    Great easy to do video!!

  • @panda_Katie
    @panda_Katie 12 วันที่ผ่านมา

    Hello, I have one question. If I change the color of the main active item, only the text color changes in my instance, while the icon color remains the same. What did I do wrong?

    • @avinashprasad72
      @avinashprasad72 6 วันที่ผ่านมา

      Hi I have the same issue. have you got the solution yet?

  • @laracassardelia9178
    @laracassardelia9178 13 วันที่ผ่านมา

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

  • @collinsk8754
    @collinsk8754 16 วันที่ผ่านมา

    Great tips 👍👍!

  • @sugmabowls3461
    @sugmabowls3461 17 วันที่ผ่านมา

    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 18 วันที่ผ่านมา

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

  • @iamwatchingthisvid.7682
    @iamwatchingthisvid.7682 18 วันที่ผ่านมา

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

  • @ahsanzhabib7207
    @ahsanzhabib7207 19 วันที่ผ่านมา

    You come back?

  • @hyperworm3004
    @hyperworm3004 21 วันที่ผ่านมา

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

  • @sesenberhane3295
    @sesenberhane3295 24 วันที่ผ่านมา

    Soooo helpful! Thank you!!

  • @RashiPandey-ux7dh
    @RashiPandey-ux7dh 25 วันที่ผ่านมา

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

    • @ProductSensei77
      @ProductSensei77 25 วันที่ผ่านมา

      Thank you so much 😀

  • @Ibibiofame
    @Ibibiofame หลายเดือนก่อน

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

  • @hroman_codes
    @hroman_codes หลายเดือนก่อน

    Dude this is a great vid thank you!

  • @user-dp7wu7kh3i
    @user-dp7wu7kh3i หลายเดือนก่อน

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

  • @sureshs2973
    @sureshs2973 หลายเดือนก่อน

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

  • @darialysak4591
    @darialysak4591 หลายเดือนก่อน

    HOW DID YOU SCROLL IN THAT LAYOUT?

  • @andrewstrasser
    @andrewstrasser หลายเดือนก่อน

    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 หลายเดือนก่อน

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

  • @n3ff848
    @n3ff848 หลายเดือนก่อน

    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 2 หลายเดือนก่อน

    Thank you so much! This is very useful <3

  • @yan-hs9sn
    @yan-hs9sn 2 หลายเดือนก่อน

    straight forward and well explained! thank you

  • @romacannon7235
    @romacannon7235 2 หลายเดือนก่อน

  • @vaishnavib.v4273
    @vaishnavib.v4273 2 หลายเดือนก่อน

    thanks a lot means thanks a lot , life saver

  • @neuniad7316
    @neuniad7316 2 หลายเดือนก่อน

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

  • @bagasdhardanu
    @bagasdhardanu 2 หลายเดือนก่อน

    YOU ARE LEGEND!!!

  • @mljarmin
    @mljarmin 2 หลายเดือนก่อน

    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 2 หลายเดือนก่อน

    any way to bypass if the icon gets warped?

  • @SvetlanaAnatolivna
    @SvetlanaAnatolivna 2 หลายเดือนก่อน

    Thanks a lot! You are a magician!

  • @vishakhasureja7439
    @vishakhasureja7439 2 หลายเดือนก่อน

    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?