Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
January 25, 2023 20:44
December 8, 2022 11:54
March 27, 2023 09:49
April 15, 2022 17:55
July 8, 2022 16:01
February 25, 2023 10:45
June 4, 2022 03:10
January 25, 2023 20:44
February 6, 2023 19:49
July 8, 2022 16:01
January 25, 2023 20:44
February 5, 2022 00:17
June 4, 2022 03:10
February 5, 2022 00:17
December 8, 2022 11:54
March 27, 2023 09:34
February 5, 2022 00:17
March 20, 2021 14:21
February 5, 2022 00:17

Tokens Studio for Figma (formerly known as Figma Tokens)

Figma Design Tokens - Making design tokens a single source of truth for Figma. | Product Hunt

Tokens Studio for Figma is a plugin for Figma allowing you to define and use design tokens in Figma. You can store your design tokens in JSON, sync them with a sync provider such as GitHub and define tokens even for properties that have no native support yet in Figma, such as borderRadius or spacing. You can create color and typography tokens in a granular way by extracting atomic decisions to tokens. You can also define aliases for every token, so that you can reuse your decisions. You can define and apply spacing tokens, allowing you to set the Auto Layout properties in Figma automatically. Think of it like Styles for everything.



Slack Channel

There's a Slack channel where the community can exchange ideas, best practices or simply ask a question. Want to join.


Zed Logo Mirahi Logo Mirahi

Is your company using Tokens Studio for Figma? Consider subscribing to Pro to benefit from advanced features and support the project! More info on our website.

How should I use this plugin?

There's 2 ways how you could use the plugin: Only use it to create or update your Styles but not apply any tokens with it, which would allow you to use features such as atomic type decisions, aliases and theme sets for managing styles (this is really powerful in combination with Figma's Swap library feature). Or you could use the plugin to apply tokens with it, which would give you style-like functionality for things like border radius or spacings.

It's up to you what method you choose. If you choose the option to keep using Styles then the plugin will only serve as a method to update them, but you would still be using Figma Styles for apply color and text styles.

How does applying border radius or spacing tokens work?

Whenever you apply a token to a layer, the plugin will store hidden information on that layer containing information about what token to apply for what property. Whenever your tokens change, we scan the document for any layers containing these hidden information, and update layers accordingly. For Styles, the plugin checks if there is any local style with the same name of your color or typography tokens and updates these. For files where the local styles is remote (not local to that document) the plugin has no way to apply the style currently and will apply the raw hex value. I would advise to apply styles with Figma's Style feature, not with the plugin due to exactly this reason. The plugin can still serve as a manager for styles then, allowing you to use a single source of truth.

More information

Most information can be found in the docs or our website.


  • Run npm ci to install dependencies.
  • Run npm run start to start webpack in watch mode or npm run build to build once.
  • Open Figma -> Plugins -> Development -> New Plugin... and choose manifest.json file from this repo.
  • Create a Pull request for your branch

Known Issues

Cannot read property document of undefined

This error can be solved by clearing Figma's cache; follow the steps outlined in this document.

Use the Terminal app to clear the cache.

Quit the Figma desktop app.
Open the and enter the following command: rm -rf "$HOME/Library/Application Support/Figma/"{Desktop,DesktopProfile}
Try opening the Figma desktop app again.