Figma Integration

The Axiomatic Color is designed to be the “Source of Truth” for your color palette. However, we know that design happens in tools like Figma. This guide explains how to bridge the gap.

The Workflow

1. Configure & Solve: Use the Theme Studio or edit color-config.json to define your system.
2. Export: Run the CLI to generate a W3C Design Tokens (DTCG) file.
3. Import: Load the tokens into Figma using a plugin like Tokens Studio.

Code First

The flow is unidirectional. You should treat your color-config.json as the source of truth. If you make changes in Figma, they will be lost the next time you import tokens. Always update the config first, then re-export.

Exporting Tokens

To generate a DTCG-compatible JSON file, use the export command:

pnpm exec axiomatic export --format dtcg --out tokens/

Best-effort alternative:

npx axiomatic export --format dtcg --out tokens/

This will output a directory containing your theme tokens split into logical sets:

• tokens/primitives.json: Global values like Key Colors.
• tokens/light.json: Semantic tokens for Light Mode.
• tokens/dark.json: Semantic tokens for Dark Mode.

This “Multi-File” structure is the standard for modern design token tools (like Tokens Studio), allowing you to treat Light and Dark modes as switchable themes.

Single File Export (Legacy)

If you prefer a single JSON file, you can specify a file path instead of a directory:

pnpm exec axiomatic export --format dtcg --out tokens.json

Best-effort alternative:

npx axiomatic export --format dtcg --out tokens.json

Importing into Figma

Using Tokens Studio (Recommended)

Tokens Studio for Figma is the industry standard for managing design tokens in Figma. It fully supports the W3C format.

1. Open the Tokens Studio plugin in Figma.
2. Go to the Tools tab (or Settings).
3. Click Load from file/folder or Import.
4. Select your tokens/ directory (or the individual JSON files).
5. The plugin will create token sets for primitives, light, and dark.

Best Practice:

• Enable the primitives set as “Source” (Reference only).
• Enable light OR dark as “Active” to switch themes.

Using Native Figma Variables

Native Figma Variables are powerful but have a stricter structure. Currently, the best way to import DTCG tokens into native variables is via a plugin that handles the conversion, or by using Tokens Studio’s “Create Variables” feature.

1. Import tokens into Tokens Studio (as above).
2. Click Create Variables in the plugin.
3. Map the light and dark sets to a Figma Mode (e.g., “Color Mode”).

Token Structure

The exported tokens follow this structure:

• Surfaces: light.surface.brand, dark.surface.brand
• Foregrounds: light.on-surface.brand.high, dark.on-surface.brand.high

This structure ensures that you can bind your Figma layers to semantic tokens (like “Brand Surface”) rather than raw hex values.