Components and Variants in Figma – Designing a Search Component скачать в хорошем качестве

Components and Variants in Figma – Designing a Search Component

Learn how to use components and variants in Figma to design interactive, stateful components as part of your design system. This is a step-by-step tutorial where I'll be walking you through the process of creating and organizing components through a hands-on design exercise! This video is part five of my Figma series on the Google search experience, where I've committed to prototype a Google search from scratch with all of you here on YouTube. This video covers the first of three components we'll be doing in this series. The remaining components will be covered in the next video. If you haven't watched my first video, and specially if you're new to Figma, make sure to check that out before you get into components. This is quite an advanced tutorial!    • Designing with Figma – A Beginners' Hands-...   If you want to follow along this tutorial with the file open, you can create a duplicate from the link below by clicking on the arrow next to the file title in the top-middle area 👇 https://www.figma.com/file/IMrysJa4T7... Components allow us to reuse existing parts of our design, saving us time on otherwise lots of duplication. The concept is borrowed from engineering and it's used across all the popular interface design frameworks. Composition is fundamental to both design and engineering. If this is the first time you come across the concept of components, I HIGHLY encourage you to give this a read. https://www.figma.com/blog/components... It's been over 4 years since Figma launched components, and at this point there's lots to uncover. In this video, my goal was to bring together the most important principles and practices related to components to help you have a solid foundation for your own projects. Was this video helpful? Do you have any questions about components or anything specific about Figma that you'd like to see in future videos? Any suggestions to improve my videos? Drop them in the comments below! 💬 For a weekly dose of videos and tutorials focused on the skills, practices and principles that'll help you elevate your design, don't forget to hit subscribe! Connect with me here 👋 Twitter:   / javalaves   Figma: https://www.figma.com/@javi Chapters: 0:00 - Intro 1:00 - Search - Home Variant 8:44 - Search - Results Variant 24:53 - Implementation 27:03 - Conclusion