Summary
Keywords
Full Transcript
🚀 Book 1:1 Tutoring Sessions with me and take your Product Design journey to the next level: https://www.learnproduct.design/sessions In this video, I dive into the complete basics of Figma variables and design tokens. We'll explore how they can help engineers build faster, reduce miscommunication, and make future changes easier. I'll explain the concept of variables and how they differ from color styles, and I'll show you practical examples of how to use them in Figma. By the end, you'll have a solid understanding of design tokens and how they can improve your design system. 🔗 Basics of Design Tokens - https://youtu.be/1-pkJSDskvY 🚀 Create an account on Mobbin for free: https://mobbin.com/?via=chethan 🔶 Chapters 00:00 Introduction 02:20 Why do we need Design Tokens? 07:12 Multiple Levels of Design Tokens 10:40 Color Styles vs Figma Variables 21:46 Uber's Design System 26:51 Atlassian's Design System 29:17 Material Design Tokens ------------------------------------------- Mega Product Design Course for Beginners: https://www.youtube.com/playlist?list=PLERed4ILxkJ1_kDOXCrEGmB58IsLOiIc3 Webflow Course for Beginners: https://www.youtube.com/playlist?list=PLERed4ILxkJ1N4PxzGE_ywogtBeeOaqc8 Photoshop Tutorials: https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi Illustrator Tutorials: https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1 After Effects Tutorials: https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk UI Design Tutorials: https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW Design Resources, Tools and Softwares: https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9 Adobe XD CC Tutorials: https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv eSports Design Tutorials: https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P -------------------------------------------------------------------------------------------- Contact me : Portfolio: https://chethankvs.design Twitter: https://twitter.com/kvschethan Instagram: https://instagram.com/design_pilot Mail: [email protected] Behance: https://behance.net/chethankvs Dribbble: https://dribbble.com/chethankvs -------------------------------------------------------------------------------------------- LIKE, SHARE, COMMENT & SUBSCRIBE :) #productdesign #figma #uiuxdesign🚀 Get 2 free months of Skillshare Premium & watch my design course for free: https://skl.sh/2TVhf8z In this video, I dive into the complete basics of Figma variables and design tokens. We'll explore how they can help engineers build faster, reduce miscommunication, and make future changes easier. I'll explain the concept of variables and how they differ from color styles, and I'll show you practical examples of how to use them in Figma. By the end, you'll have a solid understanding of design tokens and how they can improve your design system. 🔗 Basics of Design Tokens - https://youtu.be/1-pkJSDskvY 🚀 Create an account on Mobbin for free: https://mobbin.com/?via=chethan 🔶 Chapters 00:00 Introduction 02:20 Why do we need Design Tokens? 07:12 Multiple Levels of Design Tokens 10:40 Color Styles vs Figma Variables 21:46 Uber's Design System 26:51 Atlassian's Design System 29:17 Material Design Tokens ------------------------------------------- Mega Product Design Course for Beginners: https://www.youtube.com/playlist?list=PLERed4ILxkJ1_kDOXCrEGmB58IsLOiIc3 Webflow Course for Beginners: https://www.youtube.com/playlist?list=PLERed4ILxkJ1N4PxzGE_ywogtBeeOaqc8 Photoshop Tutorials: https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi Illustrator Tutorials: https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1 After Effects Tutorials: https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk UI Design Tutorials: https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW Design Resources, Tools and Softwares: https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9 Adobe XD CC Tutorials: https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv eSports Design Tutorials: https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P -------------------------------------------------------------------------------------------- Contact me : Portfolio: https://chethankvs.design Twitter: https://twitter.com/kvschethan Instagram: https://instagram.com/design_pilot Mail: [email protected] Behance: https://behance.net/chethankvs Dribbble: https://dribbble.com/chethankvs -------------------------------------------------------------------------------------------- LIKE, SHARE, COMMENT & SUBSCRIBE :) #productdesign #figma #uiuxdesign
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
