- Видео 45
- Просмотров 420 726
Product Sensei
Парагвай
Добавлен 1 июн 2022
Let's design digital products 👻
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...
_______________________________________________________
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!
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]
You're awesome. Thanks so much! Keep up the good content!!
Great tips 👍👍!
Glad it was helpful!
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?
Thanks you so much for the tutorial❤🙌 it will be great if you share the figma link
doesnt seem to work if I put it into a group... am I missing something?
You come back?
I'm back 😅🎉
And where is the point where you actually make a real website as stated in the description? This is just another prototype.
Soooo helpful! Thank you!!
Wow such a amazing tutorial. It was soo detailed and in very simple approach you explained everything.... Need more such tutorials... ❤
Thank you so much 😀
the best one!!!! !! thank you so much. your video helped me with my school project
You're very welcome!
Dude this is a great vid thank you!
Glad you liked it!
hey after designing this when I put that into the frame , its not working
Hi Bro i am Suresh From India. thank you bro...
HOW DID YOU SCROLL IN THAT LAYOUT?
your resoultion is way too high and it is very hard to see for beginners all of the ui stuff from figma itself
Is there a way to publish the website live through Figma instead of using this process?
What do yo udo if you have 4 or more elements in the carousel? Then you can't just center align.
Bro I have subscribed because you did something amazing. Make more of this.
Thank you, I will
Thank you for the short video! Worked on my components too💚
You're welcome!
thankyou
not good explaning
Great video bro!❤ Thanks
such an epic video. thank you
Thank uou so much 🙏🏽❤
thank youuu
learned a lot in a short video, this is perfect thank u!
Nice tutorial, very useful, but i missed the part when you explain how to prototype it. Do it have buttons to the modes?
is there a way to embed from another website the looks of the form and make it in framer a working form?
Thankyou so much for the help!
amazing I tried it but the animation is not actually changing in tge background any help 🙏🏾
Thank you so much! This is very useful <3
straight forward and well explained! thank you
❤
thanks a lot means thanks a lot , life saver
Sorry may I know what tool do you use for this screen recording with the mesh gradient background?
YOU ARE LEGEND!!!
Thank you for the tutorial! I was looking specifically for this design. I hope to see more figma tutorial uploads from you soon.
any way to bypass if the icon gets warped?
Thanks a lot! You are a magician!
I cannot seen active and inactive bar in Figma? which version of Figma did u used? as right now is totally change.
thx great explanaitions
Hi there, is it possible to add a toggle button to activate the dark-mode and to go back to light-mode?
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
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?
Why use figma at all then? Genuine question.
Thank you, this video was concise, no filler. Not all heroes wear capes. Subscribed.
Hello please my loader just moves from 0 to 100 straightaway, with the other numbers not showing in between What do I do?
Can you do it in Framer ?
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.
Thank you!
Thank you so much. Really helpful video.