Theme Variants (Light / Dark)
Both colour themes are rendered in Figma — free users get side-by-side columns, Figma paid plan users get native Variable mode switching.
How it works
The plugin always generates both light and dark themes. On a free Figma plan the two themes appear as side-by-side columns so designers can compare them directly. On a Figma paid plan the plugin uses Figma Variables multi-mode, letting designers toggle the active theme from the Variables panel without duplicating frames.
Usage
- 1
Both themes are generated on every 'Generate Design System Page' run — no extra steps.
- 2
On a free Figma plan: light and dark variants appear as side-by-side columns in the design system page.
- 3
On a Figma paid plan: the plugin creates a Variable collection with light/dark modes, enabling theme switching from the Variables panel.
- 4
Semantic color tokens (e.g. `background`, `foreground`, `primary`) map to the correct value in each mode.
- 5
Ensure your CSS custom properties define values for both `:root` (light) and `.dark` (dark) selectors.