Tokens, variables, and styles - Update: Introduction to design systems

Figma is free to use. Sign up here: https://bit.ly/3msp0OV Habitz design system (with variables): https://www.figma.com/community/file/... Previously in our Intro to Design Systems course, we followed Kai—a product designer at a habit-forming app called Habitz—on their journey to building their first design system in Figma. Kai has been learning about design tokens and believes this could be the next step in supporting scalability of the Habitz design system. Come along with us to learn more! Introduction to design systems playlist:    • Introduction to design systems   Styles in Figma: https://help.figma.com/hc/en-us/artic... Guide to variables in Figma: https://help.figma.com/hc/en-us/artic... The difference between variables and styles: https://help.figma.com/hc/en-us/artic... Components, styles, and shared library best practices: https://www.figma.com/best-practices/... Chapters: 00:00 - Introduction 00:55 - Design tokens 01:12 - What are design tokens? 02:16 - Aliasing 03:49 - Token organization 04:22 - Primitive tokens 04:55 - Semantic tokens 05:37 - Component-specific tokens 06:34 - Token ordering 07:07 - Implement tokens in Figma 08:16 - Migrate tokens 8:40 - Creating primitive tokens 09:08 - Tip: color scoping and hide from publishing 09:31 - Creating tokens collection 10:39 - Dark mode and spacing tokens 11:26 - Spacing tokens 11:40 - Tips for naming tokens 12:36 - Wrap up ____________________________________________________ Find us on ⬇️ Twitter:   / figma   Instagram:   / figma   LinkedIn:   / figma   Figma forum: https://forum.figma.com/ ____________________________________________________ #Figma #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems