Sync to Figma
Tostada is the source of truth for your design system, but designers live in Figma. Sync to Figma sends your token map into a Figma file as real Variables — primitives, semantic tokens, your component theme, and dark mode — so designers prototype on the actual system instead of retyping hex codes. References are preserved as aliases, so editing a primitive in Figma cascades the same way it does in Tostada.
This works on any Figma plan: the import is done by the first-party Tostada Variables plugin (the Figma plugin API can write variables without an Enterprise seat).
Beta. Sync to Figma is behind a feature flag while we validate it. The direct REST push, Tokens Studio / native-import compatibility, and Figma Text Styles are not part of this release.
What you get
One DTCG file (a tokens interchange format) that the plugin turns into Figma Variable collections, one per tier and type:
| Collection | Holds | Modes |
|---|---|---|
| Primitive · Color | raw colours | single |
| Primitive · Dimension | radii, font sizes (px) | single |
| Primitive · Font | font families | single |
| Semantic · Color | bg-*, fg-*, border-* |
Light / Dark |
| Semantic · Typography | type facets (family, size, weight, line-height, letter-spacing) | single |
| Component · Color | your theme colours | Light / Dark |
| Component · Dimension | theme radius, … | single |
Aliases cross collections (Semantic·Color → Primitive·Color, Component·Color → Semantic·Color), so the dependency graph survives the trip.
Steps
- Install the plugin once. In Tostada's Developer page, open the Sync to Figma panel and click Install Tostada Variables to open its Figma Community page, then add it.
- Send your tokens. Click Send to Figma plugin — Tostada copies the DTCG to your clipboard. (Prefer a file? Export DTCG downloads it instead.)
- Run the plugin in Figma. Open Plugins → Tostada Variables, click Paste from clipboard, then Apply Variables.
- The plugin creates the collections, Light/Dark modes, and aliases, and reports how many variables it created.
Re-syncing
Change a token in Tostada, click Send to Figma plugin again, and re-run the plugin on the same file. It matches variables by collection and name and updates them in place — nothing is duplicated.
Notes & limits
- One-way. Edits made in Figma do not flow back to Tostada.
- Line-height is exported as pixels (
font size × multiplier), because Figma line-height variables are px-only. Rescaling text in Figma won't reproportion the line-height. - Text-case and text-decoration aren't variable-bindable in Figma, so they aren't exported (they belong to Figma Text Styles, which are a later release).
- Non-hex colours and tokens whose reference can't be resolved are skipped and reported rather than exported as empty values.