Tokens Studio

A Figma plugin that manages design tokens inside Figma and syncs them to GitHub, GitLab, or other sources of truth.

All Dictionary

In one sentence

Tokens Studio is a Figma plugin that lets me create, edit, and sync design tokens between Figma and a Git repository.

What it is

Tokens Studio (formerly Figma Tokens) is a plugin that lives inside Figma. It gives designers a structured place to define tokens: colors, spacing, typography, shadows, composition tokens, and more. From there, it pushes those values to a GitHub or GitLab repo as JSON, where engineering can pick them up.

Why it matters

The design-code gap usually lives in tokens. Designers set values in Figma styles, engineers set them in code, and the two quietly drift. Tokens Studio closes the gap by making tokens portable. I define once, sync to code, and let a transformer like Style Dictionary publish platform outputs.

Example

A typical setup inside Figma:

  1. Create a Token Set named core with primitives like blue.500 = #3B82F6
  2. Create a Token Set named semantic with aliases like color.background.primary = {blue.500}
  3. Connect the plugin to a GitHub repo and a branch
  4. Push changes and open a pull request directly from the plugin
  5. The repo receives a tokens.json file that engineering can consume

When to use it

  • You want designers to own tokens without leaving Figma
  • Your engineers expect tokens as JSON in version control
  • You need themes, modes, or multi-brand support managed visually
  • You plan to pair it with Style Dictionary for platform outputs

See also