Getting started
What are design tokens?
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development. Salesforce, Lightning Design System
Design Tokens originated at Salesforce, where Jina and Jon coined the term. A good explanation can be found on Jina Anne's Youtube
The W3C Design Tokens Community Group aims to establish a standard on which tools can rely on for sharing design tokens. This plugin aims to be W3C compliant so you could take your JSON and move to another tool someday.
Unfortunately design tools are not advanced enough yet to fully incorporate design tokens. We have Color and Text Styles in Figma but there's no way to use a design token like border radius or spacer units in a reusable way. This plugin aims to bridge that gap, to help you manage your color and text styles and give you design tokens for all other properties. You can choose how deep you want to integrate the plugin into your workflow, an easy way to start would be to just use it to manage your color and text styles, which gives you features such as references, math for scales and a way to better create multi-themed design systems.
Installing the plugin
Install Tokens Studio for Figma by hitting the Install button on this page (either in Figma or in the browser)
If you launch the plugin for the very first time, you won't have any tokens defined just yet. Click on Get started to get started.
Then, you can proceed in one of the following ways:
- Create your own tokens via the UI
- Import your existing styles into Tokens
- Sync your existing tokens using remote sync (GitHub, GitLab, JSONbin)
- Create tokens via the JSON editor