Getting started
From an empty Figma file to your first applied token in about five minutes.
1. Install the plugin
The plugin is currently distributed as a development build.
npm installnpm run buildThen in Figma:
- Plugins → Development → Import plugin from manifest…
- Select
dist/manifest.json.
The plugin runs in Figma Design files only — not FigJam or Slides.
On launch you get a toast: “Design Token Manager ready – N token(s) loaded”. Tokens are stored per document, so a fresh file starts empty.
2. Create a token set
Tokens always live inside a token set — a slash-separated path such as
global/color or brand/acme/color. On an empty file the Tokens tab shows a
single create token set button.
Enter a path:
global/colorPaths are stored lowercase. A set can be renamed, duplicated, or deleted later via right-click in the tree.
See Token sets for how to structure them.
3. Create your first token
Select the set in the tree, then press +.
| Field | Enter |
|---|---|
| Token set | global/color (pre-filled from your selection) |
| Type | Color |
| Name | primary.500 |
| Value | #3b82f6 |
| Description | optional |
The name is a dot path. Combined with the set it forms the full token path shown live under the name field.
Press Create token. The token appears as a tile with a colour swatch.
4. Apply it to a layer
- Select one or more layers on the canvas.
- Right-click the token tile → Apply token.
- Pick a target — for a colour token: Fill, Stroke, Drop shadow colour, …
Figma confirms with a toast. If some layers could not take the value (for example a layer without strokes), you get “Token applied to 3 of 5 elements.” rather than a silent failure.
The binding is stored on the layer, so the Inspect tab can show you which layers use which token later.
5. Get the tokens out
Footer → Import / Export → Export:
- Single JSON → one
design-tokens.jsonfile - Folder export → a
design-tokens.zipwith one JSON file per token set
Both are valid DTCG 2025.10 documents. See Import & export.
Where to go next
| If you want to… | Read |
|---|---|
| Understand sets, themes, references | Core concepts |
| Support multiple brands or light/dark | Themes |
| Know exactly what a token type accepts | Token types |
| Connect a GitHub repository | Sync |