Tokens Studio for Figma

About this plugin

Gives you the ability to use Design Tokens that can be used for a whole range of design options, from border radii or spacer units to semantic color and typography styles that are able to reference other tokens. It allows you to change tokens and see these changes applied to the whole document, its styles or just a selection.

Generate Tokens with the UI or with your own JSON. Create or update Type, Color or Shadow Styles based on tokens. Reference tokens in each other to create type scales, container paddings or semantic colors.

Supported Tokens

1. Colors (Fill, Border Color — hex, rgba, hsla) incl. color modifiers such as lighten, darken, mix or alpha
2. Spacing (Horizontal, Vertical, Gap)
3. Sizing (Width/Height)
4. Dimension (spacing, sizing, radii, background blur)
5. Opacity
6. Typography (Font family, font weight, font size, line height, letter spacing, paragraph spacing)
7. Shadow tokens (both dropShadow and innerShadow)
8. Border tokens (color, width, strokeStyle)
9. Border Radius (individually or each corner)
10. Border Width
11. Asset tokens (image fill)
12. [Pro]: Composition tokens (think css classes for Figma)

All tokens support references to one another, so for example if you want to alias {theme.primary} to colors.blue then you'd write {colors.blue}

as a value.

Also, you can create math equations in tokens, allowing you to write a type scale like this: {fontSizeBase} * 1.618 and so on.

Find out more about Tokens Studio for Figma (Figma Tokens): tokens.studio and read the docs at docs.tokens.studio

Pro plan

To support teams that embrace this plugin we recently launched a Pro plan that comes with advanced features such as connecting tokens to Figma Styles, Multi-file sync, Advanced theme management, a branch switcher and composition tokens. If you rely on the plugin in your job, consider switching to the Pro plan to support the development of the plugin - we'll be able to ship new features faster for both the Pro and the Free version.

Usage guide

Create or update your Color or Text styles by creating tokens and then clicking Create Styles - use Styles as you were using them before.

Import existing styles to Tokens by clicking Import.

Left-click on a token to apply it to one or more layers.

Right-click a token to apply it to a specific property (such as only to Horizontal Spacing) - also you can delete or edit tokens by right-clicking them.

Example document

We've recently published an example document to play with if you're just getting started. We recommend to start the plugin in that file so you can see what you can do with the plugin.

Download free community file

Import your styles

Best way to get started is to just Import your existing styles as Tokens. Hit the "Import Styles" button on the top right.

Sync with external source of truth

1. JSONBin
2. URL (Read-only)
3. GitHub
4. GitLab
5. Azure DevOps
6. Supernova

This plugin is open source! Feel free to contribute, create suggestions at https://github.com/tokens-studio/figma-plugin