Website to Figma variables: import a site’s colors, spacing and fonts

Figma can import design tokens as variables, straight from a JSON file, with no plugin. So the job of getting a live website into Figma comes down to writing a tokens.json that Figma accepts: the site’s real colors, spacing, radii and fonts in the Design Tokens Community Group (DTCG) format.

What Figma’s import accepts

From Figma’s help article Modes for variables, checked on 13 November 2026:

Colors become Color variables. The supported color spaces are sRGB and HSL, written as an object with colorSpace, components, alpha and an optional hex.
Dimensions become Number variables, but only in px. A token in rem is not imported.
Font families become String variables, as long as the value is one font name. A fallback array like ["Inter", "sans-serif"] is not supported.
Numbers and durations (in seconds) become Number variables, and Figma also accepts a plain string type.
Nested names turn into folders: color.primary becomes color/primary.
Importing is available on Professional, Education, Organization, Government and Enterprise plans, in Figma Design.

Composite tokens such as typography and shadow are not in that list. Figma variables hold single values, so a type style or a shadow stays a style, not a variable.

How to import a site into Figma

Open the website, click the Stylasso icon, pick Figma tokens in the export bar and download tokens.json.
In Figma, open the Variables view and create a new collection.
Drag tokens.json into the Variables view. Figma creates one mode for the file.
To update the same collection later, for example after the site changes, right-click the mode and choose Import mode. Variables with matching names and types are updated.

A real tokens.json

This is part of the file Stylasso writes for Northwind Roasters, a fictional coffee shop we built for demos: one token of each kind, unedited. The full file is 509 lines.

{
  "color": {
    "primary": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.7608,
          0.2549,
          0.0471
        ],
        "alpha": 1,
        "hex": "#c2410c"
      },
      "$extensions": {
        "com.stylasso": {
          "oklch": "oklch(55.3% 0.174 38.4)"
        }
      },
      "$description": "primary"
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": "Fraunces",
      "$extensions": {
        "com.stylasso": {
          "stack": "Fraunces, ui-sans-serif, system-ui, sans-serif",
          "source": "Google Fonts"
        }
      }
    }
  },
  "spacing": {
    "16": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "unit": "px"
      }
    }
  },
  "radius": {
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    }
  },
  "typography": {
    "base": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Hanken Grotesk",
        "fontSize": {
          "value": 17,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        },
        "lineHeight": 1.6
      }
    }
  }
}

A few details are there for Figma specifically. Colors are sRGB objects with the hex alongside. Every dimension is in px. Each font family is one name, and the CSS fallback stack goes in $extensions, which Figma lets files carry. Stylasso’s own extras, such as the oklch value of each color, also sit in $extensions.

What comes through, token by token

Northwind’s file, against Figma’s supported types:

	Token type	In Northwind’s file	Figma import
Color	`color`, sRGB or HSL object	9 colors (primary, accent, background, surface, text, muted, border, amber-400, orange-600)	Yes, as Color variables
Font family	`fontFamily`, one name as a string	3 (heading, body, mono)	Yes, as String variables
Spacing	`dimension` in px	12 steps, 4 to 72px	Yes, as Number variables
Corner radius	`dimension` in px	5 (md 6px, lg 10px, 2xl 16px, 18px, full 9999px)	Yes, as Number variables
Type styles	`typography` (composite)	5 (6xl 64px to sm 14px)	Not in Figma’s supported list
Shadows	`shadow` (composite)	3 (xs, sm, 2xl)	Not in Figma’s supported list

Going by Figma’s rules, that is 29 variables from this site: 9 colors, 3 font names and 17 spacing and radius numbers. The 5 type styles and 3 shadows stay in the file for tools that read composite tokens, such as Tokens Studio or Style Dictionary; in Figma you would set them up as text and effect styles, using the sizes, weights, line heights and letter spacing listed in the file.

Doing it by hand, for free

The Figma tokens export is part of Stylasso Pro. You can write a small file yourself instead:

In DevTools, inspect the main button, the page background, a card and a paragraph, and note their colors from the Computed panel.
Convert each hex to sRGB components by dividing each channel by 255: #c2410c is 194, 65, 12, so 0.7608, 0.2549, 0.0471.
Note the font family names and the spacing you see repeated in padding and gaps, in px.
Write them out in the same shape and import the file as above.

{
  "color": {
    "primary": {
      "$type": "color",
      "$value": { "colorSpace": "srgb", "components": [0.7608, 0.2549, 0.0471], "alpha": 1, "hex": "#c2410c" }
    }
  },
  "spacing": {
    "16": { "$type": "dimension", "$value": { "value": 16, "unit": "px" } }
  },
  "font": {
    "body": { "$type": "fontFamily", "$value": "Hanken Grotesk" }
  }
}

The free Stylasso exports also help here: the CSS variables export lists every color with its role and every spacing step, so you can copy values from it instead of from DevTools.

Questions

Does this need a Figma plugin?

No. Figma imports DTCG JSON in the Variables view itself, on the plans listed above. Plugins such as Tokens Studio are still useful if you want type styles and shadows as tokens too.

Can I import a light and a dark version?

Figma creates one mode per imported file, so two files (light and dark) give you a collection with two modes. A variable is only created when its token is in every file with the same type, so both files need the same names.

Why px and not rem?

Figma’s import only accepts px for dimensions. Stylasso writes px for that reason; the CSS and Tailwind exports keep rem where the site uses it.

Can I use another site’s style in my product?

Colors, sizes and spacing are facts about a page. Logos, images, text and commercial font files belong to their owners: Stylasso never exports page text or images, and when a site uses a paid font it names the closest free Google font.