Figma Integration

Sync design tokens from Tokencraft directly into Figma using the official plugin

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

4. Click Sync to Figma
5. 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 type	Figma variable type	Notes
color	COLOR	Supports #RGB, #RRGGBB, #RRGGBBAA, rgb(), rgba()
dimension, number, fontSize, fontWeight, lineHeight, letterSpacing, duration	FLOAT	Numeric strings are parsed (16px, 1.5rem, 200ms, …)
fontFamily, typography, shadow, gradient, border, transition, cubicBezier	STRING	Stored as stringified values
boolean (future)	BOOLEAN	Coerced 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

Issue	Fix
401 Unauthorized	Check 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 selected	At least one tokenset checkbox must be ticked before syncing
Composite tokens stored as JSON	Extend 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?

• Discord: tokencraft.dev/discord
• GitHub: github.com/tokencraft

API Reference

Learn the API

JavaScript Integration

Build custom workflows around the plugin