Design System - Tokens

Configure your project in a way you can change styles without opening your code editor with Figma tokens

Design Tokens are the language that we both designers and developers understand

We use tokens to gather all design decisions on one place and make them accessable and understandable for both designers and developers

Tokens - Flow

Tokens should be the single source of truth for all our designs and apps, including our wordpress website, react app, androind or ios app.

Features illustration

Primary Button - Tokens

We use tokens to gather and structure the button styles, that way both developers and designers will understand the composition.

Features illustration

Token Types

There's no a hard rule for token types we could define them by the use case

Features illustration

Tokens Plugins and automations

We can use Figma tokens to manage our design tokens straight in our Figma file, it will provide us with json exporter that we can connect to supernova.io , from there we could manage our documentation and export to our codebase

Features illustration