How to Extract Design Tokens from Any Website (Into Figma Variables)

Every well-built website is already a design system — its colors, gradients, and type scale are defined in CSS, waiting to be read. Design tokens are simply those decisions written down in a structured, reusable format: instead of a loose pile of hex codes, you get named values like brand.primary, surface.card, or text.muted that can travel between code and Figma without losing their meaning.

Extracting tokens from a live website is one of the fastest ways to learn how good teams structure their visual language — and the fastest way to bootstrap your own. Whether you are auditing a client site before a redesign, studying a competitor, or building a component library from a reference you admire, this guide walks through the full pipeline: scan a real site, export tokens.json, and import it into Figma Variables.

What counts as a design token (and what you can extract)

In practice, the tokens worth extracting from a website are the ones defined in its stylesheets:

• Color tokens — brand, neutral, background, accent, and text colors, ideally grouped by role rather than listed as raw values.
• Gradient tokens — angle, color stops, and opacity of each gradient layer, including layered gradients that stack multiple backgrounds.
• Typography tokens — font families, weights, and sizes actually in use on the page.

What you cannot reliably extract from computed CSS alone are spacing scales, border radii, and shadows used as intentional tokens — those are scattered across hundreds of rules without token names. An honest extraction focuses on color, gradient, and type: the decisions that define a site's visual identity. If you also need a general color walkthrough first, start with our guide on extracting color palettes from any website.

Step 1 — Install the extractor

You need a tool that reads computed CSS (the final styles the browser actually renders), not screenshot pixels. Pixel eyedroppers capture blended, anti-aliased shades; computed CSS gives you the true token values the site's own developers wrote. Install the ChromaPick Chrome extension — the free tier needs no account and includes 5 extractions per month.

Step 2 — Scan a real website

Open a site with a distinctive visual system — Linear's dark UI, a Stripe-style marketing page, or any client site you are auditing. Click the ChromaPick icon. In one pass the extension parses the page's stylesheets and groups what it finds:

• Brand colors — the high-signal hues (CTAs, links, accents).
• Neutrals & backgrounds — surfaces, borders, and text tones, with contrast ratios where measurable.
• Gradients — each layer's angle, stops, and opacity, so multi-layer hero gradients come out intact.
• Typography — families, weights, and sizes in use.

Review the groups before exporting. A common beginner mistake is importing every color on the page; a token set should be the decisions, not the noise. Keep the brand/neutral/background/accent roles and drop one-off shades.

Step 3 — Export tokens.json

Choose the tokens.json export. You get a structured file in the widely used design-token format — the same shape tools like Style Dictionary and the Tokens Studio Figma plugin understand. A typical export looks like this:

{
  "color": {
    "brand": {
      "primary": { "value": "#5E6AD2", "type": "color" },
      "accent": { "value": "#FF6A00", "type": "color" }
    },
    "surface": {
      "card": { "value": "#1A1B23", "type": "color" },
      "background": { "value": "#0F1015", "type": "color" }
    },
    "text": {
      "primary": { "value": "#F7F8F8", "type": "color" },
      "muted": { "value": "#8A8F98", "type": "color" }
    }
  },
  "gradient": {
    "hero": {
      "value": "linear-gradient(135deg, #5E6AD2 0%, #B37AF3 50%, #FF6A00 100%)",
      "type": "other"
    }
  },
  "typography": {
    "primary": {
      "value": { "fontFamily": "Inter", "fontWeight": "500" },
      "type": "typography"
    }
  }
}

Because the values come from computed CSS, the hex codes are exact — no sampling error, no compression artifacts. Save the file; you will import it in the next step.

Step 4 — Import into Figma Variables

You have two solid paths, depending on how you work in Figma:

Option A: Paste as Figma Variables (fastest)

ChromaPick can copy the palette as Figma-ready variables. In Figma, open Local variables, create a color collection, and paste — each token becomes an editable variable you can apply to fills, strokes, and text. If you are new to variables, our walkthrough on creating Figma color variables covers the setup click by click.

Option B: Import JSON via Tokens Studio (most faithful)

Install the Tokens Studio for Figma plugin, open it, and import your tokens.json file. Tokens Studio reads the token structure — including the grouping — and generates matching Figma variables, preserving names like color.brand.primary. This is the better path when you want the token names, not just the values, since naming is half the value of a token system.

Turning extracted tokens into your own system

Extracted tokens are a starting point, not a finished system. The productive workflow is: extract → rename tokens to your conventions → adjust a few values to make them yours → document usage. For a client redesign, this audit-extract-rebuild loop compresses days of manual sampling into an afternoon. And if you need the same tokens in code, the Tailwind export guide shows how to turn an extracted palette into a Tailwind config.

Free vs Pro for token workflows

The free tier (5 extractions per month, no account) covers trying the workflow and small one-off audits. Token-heavy work — unlimited extractions, full history, and code exports (CSS variables, Tailwind config objects) — is on Pro, a one-time $10 lifetime upgrade with a 7-day money-back guarantee. If you extract tokens weekly, Pro pays for itself the first time you skip an afternoon of DevTools digging.

Related guides

• How to Create Figma Color Variables — set up the variable collections your tokens will live in.
• How to Export Web Colors Straight into Figma — the palette-first version of this workflow.
• Convert Website Colors to Tailwind CSS — take the same extracted tokens into code.