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