🎯 Design
Figma Variables Modes and Semantic Alias Collection Planner: Light Dark Modes, Alias Paths, and CSS JSON Export Notes
Plan a Figma Variables collection with light and dark modes, primitive to semantic alias paths, and export notes for CSS custom properties and JSON tokens so design and engineering share one naming scheme without inventing hex values you did not supply.
0Reviews
Prompt
Act as a design systems designer who plans Figma Variables collections with modes, semantic aliases over primitives, and export paths to CSS custom properties and JSON tokens without inventing color hex values missing from the input. Inputs: - Product surfaces and themes needed (light, dark, high contrast, brand): [ThemesAndSurfaces] - Primitive tokens you already have (paste names and values) and gaps: [PrimitiveInventory] - Semantic roles required (bg canvas, text primary, border muted, accent action): [SemanticRoles] - Engineering consumers (CSS variables, Style Dictionary JSON, iOS/Android later): [ExportTargets] - Existing Figma library file constraints (who can publish, naming prefix): [LibraryRules] - Output format: [Format] Generate: 1. A collection plan: collection names, modes from ThemesAndSurfaces, and which primitives vs semantics live in each. 2. An alias table: each SemanticRoles token points at a primitive path per mode; mark missing primitives as [need value] instead of inventing hex. 3. A naming convention: prefix from LibraryRules, slash path style, and forbidden synonyms. 4. Mode matrix notes: what changes in dark vs light besides surfaces (elevation, status colors). 5. Export notes for ExportTargets: CSS custom property names, JSON shape, and where alias resolution should happen. 6. A Figma build order checklist: create primitives, create modes, bind aliases, attach to components, publish library. 7. A QA checklist: unused primitives, broken aliases, contrast review flagged as [run contrast tool] without inventing ratios. 8. A handoff blurb for engineers describing how to consume the export. Constraints: - Do not invent hex, rgb, or spacing px not present in PrimitiveInventory. - Prefer semantic aliases over hard coding primitives on components. - No em dashes.
Instructions
Replace every [bracket] with your details before running. Works on ChatGPT, Claude, and Gemini.
Generated Output
This image was generated using the prompt above.
Examples
Example Input
ThemesAndSurfaces: SaaS dashboard; modes light and dark for now; high contrast later PrimitiveInventory: color/gray/0 #FFFFFF; color/gray/100 #F4F4F5; color/gray/900 #18181B; color/gray/1000 #09090B; color/brand/500 #4F46E5; color/brand/400 #818CF8; spacing/2 8; spacing/4 16 (gaps: dark surface primitives beyond gray/900) SemanticRoles: bg/canvas, bg/subtle, text/primary, text/muted, border/muted, action/bg, action/text ExportTargets: CSS variables for Next.js; JSON for Style Dictionary later LibraryRules: prefix ds/; only design systems team publishes Format: collections, alias table, naming, mode notes, export, build order, QA, handoff
Example Output
1) COLLECTIONS
- ds/color-primitives: modes Light, Dark (values per mode)
- ds/color-semantic: modes Light, Dark; aliases only
- ds/spacing-primitives: single mode (spacing/2, spacing/4)
High contrast: deferred collection; do not fake tokens now.
2) ALIAS TABLE
| Semantic | Light alias | Dark alias |
| bg/canvas | color/gray/0 | color/gray/1000 |
| bg/subtle | color/gray/100 | color/gray/900 |
| text/primary | color/gray/1000 | color/gray/0 |
| text/muted | [need value: gray/600] | [need value: gray/400] |
| border/muted | [need value: gray/300] | [need value: gray/700] |
| action/bg | color/brand/500 | color/brand/400 |
| action/text | color/gray/0 | color/gray/1000 |
Do not invent the muted gray hexes; add primitives first.
3) NAMING
- Paths: ds/color/bg/canvas style in docs; Figma variable names bg/canvas inside semantic collection
- Forbidden: background, primary-color, brandPurple as synonyms of action/bg
4) MODE NOTES
Dark mode swaps canvas and text primitives. Brand action lightens one step (500 to 400) for affordance on dark canvas. Elevation tokens not in inventory: skip.
5) EXPORT
CSS:
--ds-bg-canvas: var resolved from mode
--ds-action-bg: ...
JSON (Style Dictionary friendly):
{ "color": { "bg": { "canvas": { "value": "{color.gray.0}", "attributes": {"mode": "light"} } } } }
Resolve aliases in the build pipeline for CSS output.
6) BUILD ORDER
[ ] Add missing gray primitives for muted text and border
[ ] Create primitive collection modes
[ ] Create semantic aliases per mode
[ ] Bind components to semantics only
[ ] Publish ds/ library as design systems team
7) QA
[ ] No component bound directly to brand/500 except through action/bg
[ ] Broken alias scan
[ ] Contrast review with a contrast tool on text/primary over bg/canvas [run contrast tool]
[ ] Document [need value] gaps before eng export
8) HANDOFF
Engineers consume CSS variables generated from semantic names. Do not hard code gray/900 in React. When Dark mode toggles, swap the mode-resolved CSS file or data attribute on :root.