figma-design-sync

Onboard a new codebase for design system sync with Figma. Detects or extracts tokens, configures sync mappings, runs baseline audit. Activate with "/setup-project".

Read Figma variables and diff against CSS tokens. Activate with "/sync-from-figma". Supports --dry-run. Reads variable collections, compares to canonical CSS custom properties, generates updated CSS.

Push design tokens and components from code to Figma via Console MCP. Activate with "/sync-to-figma". Updates existing design system in-place by default. Use "--fresh" to create a new versioned page (visual git). Use "--tokens-only" to skip artboards.