Design Tokens

Export design tokens to JSON or GitHub.

by Lukas Oppermann

users
65K
likes
2K
saves
23K
comments
82
FreeWorks inFigma Design
Price
Free
Latest version
v85 ยท Oct 7, 2025
First published
Sep 17, 2020
Features

What Design Tokens does

What the plugin declares in its manifest.

  • Manifest

    6 quick actions

    Run from the Actions menu (Cmd/Ctrl + K): Export Design Token File, Send Design Tokens to Url, Settings, Help and 2 more.

On this page
Overview

About Design Tokens

Design Tokens is a free Figma plugin published by Lukas Oppermann in 2020. It works in Figma Design and has 65,441 users and 2,010 likes on the Figma Community. It ranks #7 in Variables & Tokens and #8 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:

  1. colors
  2. typograhy
  3. grids
  4. effects
  5. sizes
  6. spacing (padding)
  7. radii
  8. borders
  9. motion
  10. opacity
  11. 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

Please create an issues in the repository.

Changelog

What's new

Version 85 ยท released Oct 7, 2025

The developer didn't publish release notes for this version.

Trust

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.

Rankings

Where Design Tokens ranks

Compare

Design Tokens alternatives

  1. 369K users7.6KFree + paid features

    The scalable design tokens solution for Figma

  2. 205K users3.1KFree + paid features

    Extended swap for variables/styles/components, export variables/styles, bulk-audit library & mockups

  3. 140K users3.3KFree + $15 upgrade

    Apply styles and variables to all your designs with one click!

  4. 91K users1.7KFree

    Export variables from one file and import them to another. Supports modes, references, and scopes.

  5. 5

    Styles to Variables

    by Yann-Edern Gillet

    90K users1.1KFree

    Convert your Figma Styles into Variables

  6. 6

    Variables Pro

    by Figterate

    82K users479Free

    Variables Pro | Swap, Import, Export Variables

FAQ

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 Tokens Studio for Figma, Design System Organizer and Styles & Variables Organizer. Compare all of them on the best Figma plugins for variables & tokens.

For developers

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.

Design Tokens on figmaplugins.co

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>

Want it featured on figmaplugins.co? Submit it for review