Figma Plugin

Overview

The Styleframe Figma Plugin enables bidirectional synchronization of design tokens between your codebase and Figma. Export your Styleframe variables to Figma, or import Figma variables back into your codebase—all using the industry-standard W3C DTCG (Design Tokens Community Group) format.

Key features:

• Code-first architecture: Your Styleframe config is the single source of truth
• Bidirectional sync: Import tokens into Figma or export Figma variables to code
• Multi-mode support: Light, dark, and custom themes are preserved as Figma modes
• Type-safe: Colors, dimensions, strings, and booleans are mapped correctly
• Free and open source: No subscriptions or seat limits

Prerequisites

Before you begin, ensure you have:

• A Styleframe project with design tokens defined
• A Figma account (free or paid)
• Node.js 18+ installed (for CLI commands)

Installing the Figma Plugin

Using the Figma Plugin

The plugin has two tabs: Import for bringing tokens into Figma, and Export for extracting Figma variables.

Importing Tokens into Figma

Import your Styleframe design tokens into Figma as native Figma Variables:

1. Export your tokens using the CLI (see CLI Export below)
2. Open the plugin in Figma and select the Import tab
3. Drag and drop your tokens.json file into the drop zone (or click to browse)
4. Preview the variables that will be created
5. Click Import to create the Figma variable collection

The plugin automatically:

• Creates a new variable collection with your tokens
• Sets up modes for each theme (Light, Dark, etc.)
• Maps token types to Figma variable types (Color, Number, String, Boolean)
• Preserves token aliases as Figma variable references

Exporting Tokens from Figma

Export Figma Variables to the DTCG format for use in your codebase:

1. Open the plugin and select the Export tab
2. Select a collection from the dropdown menu
3. Click Export to generate the DTCG JSON
4. Copy the JSON to your clipboard or Download as a file
5. Import into Styleframe using the CLI (see CLI Import below)

The export preserves:

• All variable values across modes
• Variable aliases as DTCG references ({token.path})
• Token types and descriptions
• Hierarchical token structure

Using the CLI

The Styleframe CLI provides commands for automating token synchronization in your development workflow.

Exporting Tokens (Code → Figma)

Export your Styleframe variables to Figma-compatible per-mode files:

styleframe figma export [options]

Example usage:

# Export to current directory
styleframe figma export

# Export to a dedicated folder
styleframe figma export -o tokens/

# Custom config
styleframe figma export -c src/styleframe.config.ts -o tokens/

Sample output:

Loading configuration from "styleframe.config.ts"...
Building DTCG document...
Flattening to Figma-compatible format...
Wrote "tokens/Default.tokens.json" (450 tokens)
Wrote "tokens/Dark.tokens.json" (450 tokens)
Exported 450 tokens as 2 Figma-compatible mode file(s) to "tokens"

Importing Tokens (Figma → Code)

Generate Styleframe TypeScript code from Figma-compatible per-mode files:

styleframe figma import --input <path> [options]

Example usage:

# Import from a directory of per-mode files
styleframe figma import -i tokens/

# Import a single file
styleframe figma import -i Default.tokens.json

# Custom output path
styleframe figma import -i tokens/ -o src/theme/tokens.ts

# With rem units
styleframe figma import -i tokens/ --rem

# Without composables (plain variables)
styleframe figma import -i tokens/ --composables false

Generated code example:

import { styleframe } from "styleframe";
import { useColorDesignTokens, useSpacingDesignTokens } from "@styleframe/theme";

const s = styleframe();
const { variable, ref, theme } = s;

// Color variables
const { colorPrimary, colorSecondary } = useColorDesignTokens(s, {
  primary: "#006cff",
  secondary: "#6c757d",
});

// Spacing variables
const { spacingSm, spacingMd, spacingLg } = useSpacingDesignTokens(s, {
  sm: "8px",
  md: "16px",
  lg: "24px",
});

theme("dark", (ctx) => {
  ctx.variable(colorPrimary, "#60a5fa");
  ctx.variable(colorSecondary, "#9ca3af");
});

export default s;

Recommended Workflow

Here's a typical workflow for syncing tokens between Styleframe and Figma:

1. Define tokens in Styleframe

// styleframe.config.ts
import { styleframe } from 'styleframe';

const s = styleframe();
const { variable, theme, ref } = s;

const colorPrimary = variable('color.primary', '#006cff');
const colorBackground = variable('color.background', '#ffffff');
const spacingMd = variable('spacing.md', '16px');

theme('dark', (ctx) => {
  ctx.variable(colorPrimary, '#60a5fa');
  ctx.variable(colorBackground, '#1a1a1a');
});

export default s;

2. Export to Figma-compatible format

styleframe figma export -o tokens/

3. Import into Figma

1. Open the Styleframe Sync plugin in Figma
2. Drag Default.tokens.json (and optionally Dark.tokens.json) into the Import tab
3. Click Import

4. Design in Figma

Use your variables in Figma as needed for components, styles, and layouts.

DTCG Format

Styleframe uses the W3C Design Tokens Community Group (DTCG) format for token interchange. The CLI provides two export modes:

• styleframe figma export — Figma-compatible DTCG. Uses only number, color, and string types with flat values. Writes one complete file per mode. Ready for direct Figma import.
• styleframe dtcg export — Spec-conformant DTCG. Uses the full type system (dimension, cubicBezier, fontFamily, etc.) with structured values plus a Resolver Module document for multi-mode configs. For Style Dictionary, Tokens Studio, and other DTCG-compatible tools.

Figma-compatible format (produced by styleframe figma export):

{
  "$extensions": {
    "com.figma.modeName": "Default"
  },
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [0, 0.478, 0.6],
        "alpha": 1,
        "hex": "#007a99"
      }
    },
    "background": {
      "$value": {
        "colorSpace": "srgb",
        "components": [0.973, 0.98, 0.988],
        "alpha": 1,
        "hex": "#f8fafe"
      }
    }
  },
  "spacing": {
    "$type": "number",
    "md": {
      "$value": 16
    }
  }
}

Best Practices

• Keep code as the source of truth: Define tokens in Styleframe first, then sync to Figma
• Use semantic token names: color.primary instead of color.blue
• Organize with groups: Use dot notation (color.background.primary) for hierarchy
• Export tokens in CI/CD: Automate styleframe dtcg export -o tokens/ on every commit to generate fresh token files

FAQ