Sync design system components between Figma and code using Code Connect mappings
Synchronizes design system components between Figma and code using Code Connect mappings
/plugin marketplace add TheBushidoCollective/han/plugin install hashi-github@hanhashi-figma:figma-sync-design-system - Sync design system components between Figma and code
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.
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.
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.
Inventory Figma Components:
Inventory Code Components:
Analyze Gaps:
Create Sync Plan:
Execute Sync: Based on user preference, either:
When creating or updating Code Connect mappings:
// Button.figma.tsx
import figma from '@figma/code-connect';
import { Button } from './Button';
figma.connect(
Button,
'https://www.figma.com/file/abc123?node-id=1:234',
{
props: {
variant: figma.enum('Variant', {
Primary: 'primary',
Secondary: 'secondary',
}),
size: figma.enum('Size', {
Small: 'sm',
Medium: 'md',
Large: 'lg',
}),
disabled: figma.boolean('Disabled'),
children: figma.string('Label'),
},
example: ({ variant, size, disabled, children }) => (
<Button variant={variant} size={size} disabled={disabled}>
{children}
</Button>
),
}
);
Provide a comprehensive report:
# Design System Sync Report
Generated: [date]
Figma File: [file name and URL]
Code Location: [path to component library]
## Summary
- Total Figma Components: 45
- Total Code Components: 38
- Synced Components: 35
- Needs Generation: 10
- Needs Update: 3
- Needs Code Connect: 7
## Components Needing Action
### Generate (Figma → Code)
1. **AlertDialog**
- Variants: Info, Warning, Error, Success
- Props: title, message, onClose, onConfirm
- Figma: [URL]
2. **Tooltip**
- Variants: Top, Right, Bottom, Left
- Props: content, trigger, delay
- Figma: [URL]
### Update (Align Code with Figma)
1. **Button**
- Missing variant: Ghost
- New prop: iconPosition (left/right)
- Action: Add variant and prop to code
### Create Code Connect
1. **Card**
- Code exists at: src/components/Card/Card.tsx
- Figma: [URL]
- Action: Create Card.figma.tsx mapping
## Recommendations
1. Consolidate Button and IconButton components
2. Standardize size prop values across all components
3. Add missing documentation to Input component
4. Consider deprecating old Badge variants
Component Naming:
Variant Mapping:
Documentation:
Validation:
Ask the user which workflow they prefer:
Migration Guide:
Testing Plan:
Documentation Updates: