Product Sensei
Product Sensei
  • 45
  • 474 739
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
Переглядів: 1 085

Відео

Collect Emails With Framer | Input Field Tutorial | 100% FREE
Переглядів 8 тис.11 місяців тому
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
Переглядів 22 тис.11 місяців тому
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,4 тис.11 місяців тому
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]
Переглядів 25 тис.11 місяців тому
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
Переглядів 4,3 тис.Рік тому
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,4 тис.Рік тому
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,8 тис.Рік тому
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
Переглядів 891Рік тому
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
Переглядів 14 тис.Рік тому
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!
Переглядів 9 тис.Рік тому
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!
Переглядів 756Рік тому
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
Переглядів 560Рік тому
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,9 тис.Рік тому
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]
Переглядів 24 тис.Рік тому
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]
Переглядів 7 тис.Рік тому
Handoff with Figma Breakpoints: Responsive Design Like a Pro [2023]
Create an interactive product card in less than 5 minutes! [FIGMA 2023]
Переглядів 952Рік тому
Create an interactive product card in less than 5 minutes! [FIGMA 2023]
Mask Text with Animated Mesh Gradient! Figma Beginners Tutorial 2022
Переглядів 1,8 тис.Рік тому
Mask Text with Animated Mesh Gradient! Figma Beginners Tutorial 2022
How to Create a Scroll Bar Animation in Figma Using Smart Animate!
Переглядів 82 тис.Рік тому
How to Create a Scroll Bar Animation in Figma Using Smart Animate!
Master Figma Auto Layout!
Переглядів 1,2 тис.Рік тому
Master Figma Auto Layout!
How To Create a Dropdown Menu in Figma!
Переглядів 12 тис.Рік тому
How To Create a Dropdown Menu in Figma!
The Right Way To Build A Navigation Bar In Figma!
Переглядів 58 тис.Рік тому
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
Переглядів 17 тис.Рік тому
The BEST Remote Usability Test! Figma Maze
How to create loading animations in Adobe XD using Auto Animate!
Переглядів 26 тис.Рік тому
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
Переглядів 331Рік тому
Protopie Beginner Tutorial - Prototyping a Feedback/Review Page
Remove Background And Add Outline To An Image In Figma!
Переглядів 7 тис.Рік тому
Remove Background And Add Outline To An Image In Figma!
FIGMA TUTORIAL: How to create rotating carousels using COMPONENTS & VARIANTS!
Переглядів 5 тис.Рік тому
FIGMA TUTORIAL: How to create rotating carousels using COMPONENTS & VARIANTS!
How to create amazing carousels using components | Figma [part 1]
Переглядів 51 тис.Рік тому
How to create amazing carousels using components | Figma [part 1]

КОМЕНТАРІ

  • @KevinfromMiamiBeach
    @KevinfromMiamiBeach День тому

    I can’t do the same thing as u and besides that idk what kind of computer are u using but me I’m using a Chromebook

  • @hayedehzare6324
    @hayedehzare6324 День тому

    Thank you😍😍

  • @rerary
    @rerary 16 днів тому

    amazing! thanks

  • @KayleighBerry-vb6lx
    @KayleighBerry-vb6lx 21 день тому

    This was great thank you! Quick question though, when I did it I when I toggled the value to active for the different screens, only the font changed colour and not the icon. Do you know what step I might have missed?

  • @user-ux2pb5po9l
    @user-ux2pb5po9l 21 день тому

    Just Wow! amazing help , just keep it up

  • @RemedyOnlineGh
    @RemedyOnlineGh 25 днів тому

    I'm from Ghana and I just subscribed to your channel. I don't normally do that to new channels but your style of presenting the design process alone is crazy bro! Kudos👊🏻👊🏻

  • @baturesolomon4687
    @baturesolomon4687 26 днів тому

    Hi....awesome video Quick question. Lets say I created components in figma will they work in framer too?

  • @elisimpatica463
    @elisimpatica463 28 днів тому

    You are a great teacher! In a short video, explain very well the Maze function. Thank you so much for that! Greetings!

  • @tapumojumder6090
    @tapumojumder6090 29 днів тому

    It was very helpful. thank you brother

  • @mattm7426
    @mattm7426 Місяць тому

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

  • @TestadorDePrograma
    @TestadorDePrograma Місяць тому

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

  • @Riya-fu1qz
    @Riya-fu1qz Місяць тому

    LIFESAVER

  • @gracehazel3697
    @gracehazel3697 Місяць тому

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

  • @WholeWheatPiano
    @WholeWheatPiano Місяць тому

    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 Місяць тому

    Great easy to do video!!

  • @panda_Katie
    @panda_Katie Місяць тому

    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 Місяць тому

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

  • @laracassardelia9178
    @laracassardelia9178 Місяць тому

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

  • @collinsk8754
    @collinsk8754 Місяць тому

    Great tips 👍👍!

  • @sugmabowls3461
    @sugmabowls3461 Місяць тому

    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 Місяць тому

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

  • @iamwatchingthisvid.7682
    @iamwatchingthisvid.7682 Місяць тому

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

  • @ahsanzhabib7207
    @ahsanzhabib7207 Місяць тому

    You come back?

  • @hyperworm3004
    @hyperworm3004 Місяць тому

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

  • @sesenberhane3295
    @sesenberhane3295 Місяць тому

    Soooo helpful! Thank you!!

  • @RashiPandey-ux7dh
    @RashiPandey-ux7dh Місяць тому

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

  • @Ibibiofame
    @Ibibiofame 2 місяці тому

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

  • @hroman_codes
    @hroman_codes 2 місяці тому

    Dude this is a great vid thank you!

  • @user-dp7wu7kh3i
    @user-dp7wu7kh3i 2 місяці тому

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

  • @sureshs2973
    @sureshs2973 2 місяці тому

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

  • @darialysak4591
    @darialysak4591 2 місяці тому

    HOW DID YOU SCROLL IN THAT LAYOUT?

    • @tnguyen621
      @tnguyen621 12 днів тому

      Double click on frame to select group. Then click on group & move the mouse while holding down the Shift key. (Posting this for future inquiries since it took me a bit to find in comments.)

  • @andrewstrasser
    @andrewstrasser 2 місяці тому

    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 2 місяці тому

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

  • @n3ff848
    @n3ff848 2 місяці тому

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

  • @izaaclem1376
    @izaaclem1376 2 місяці тому

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

  • @rifaparveenm5220
    @rifaparveenm5220 2 місяці тому

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

  • @LumiWaveStudio
    @LumiWaveStudio 2 місяці тому

    thankyou

  • @ITC69
    @ITC69 2 місяці тому

    not good explaning

  • @cavoarmani
    @cavoarmani 2 місяці тому

    Great video bro!❤ Thanks

  • @marcosangelmedina5845
    @marcosangelmedina5845 2 місяці тому

    such an epic video. thank you

  • @user-bn7yn7mr2m
    @user-bn7yn7mr2m 2 місяці тому

    Thank uou so much 🙏🏽❤

  • @user-dp7wu7kh3i
    @user-dp7wu7kh3i 2 місяці тому

    thank youuu

  • @ceciliaw1065
    @ceciliaw1065 2 місяці тому

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

  • @lucianarosa3201
    @lucianarosa3201 3 місяці тому

    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 3 місяці тому

    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 3 місяці тому

    Thankyou so much for the help!

  • @isaiahonabanjo1946
    @isaiahonabanjo1946 3 місяці тому

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

  • @maiquynh7098
    @maiquynh7098 3 місяці тому

    Thank you so much! This is very useful <3

  • @yan-hs9sn
    @yan-hs9sn 3 місяці тому

    straight forward and well explained! thank you

  • @romacannon7235
    @romacannon7235 3 місяці тому

  • @vaishnavib.v4273
    @vaishnavib.v4273 3 місяці тому

    thanks a lot means thanks a lot , life saver