Skip to the plugin
by UXFront
DocsChangelogLog inGitHub 91

Figma Plugin

Export Styleframe Design Tokens to Figma and Back

Sync your design tokens between Figma and code as W3C DTCG JSON, with a mode for each theme, completely free.
Install Figma pluginRead plugin documentation

  1. 01 Plugin
  2. 02 Sync
  3. 03 Import
  4. 04 Export
  5. 05 CLI
Scroll to explore

01Plugin

The Figma plugin

Install Figma plugin

02Sync

A First-Class Token Synchronization Layer

Your code is your source of truth. Export it to the Design Tokens Community Group format, which Figma, Style Dictionary, Tokens Studio and other tools read.

  • Type-Safe TokensFull TypeScript support, with autocomplete, refactoring and compile-time errors that catch token mismatches before production.
  • Multi-Mode by DesignLight, dark and custom themes are DTCG modifiers, so modes stay explicit.
  • True Bidirectional SyncImport DTCG tokens into Figma or export Figma Variables back to JSON, with structure and aliases intact.
  • Free ForeverNo subscription. No seat limits. The CLI and Figma plugin are free and open source. Your design system, your rules.

03Import

Import Design Tokens into Figma

Drop a Styleframe DTCG JSON file into the plugin, preview its variables and modes, and create a Figma variable collection with one click.

  • Auto-Create CollectionsEach collection gets a mode for Light, Dark and every custom theme in your tokens.
  • Type ValidationColor, dimension, number and string types are checked before import, and invalid tokens are flagged, not dropped.
Styleframe - Import Design Tokens into Figma

04Export

Export Figma Variables to Styleframe

Select a Figma variable collection and export it to the Styleframe W3C DTCG format.

  • One-Click ExportThe plugin converts types, maps aliases and organizes modes for you.
  • Clipboard ReadyCopy the JSON to your clipboard, or save it as a file for version control.
  • Reference SyntaxVariable aliases become DTCG references ({token.path}).
Learn about DTCG Format
Styleframe - Export Design Tokens from Figma

05Developer Workflow

Automate with the CLI

Export design tokens directly from your Styleframe config. Run in CI/CD pipelines to keep Figma tokens in sync with every code change.

  • Git-Integrated WorkflowExport tokens on every commit, and review token updates in pull requests.
  • CI/CD ReadyAdd the export command to your build pipeline.
CLI Documentation
Terminal
# Export Styleframe variables to Figma-compatible format
npx styleframe figma export \
        --config styleframe.config.ts \
        --output tokens/ \
        --collection "Design Tokens"

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

Figma Plugin

Sync Design Tokens to Figma in Minutes

Install the Figma plugin, export your Styleframe config, and sync your design tokens. No subscriptions.

Install Figma pluginRead plugin documentation