Creating and editing tokens
Everything that happens in the token dialog.
Creating a token
Select a token set in the tree, then press + in the panel header. The dialog opens with that set pre-filled.
| Field | Notes |
|---|---|
| Token set | Choosing a set is only possible while creating. In edit mode the set is shown read-only |
| Type | Grouped into Basic and Composite. Determines everything below |
| Name | A dot path. A live “Full path: …” preview shows the resulting token path |
| Value | A field specific to the chosen type — see token types |
| Description | Optional, exported as $description |
Name rules
| Rule | |
|---|---|
| Allowed characters | a–z, A–Z, 0–9, ., -, _ |
| Not allowed | Spaces, /, .., a leading or trailing . |
| Uniqueness | The full path must be unique across the document |
Use . to nest: color.primary.500 produces a three-level group in the exported
JSON. Use / in the token set path, not in the name.
The value field is type-specific
Each type renders its own input, so you are never typing raw JSON:
| Type | Field |
|---|---|
| Color | Swatch, picker with four editable colour spaces, eyedropper, text input |
| Dimension / Duration | Number input with a unit selector |
| Number | Plain number input |
| Font weight | Number input plus a preset dropdown (100 … 950) |
| Stroke style | Keyword dropdown |
| Border | Three sub-fields: colour, width, style |
| Transition | Three sub-fields: duration, delay, timing function |
| Shadow | Multi-layer builder — add and remove shadow layers |
| Typography | Five DTCG slots plus the four Figma extensions |
| Cubic Bézier | Four-number input, accepts cubic-bezier(…) syntax |
| Gradient | No dedicated field — see gradient |
Every composite slot accepts either a literal value or a {reference}, toggled
by a link icon on the field.
Editing a token
Right-click a tile → Edit. The type and value can be changed; the token set cannot.
Renaming updates references
If other tokens reference the one you rename, those references are rewritten automatically and the dialog reports how many were updated. You do not have to hunt them down.
This does not update Figma layers. Bindings on layers store the token name, so after a rename you should run Sync to selection to re-establish them.
Deleting a token
Right-click a tile → Delete, then confirm.
Deleting does not check references
Other tokens referencing the deleted one are not rewritten or warned about. They become broken references, visible as “Reference cannot be resolved” on their tiles. Search for the token name before deleting it.
Reading a token tile
| Element | Meaning |
|---|---|
| Swatch | Colour preview — for color and shadow tokens (shadow uses its first layer’s colour) |
| Name | The token’s base name |
| Value line | The formatted resolved value, or a reference badge if the value is an alias |
| Broken-link icon + red text | The reference cannot be resolved under the active themes |
| Outline | The token matches a binding on your current Figma selection |
| Right-hand label | The token’s type |
Searching
The search box in the panel header filters tokens live across the whole document, not just the selected set. When nothing matches you get “No tokens match this filter.”