> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getcoreframe.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

> Export all your Coreframe design tokens as a tokens.json file compatible with Style Dictionary, Token Studio, and other design token toolchains.

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.

## Export tokens.json

<Steps>
  <Step title="Open the Developer tab">
    Open Coreframe in Figma and click the **Developer** tab at the top of the plugin panel.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>
</Steps>

## 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.

```json theme={null}
{
  "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.

```js style-dictionary.config.js theme={null}
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.