Figma Variables Binding
Every colour token in your Tailwind config is bound to a native Figma Variable — enabling live theme switching directly inside Figma.
How it works
The plugin creates a 'Design Tokens' variable collection and populates it with your colour, radius, and font tokens. On paid Figma plans, themes are represented as modes within a single collection so designers can switch themes with one click. On free plans, two separate collections ('Primary' and 'Secondary') are created as a fallback. Every frame fill, stroke, and text colour is bound to the corresponding variable, not a raw hex — so updating a token value propagates to the entire design system instantly.
Usage
- 1
Run 'Generate Design System Page' — the plugin creates or updates the 'Design Tokens' variable collection.
- 2
On paid Figma plans, primary and secondary themes are separate modes in the same collection.
- 3
On free Figma plans, two collections are created — Primary and Secondary.
- 4
All fills, strokes, and text colours are bound to variables, not hardcoded hex values.
- 5
Changing a variable value in Figma updates every frame that references it — across the whole file.