Skip to main content

​
Figma Integration

Tokencraft ships with a Figma plugin so you can materialise your tokens as native Figma variables in a couple of clicks.

​
Overview

Tokencraft ships a 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 plugin currently syncs Tokencraft → Figma. Reverse sync (Figma → Tokencraft) is on the roadmap.

​
Requirements

  • Figma desktop app (plugins cannot reach localhost from the web app)
  • Tokencraft API key (Settings → API in the dashboard)
  • Tokencraft API reachable at:
    • http://localhost:3000 for local development (default)
    • https://app.tokencraft.dev for production

​
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:
  • http://localhost:3000 and http://127.0.0.1:3000 (local API)
  • 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 the configured URL (defaults to http://localhost:3000)
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

  • Reverse sync (Figma → Tokencraft) using API write endpoints
  • Persist “last synced” metadata in Tokencraft
  • Publish to the public Figma Community

​
Need Help?

API Reference

Learn the API

JavaScript Integration

Build custom workflows around the plugin