Figma is free to use. Sign up here: [ Ссылка ]

Habitz design system (with variables): [ Ссылка ]

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: [ Ссылка ]

Styles in Figma: [ Ссылка ]
Guide to variables in Figma: [ Ссылка ]
The difference between variables and styles: [ Ссылка ]
Components, styles, and shared library 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: [ Ссылка ]
Instagram: [ Ссылка ]
LinkedIn: [ Ссылка ]
Figma forum: [ Ссылка ]

____________________________________________________


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

свернуть