Skip to main content

​
Figma Integration

Tokencraft integrates with Figma through plugins that allow you to sync design tokens between Tokencraft and Figma variables. A community plugin is available on the Figma Community that provides bidirectional sync between Figma variables and Tokencraft:
  • Import: Sync Figma variables → Tokencraft tokens
  • Export: Sync Tokencraft tokens → Figma variables
  • Full support for all variable types and modes
Get the plugin: Install from Figma Community

​
Official Plugin

Tokencraft also ships with an official Figma plugin that lets you:
  • Authenticate with a Tokencraft API key (PRO/TEAM workspaces)
  • Discover all workspaces tied to the key
  • Pick one or multiple tokensets to sync in a single run
  • Create/update Figma variable collections with full mode support (Light, Dark, etc.)
  • Map Tokencraft token types (color, dimension, fontSize, …) to the corresponding Figma variable types
The official plugin currently syncs Tokencraft → Figma. For bidirectional sync, use the community plugin.

​
Requirements

  • Figma desktop app
  • Tokencraft API key (Settings → API in the dashboard)
  • Tokencraft API reachable at https://app.tokencraft.dev

​
Installation

  1. Download the latest Tokencraft Figma plugin bundle (zip) from the dashboard or the internal release page
  2. Unzip the archive to a convenient location
  3. In Figma Desktop, go to Plugins → Development → Import plugin from manifest…
  4. Select the manifest.json contained in the extracted folder
  5. The plugin appears under Plugins → Development → Tokencraft → Figma Variables

​
Syncing tokens into Figma

​
1. Launch and authenticate

  1. Open your Figma file and run Tokencraft → Figma Variables
  2. Paste your Tokencraft API key
    • The key is stored in Figma client storage per file, so you only need to enter it once

​
2. Load workspaces

  1. Click Load workspaces
  2. Choose the workspace you want to sync (all workspaces linked to the key are listed)

​
3. Select tokensets and modes

  1. Tick one or more tokensets you’d like to export
  2. Modes defined in Tokencraft (light, dark, …) are mapped to Figma variable modes automatically

​
4. Sync

  1. Click Sync to Figma
  2. The plugin creates or updates one variable collection per tokenset (Workspace / Tokenset) and populates variables + modes

​
Result

  • Variables appear in Assets → Variables grouped by Workspace / Tokenset
  • Modes mirror your Tokencraft mode names (Light, Dark, …)
  • Aliases are resolved automatically when possible; missing dependencies are logged in the UI

​
Token mapping reference

Tokencraft typeFigma variable typeNotes
colorCOLORSupports #RGB, #RRGGBB, #RRGGBBAA, rgb(), rgba()
dimension, number, fontSize, fontWeight, lineHeight, letterSpacing, durationFLOATNumeric strings are parsed (16px, 1.5rem, 200ms, …)
fontFamily, typography, shadow, gradient, border, transition, cubicBezierSTRINGStored as stringified values
boolean (future)BOOLEANCoerced to true / false
Tokens that alias other tokens are resolved before being pushed to Figma so variables receive the computed value.

​
Network access

manifest.json allows the plugin to call:
  • https://app.tokencraft.dev (production API)
Adjust the list if you host the API elsewhere.

​
Troubleshooting

IssueFix
401 UnauthorizedCheck the API key and that the workspace is PRO/TEAM
Failed to load workspaces (404)Ensure the API is reachable at https://app.tokencraft.dev
No tokensets selectedAt least one tokenset checkbox must be ticked before syncing
Composite tokens stored as JSONExtend setVariableValueForMode in code.ts if you want to break complex types down further
Logs are printed in the plugin UI to help you diagnose issues quickly.

​
Roadmap

  • Persist “last synced” metadata in Tokencraft
  • Enhanced bidirectional sync features
Bidirectional sync is now available through the community plugin on Figma Community.

API Reference

Learn the API

JavaScript Integration

Build custom workflows around the plugin