← All plugins

Token Converter

Your variables and styles as code for any platform, on every Figma plan, with a changelog of what changed.

Try the free web version: Design Token Converter →

What it does

Token Converter reads your local variables and styles through the plugin API, so it works on every Figma plan and in Dev Mode, and turns them into code: CSS custom properties, SCSS, Tailwind v4 @theme or a v3 config, JS and TypeScript, flat JSON, W3C design tokens, Style Dictionary, SwiftUI, Android XML, Jetpack Compose, Flutter, and a Markdown table for people and AI tools.

Aliases stay aliases (or resolve), modes become data attributes, classes or media queries, and text, shadow and gradient styles become composite tokens. A snapshot in the file shows what changed since the last export, renames included, as a changelog. Tokens JSON imports back into variables.

  1. Variables to Tailwind v4, ready to paste

    Namespaced @theme, modes in a base layer, aliases kept.

  2. Swift, Compose, Android, Flutter

    The same tokens for every platform, with dark values.

  3. What changed since the last export

    Changed, added, renamed and removed, as a changelog for the PR.

  4. Your names, your formats

    Color formats, mode selectors, prefixes and saved profiles.

Everything it does

Outputs

  • CSS, SCSS, Tailwind v4 and v3, JS, TS, JSON
  • W3C tokens and Style Dictionary
  • SwiftUI, Android XML, Compose, Flutter
  • A Markdown table for docs and AI tools

Control

  • Aliases kept or resolved, modes as selectors or media queries
  • Hex, RGB, HSL or OKLCH, rem with your base
  • Text, shadow and gradient styles as tokens
  • Saved profiles per platform

Round trip

  • Changes since the last export, renames included
  • Import W3C tokens back into variables
  • Works in Dev Mode

10 free uses, then one license or Lab Pro. See pricing →

More plugins