How to Use the Figma Variables Modes Prompt to Plan Light Dark Aliases Before You Paint Hex

Painting hex into every component is how light and dark themes drift apart. Figma Variables work when primitives feed semantic aliases across modes, and engineering gets CSS or JSON that matches those names. The Figma Variables Modes and Semantic Alias Collection Planner: Light Dark Modes, Alias Paths, and CSS JSON Export Notes prompt plans collections, modes, alias paths, and export notes without inventing hex values you did not supply.

What the prompt produces

1. A collection plan for primitives versus semantics and modes.
2. An alias table per mode with [need value] gaps instead of fake hex.
3. Naming conventions and forbidden synonyms.
4. Mode matrix notes for what changes beyond surfaces.
5. Export notes for CSS custom properties and Style Dictionary style JSON.
6. A build order checklist from primitives to publish.
7. A QA checklist including contrast tool flags without invented ratios.
8. An engineering handoff blurb.

How to fill the inputs

ThemesAndSurfaces should name light, dark, and whether high contrast is now or later.

PrimitiveInventory must paste real names and values. Missing muted grays stay missing.

SemanticRoles list the roles components should bind to: canvas, text, border, action.

ExportTargets changes the CSS versus JSON advice.

LibraryRules cover prefixes and who may publish.

Reading the example output

The sample plans ds/ collections for a SaaS dashboard with light and dark modes.

• text/muted and border/muted are marked need value rather than invented.
• action/bg aliases brand/500 in light and brand/400 in dark.
• Handoff tells engineers to consume semantic CSS variables, not raw gray/900.

Tips for better results

• Bind components only to semantics.
• Add missing primitives before export day.
• Run a real contrast tool on text over canvas; do not ask the model for fake ratios.

Mistakes to avoid

• Do not invent hex to fill gaps.
• Do not create synonym tokens like brandPurple beside action/bg.
• Do not ship dark mode by inverting screenshots.

Who it is for

Design systems designers and engineers aligning Figma Variables with CSS tokens.

Related PromptDig links

Open the Figma Variables Modes and Semantic Alias Collection Planner: Light Dark Modes, Alias Paths, and CSS JSON Export Notes prompt with your primitive inventory. For more design prompts, Browse more prompts. If your alias table survived a dark mode QA pass, Share a prompt.

Working with engineering in the same week

Share the alias table in the sprint channel before anyone writes CSS by hand. Agree that components consume semantic names only. When a designer needs a one off, add a semantic role rather than binding a primitive inside a single frame.

Schedule a dark mode QA pass with real screens, not inverted screenshots. Use your contrast tool on text/primary over bg/canvas and on action/text over action/bg. Log failures as token changes, not one off hex overrides in React.

Naming fights worth having early

Agree that action/bg beats primary and brandPurple. Synonyms are how dark mode breaks. Put forbidden names in the library readme. When marketing asks for a one season accent, add a semantic campaign role with an end date rather than rewriting action/bg globally.

Export CSS only after missing primitives are filled. Shipping NEEDS VALUE as a comment in JSON is better than inventing a gray that design never approved.

Publishing the library

Only the design systems team should publish under LibraryRules. Feature teams consume the library and request new semantic roles through a short intake form that asks for the primitive values. That intake is where [need value] gaps get filled by humans with a contrast tool open, not by a model guessing hex.

After publish, smoke test one core component in light and dark. If action buttons look washed out, fix the alias, do not patch the button frame.