What are design tokens

Design tokens are the values needed to construct and maintain a design system

• Colors
• Typography
• ...

How to design with tokens

Install Design Tokens plugin

1. Design Tokens by Lukas Opperman

Reuse and extend Figma styles

Reuse the defined Texts styles, Colors(Background, On background, primary). Potentially you can add more styles such a secondary secondary or support colors (Success, Info, error).

Export design token file

Export json file

Design one new component

Design one new component for your UI inventory. reusing the figma styles and design tokens.

• Color styles (e.g. Support colors: Success, Warning, Info and Danger)
• Text styles (e.g. display titles, callout, cubhead, footnote, caption ...)
• Alerts and notifications
• Navigation menu
• ...