On this page
About Design Tokens
Design Tokens is a free Figma plugin published by Lukas Oppermann in 2020. It works in Figma Design and has 62,447 users and 1,948 likes on the Figma Community. It ranks #3 in Variables & Tokens and #7 in Developers on our lists.
In the developer's words
Export Figma styles and custom tokens to a style dictionary ready json or sync to github.
Vote for us on ProductHunt
Design Tokens
You can create design tokens for the following properties:
- colors
- typograhy
- grids
- effects
- sizes
- spacing (padding)
- radii
- borders
- motion
- opacity
- variables
Benefits
✅ Actively developed
✅ Compatible with Amazon Style Dictionary
✅ Sync tokens directly with github repo (or other server)
✅ Support for Figma Styles
✅ Support for custom tokens
Usage & transformation
Find out how to use the plugin to create custom tokens from the documentation.
Get up to speed transforming your tokens using style directory with the transformer package.
You can also view the example Figma file.
Feature request & bugs
What's new
Version 87 · released Feb 16, 2026
The developer didn't publish release notes for this version.
Permissions and privacy
Network access
Design Tokens's manifest allows network access to any domain ("*"), so Figma doesn't limit where it can send data.
- *
Extra permissions
None beyond the standard access to the file you run it in.
Read from the plugin's published manifest. Questions about data handling go to the developer's support page.
Where Design Tokens ranks
Design Tokens alternatives
- 1
Styles & Variables Organizer
by Chenmu Wu
134K users3.2KFree + $15 upgradeApply styles and variables to all your designs with one click!
- 2
Export/Import Variables
by Honza Toman
85K users1.7KFreeExport variables from one file and import them to another. Supports modes, references, and scopes.
- 3
Figma Tailwindcss
by Jan D'Hollander
53K users606FreeExport design tokens to tailwind theme
- 4
Kigen
by vijay verma
34K users1.7KFreeCreate Design System Variables, Tokens, Styles and more with documentation
- 5
variables2css
by Kai-Uwe Hella
28K users353FreeConvert Figma Variables to CSS, Sass, Tailwind, Json, Javascript (Styled-Components), Less or Stylus
- 25K users188Free + paid features
Save, copy, and reorder variables across files easily
Design Tokens FAQ
What does Design Tokens do?
Export design tokens to JSON or GitHub. It's a Figma plugin by Lukas Oppermann that runs in Figma Design.
Is Design Tokens free?
Yes. Design Tokens is free to install and run from the Figma Community, with no paid tier listed.
Is Design Tokens safe to use?
Figma plugins can only reach the internet through domains listed in their manifest. Design Tokens's manifest allows network access to any domain ("*"), so Figma doesn't limit where it can send data. As with any plugin, check the developer's privacy policy before using it on client work.
How do I install Design Tokens?
Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.
What are the best alternatives to Design Tokens?
By user count, the closest alternatives are Styles & Variables Organizer, Export/Import Variables and Figma Tailwindcss. Compare all of them on the best Figma plugins for variables & tokens.
Built this plugin?
Use this page as a landing page for Design Tokens: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.
Style
Label
Size
Code
<a href="https://figmaplugins.co/plugins/design-tokens/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="Design Tokens on figmaplugins.co" width="220" height="48"></a>