figma-export.json: Import Any Website's Design System Into Figma

The gap between a live website and a Figma design file is one of the most frustrating in the design-to-development workflow. A site is visually defined — every color, shadow, and spacing value is right there in the browser — but getting that visual language into Figma means hours of manual color picking, spacing auditing, and style creation.

figma-export.json closes that gap. DesignDNA generates it automatically alongside every scan, and a handful of excellent Figma plugins can import it directly.

What figma-export.json Contains

figma-export.json is structured to map directly to Figma's variable and style system:

{
  "variables": {
    "colors": {
      "primary": "#6D3FFF",
      "primary-foreground": "#FFFFFF",
      "secondary": "#F4F4F5",
      "background": "#09090B",
      "foreground": "#FAFAFA",
      "muted": "#27272A",
      "muted-foreground": "#A1A1AA",
      "border": "#3F3F46",
      "destructive": "#EF4444",
      "coral": "#FF6B4A"
    },
    "spacing": {
      "1": 4,
      "2": 8,
      "3": 12,
      "4": 16,
      "6": 24,
      "8": 32,
      "12": 48,
      "16": 64
    },
    "radius": {
      "sm": 4,
      "md": 8,
      "lg": 16,
      "xl": 24,
      "pill": 9999
    }
  },
  "textStyles": [
    {
      "name": "Display/Large",
      "fontFamily": "Inter",
      "fontSize": 64,
      "fontWeight": 700,
      "lineHeight": 1.05,
      "letterSpacing": -0.03
    },
    {
      "name": "Display/Medium",
      "fontFamily": "Inter",
      "fontSize": 48,
      "fontWeight": 600,
      "lineHeight": 1.08,
      "letterSpacing": -0.025
    },
    {
      "name": "Body/Large",
      "fontFamily": "Inter",
      "fontSize": 18,
      "fontWeight": 400,
      "lineHeight": 1.65,
      "letterSpacing": 0
    },
    {
      "name": "Body/Small",
      "fontFamily": "Inter",
      "fontSize": 14,
      "fontWeight": 400,
      "lineHeight": 1.5,
      "letterSpacing": 0
    },
    {
      "name": "Label/Uppercase",
      "fontFamily": "Inter",
      "fontSize": 12,
      "fontWeight": 500,
      "lineHeight": 1.2,
      "letterSpacing": 0.22
    }
  ],
  "effectStyles": [
    {
      "name": "Shadow/Small",
      "effects": [
        { "type": "drop-shadow", "color": "rgba(0,0,0,0.05)", "offsetX": 0, "offsetY": 1, "blur": 2, "spread": 0 }
      ]
    },
    {
      "name": "Shadow/Medium",
      "effects": [
        { "type": "drop-shadow", "color": "rgba(0,0,0,0.08)", "offsetX": 0, "offsetY": 4, "blur": 12, "spread": 0 }
      ]
    },
    {
      "name": "Shadow/Large",
      "effects": [
        { "type": "drop-shadow", "color": "rgba(0,0,0,0.12)", "offsetX": 0, "offsetY": 8, "blur": 32, "spread": 0 }
      ]
    }
  ]
}

This structure is understood by the major Figma variable import plugins. Import it, and Figma creates a variable collection with every color token, text styles for every typography size, and effect styles for every shadow — automatically.

How to Import figma-export.json Into Figma

Figma doesn't have a native JSON import for variables, but three excellent community plugins handle it:

Option 1: Tokenhaus

Tokenhaus — A modern variable import/export plugin that preserves variable links and aliases.

Install: Figma Community — Tokenhaus

Open Tokenhaus in your Figma file
Select "Import"
Paste figma-export.json content
Tokenhaus creates a variable collection with proper type mappings (COLOR, FLOAT)
Variable aliases and references are preserved across collections

Best for: Teams that use Figma Variables natively and want to maintain alias relationships between token tiers (primitives → semantic → component).

Option 2: Variables Pro

Variables Pro — A full-featured variables management plugin with import, export, and swap capabilities.

Install: Figma Community — Variables Pro

Open Variables Pro in your Figma file
Select "Import Variables"
Upload figma-export.json
Review the preview of variable collections to be created
Confirm import

Best for: Teams who need to import variables and also frequently swap between design modes or re-export variables back to JSON.

Option 3: Token Forge

Token Forge — Imports JSON and creates Figma variables with a builder interface.

Open Token Forge
Import → paste figma-export.json
Variables collection created with type-correct mappings

Option 4: Export/Import Variables

Export/Import Variables — A straightforward utility to move variables in and out of Figma.

Open Export/Import Variables in your Figma file
Select the import option
Upload figma-export.json
Confirm variable creation

Option 5: Variables Import

Variables Import — Another reliable utility for importing JSON variable definitions natively.

Open Variables Import
Upload figma-export.json
The plugin will automatically map the JSON structure to Figma variables

Option 6: Token Importer

Token Importer — Designed specifically for taking structured token JSON and translating it to Figma's native variables.

Open Token Importer
Paste or upload your figma-export.json data
Apply to document

What Gets Created in Figma

After importing figma-export.json, your Figma file gains:

Variable collections:

Color variables (COLOR type) — one per extracted color token
Spacing variables (FLOAT type) — the entire spacing scale
Radius variables (FLOAT type) — all border radius values

Local styles:

Text styles — one per typography role (Display/Large, Body/Default, Label/Uppercase, etc.)
Effect styles — shadows mapped to Figma drop-shadow effects
Gradient paint styles — any gradients detected on the scanned site

After import, designers can:

Apply color variables to any layer fill, stroke, or effect
Use text styles for consistent typography across components
Share the variable library across files via Figma's library publish feature
Build components that reference variables — so updating one token propagates everywhere

figma-export.json vs tokens.json in Figma

Both files can be imported into Figma, but they serve different workflows:

	figma-export.json	tokens.json (via Tokens Studio)
Figma construct	Native Figma Variables	Tokens Studio token sets
Plugin needed	Tokenhaus / Variables Pro / Token Forge / etc.	Tokens Studio ONLY
Alias support	Yes	Yes
Code sync	Export to JSON only	Sync to GitHub, Style Dictionary
Best for	Design-first teams in Figma	Design-to-code pipeline teams

Use figma-export.json when your priority is getting variables into Figma fast. Use tokens.json via Tokens Studio when you want a bidirectional sync between Figma and your codebase.

Reverse-Engineering Any Website Into Figma

figma-export.json is most powerful as a reverse engineering tool. You see a website with a design language you want to study, rebuild, or take inspiration from. Instead of hours of manual color picking and spacing audit work, you:

Open DesignDNA and scan the site
Download figma-export.json
Import it into Figma via any of the plugins above
Start building components with the extracted design system

What used to take a senior designer a full day of audit work takes under two minutes.

Generate your figma-export.json now →

Back to Blog