Figma variables

Syntope Tokens maps tokens to Figma variables in one direction: tokens to variables. Figma is a consumer of the project. The plugin never reads variables back into tokens, and a value changed in Figma is overwritten at the next sync.

Partial: rem dimensions, font family lists and all other types do not map to variables.

Run a sync

Open the dialog with the Figma icon in the footer, or from the dropdown next to sync to: selection, with sync to Figma variables….

1. theme group: choose a group and how it syncs. A project without theme groups shows base instead.
2. target collection: choose a local collection or create new collection….
3. Map themes to Figma modes.
4. preview: check what will change. Figma does not change until you sync.
5. Choose sync variables, or create collection & sync for a new collection.

Choice	Result
every theme in this group → Figma modes	Each theme gets one mode. One theme must use the collection’s default mode
one theme → default mode	One theme goes to a collection with exactly one mode
No theme groups	Base goes to the default mode of one collection

Other theme groups use their theme in use. On Figma’s free Starter plan a collection has one mode, so choose one theme → default mode.

Collections from a library are not offered. Run the sync in the library file.

Type mapping

Token type	Figma variable	Left out when
color	Color	It cannot be converted. Wide-gamut values are gamut-mapped
dimension	Number	The value is in rem. Use px
number	Number	It carries a percentage or AUTO line height. Apply the token directly
fontWeight	Number	Never
fontFamily	String	It lists more than one font. Use one font
All other types	None	Always

string, duration, cubicBezier, strokeStyle, border, transition, shadow, gradient and typography tokens do not become variables. The preview counts them under left out, and show what is left out gives the reason per token. Apply the types that have a target to layers, and use the rest in code.

A token that exists in only some of the themes, or has a different type per theme, is left out as well.

Names and references

A variable takes its name from the token path, with / between groups: color.brand.500 becomes color/brand/500. Its description comes from $description.

A token that refers to another whole token becomes a variable alias, if the target also syncs in every theme and has the same Figma type. If not, the token is left out and the reason is shown. A reference to one property of a composite token is written as a plain value.

What a sync changes in Figma

• Creates missing variables and updates names, descriptions and values that differ.
• Renames a mode the plugin created back to its theme, if someone renamed it in Figma.
• Removes variables whose tokens were deleted. The preview lists them first. Layers using these variables will keep their last values but lose their variable bindings. Recreated tokens will not reconnect those layers.
• Removes modes the plugin created that no theme uses. Layers set to those modes may look different afterwards. Modes the plugin did not create stay.
• Never takes over an existing variable by name. A clash shows as a name conflict and that variable fails. Rename it in Figma, then choose refresh.
• Does not bind layers to variables. It creates and updates variables only.

Each sync is one Figma undo step, so Cmd+Z in Figma takes it back.

A Figma property is set either by a token or by a variable. If you apply a token where a variable is set, the plugin asks first.

Blocked and unfinished syncs

A broken reference anywhere in the project blocks the whole sync, and the dialog links each token. So does a token that exists but cannot resolve in one of the mapped themes, for example because its reference has no target there. Fix them, then sync again.

If Figma accepts only part of a sync, the dialog shows Finish this Figma sync. sync the rest tries what is left. When the file reaches its mode limit you see Figma mode limit reached.

unlink collection makes the plugin forget a collection. Its variables and modes stay in Figma unchanged, and a later sync will not take them over.

To change a value in Figma, change the token and sync again.