| name | design.sync-variables |
| description | Sync CSS variables from Figma plugin export to globals.css. Use when updating design tokens/colors from Figma. |
| disable-model-invocation | true |
| allowed-tools | ["Read","Edit","Bash","Grep"] |
Sync Variables from Figma
Sync CSS variables from Figma plugin variables2css export to globals.css.
Rules
- Only update existing variables - Never add new variables
- Keep code order - Only change values, not structure
- Direct mappings only - Only update if Figma has a matching variable
- Use Figma plugin export - Do NOT use Figma MCP for variables (incomplete data)
Source Files
- Source of truth: Figma plugin export (user provides)
- Target:
apps/web/src/styles/globals.css
Process
- Ask user for Figma CSS Variables plugin export
- Compare Figma values vs
globals.css existing variables
- Update only values that differ (use direct hex values)
- Verify:
yarn workspace @safe-global/web type-check
Variable Mapping
| Figma Export | CSS Variable |
|---|
--general-background | --background |
--general-foreground | --foreground |
--general-primary | --primary |
--general-primary-foreground | --primary-foreground |
--general-secondary | --secondary |
--general-secondary-foreground | --secondary-foreground |
--general-muted | --muted |
--general-muted-foreground | --muted-foreground |
--general-accent | --accent |
--general-accent-foreground | --accent-foreground |
--general-destructive | --destructive |
--general-border | --border |
--general-input | --input |
--card-card | --card |
--card-card-foreground | --card-foreground |
--popover-popover | --popover |
--popover-popover-foreground | --popover-foreground |
--focus-ring | --ring |
--sidebar-sidebar | --sidebar |
--sidebar-sidebar-foreground | --sidebar-foreground |
Example
User provides export:
--general-background: #ffffff;
--general-primary: #12ff80;
Update in globals.css:
--background: #ffffff;
--primary: #12ff80;
