Export tokens.json

The tokens.json export gives you every design token Coreframe has generated — colors, spacing, radius, border widths, and opacity values — in a single structured JSON file. The format is compatible with popular toolchains like Style Dictionary and Token Studio, so it slots straight into an automated pipeline without any manual conversion. Each token is stored as a raw value, and alias tokens carry a $value reference so downstream tools can resolve the full chain.

Open the Developer tab

Open Coreframe in Figma and click the Developer tab at the top of the plugin panel.

Click Export tokens.json

Find the Export tokens.json card and click the Export tokens.json button. Coreframe will read your local Figma variables and build the file.

Save the file to your project

When the download prompt appears, save tokens.json to your project — for example, into a tokens/ or design/ directory at your repo root.

File structure

Coreframe organises tokens by collection at the top level, then by name path within each collection. Color tokens are stored as hex strings. Spacing, radius, border, and opacity tokens are stored as raw numbers. Alias tokens — where one token references another — use a $type: "alias" object with a $value reference path. The exported file also includes a name, version, and generatedAt timestamp so you always know which Coreframe session produced it.

{
  "name": "Coreframe Tokens",
  "version": "1.0.0",
  "generatedAt": "2025-01-15T10:30:00.000Z",
  "tokens": {
    "color": {
      "palette": {
        "primary": {
          "50":  "#f0fdf4",
          "100": "#dcfce7",
          "500": "#179b49",
          "600": "#127a3a",
          "900": "#14532d"
        },
        "neutral": {
          "50":  "#fafafa",
          "100": "#f5f5f5",
          "500": "#737373",
          "900": "#171717"
        }
      },
      "semantic": {
        "brand": {
          "$type": "alias",
          "$value": "{color.palette.primary.500}"
        }
      }
    },
    "spacing": {
      "1": 4,
      "2": 8,
      "3": 12,
      "4": 16
    },
    "radius": {
      "sm": 4,
      "md": 8,
      "lg": 12,
      "xl": 16
    },
    "border": {
      "default": 1,
      "thick":   2
    },
    "opacity": {
      "subtle":   0.08,
      "disabled": 0.40
    }
  }
}

Using with Style Dictionary

Style Dictionary can consume tokens.json directly and transform it into CSS custom properties, SCSS variables, JavaScript ES modules, and more. Point Style Dictionary’s source at your exported file, then define a platform in your config for each output format you need.

style-dictionary.config.js

import StyleDictionary from 'style-dictionary';

const sd = new StyleDictionary({
  source: ['tokens/tokens.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      prefix: 'cf',
      buildPath: 'src/styles/',
      files: [
        {
          destination: 'tokens.css',
          format: 'css/variables',
        },
      ],
    },
    js: {
      transformGroup: 'js',
      buildPath: 'src/tokens/',
      files: [
        {
          destination: 'tokens.js',
          format: 'javascript/es6',
        },
      ],
    },
  },
});

await sd.buildAllPlatforms();

Run your Style Dictionary build step whenever you re-export from Coreframe to regenerate all downstream files automatically.

Get Started

Design Tokens

Components

Developer Exports

Pro & Licensing

Export tokens.json — Design Tokens as W3C-Compatible JSON