Xtractlytractly

Free · No sign-up · DTCG · Figma · CSS

Design tokens,in every format.

Paste tokens in whatever format you have — W3C design tokens, Tokens Studio or Figma-variables JSON, CSS variables, a Tailwind config — and copy them out in the one you need, aliases resolved.

your tokens · token json · 6 tokens

/* Your brand */
:root {
  --brand: #5e6ad2;
  --background: #ffffff;
  --foreground: #0f1011;
  --link: #5e6ad2;
  --radius-md: 10px;
  --font-sans: Inter, sans-serif;
}
Want these from a live site? The Xtractly extension reads them off any page →
Start from a real site:

Runs in your browser — nothing you paste is uploaded or stored.

live preview · your tokens

Your brand · typeface

Inter

sans-serif as fallback

Aa
Styles
0 styles
Colours
4 colours

type scale

No sizes yet.

! @ ? / . , $ % & * ( )1 2 3 4 5 6 7 8 9 0

Aa Bb Cc Dd Ee Ff Gg

Primary colour

#5E6AD2

background#FFFFFF
foreground#0F1011

How to convert design tokens, in three steps.

01

Paste tokens in any format

DTCG JSON ($value / $type), Tokens Studio JSON (value / type), Figma variables JSON, CSS custom properties, a Tailwind config, or a list of colours. The format is detected for you.

02

Choose the output

CSS variables for code, W3C DTCG for Style Dictionary and Penpot, Figma variables for Figma's importer, or a Tailwind v4 @theme. Aliases like {color.brand} are resolved to values.

03

Copy or download

Copy the result or download it as a file with the right name (.tokens.json, .figma-variables.json, .css). Token types other than colour, size, radius and font are listed as skipped.

Questions

What is the W3C design tokens (DTCG) format?

The Design Tokens Community Group's JSON format: tokens are objects with a $value and a $type, nested in groups, and can alias each other with {group.token}. Style Dictionary, Tokens Studio, Penpot and Figma's variables importer read it. The output here follows the 2025.10 stable version.

How do I get Figma variables into CSS?

Export them from Figma's Variables panel, which writes W3C design-token JSON (or use a variables plugin), paste the JSON here and choose CSS variables or Tailwind. Going the other way, choose Figma variables and import the file in the Variables panel.

Are aliases resolved?

Yes. A token whose value is {color.brand} gets the brand colour's value in the output, up to six levels deep.

Which token types are converted?

Colours, dimensions used as radius, spacing or font size, and font families. Composite tokens (typography, shadow, border) aren't converted yet and are counted under the output.

More free tools, same idea.

Each one runs in your browser and works on tokens you already have.

Guide: convert design tokens between formatsDesign system MCPColor extractorBrand palettes & fontsAll free tools

Converting tokens assumes you have some.

Read it off any live site.

Xtractly's extension pulls a complete token set — colours by role, the type scale, radii — off any live site, and exports it to every format on this page.

Add to Chrome, free