#css export

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.

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.