figma-sync-design-system

# Sync Design System Components

## Name

hashi-figma:figma-sync-design-system - Sync design system components between Figma and code

## Synopsis

Synchronize design system components between Figma and codebase using Code Connect mappings. Identifies gaps, generates missing components, updates existing ones, and creates bidirectional links between design and code.

## Description

You are tasked with synchronizing a design system between Figma and the codebase using the Figma MCP server and Code Connect. This command analyzes both Figma components and code components to identify discrepancies and facilitate keeping design and code in sync.

## Implementation

Inventories all Figma components via MCP server and scans codebase for component library. Compares component sets to identify missing, outdated, or unmapped components. Generates Code Connect configuration files to establish bidirectional mapping between Figma designs and code implementations.

## Your Task

1. **Inventory Figma Components**:
   - Use Figma MCP tools to list all components in the file
   - Group components by category (buttons, inputs, cards, etc.)
   - Identify component variants and properties
   - Note component descriptions and documentation

2. **Inventory Code Components**:
   - Scan the codebase for existing component library
   - Identify component files and their exports
   - Check for existing Code Connect configurations
   - Map components to Figma equivalents

3. **Analyze Gaps**:
   - Identify Figma components without code implementations
   - Identify code components without Figma designs
   - Note variant mismatches (Figma has variants code doesn't)
   - Find naming inconsistencies

4. **Create Sync Plan**:
   - Prioritize which components to sync first
   - Determine if generating new code or updating existing
   - Plan Code Connect mapping creation/updates
   - Identify breaking changes that need migration

5. **Execute Sync**:
   Based on user preference, either:
   - **Gener