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/1298672675597243186

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: https://youtube.com/playlist?list=PLXDU_eVOJTx6vqOWJSWH87Zb5-riiG63A&feature=shared

Styles in Figma: https://help.figma.com/hc/en-us/articles/360039238753-Styles-in-Figma Guide to variables in Figma: https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma The difference between variables and styles: https://help.figma.com/hc/en-us/articles/15871097384471-The-difference-between-variables-and-styles Components, styles, and shared library best practices: https://www.figma.com/best-practices/components-styles-and-shared-libraries/

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: https://twitter.com/figma Instagram: https://www.instagram.com/figma LinkedIn: https://www.linkedin.com/company/figma Figma forum: https://forum.figma.com/

---

#Figma #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems