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
source