From figma
Syncs design system components between Figma and code using Code Connect mappings. Inventories Figma/code components, identifies gaps, generates missing code, updates mappings.
How this skill is triggered — by the user, by Claude, or both
Slash command
/figma:figma-sync-design-systemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
figma:figma-sync-design-system - Sync design system components between Figma and code
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:
npx claudepluginhub thebushidocollective/han --plugin figmaConnects Figma designs to code by generating design system rules, mapping UI components to Figma, and maintaining design-code consistency via MCP server. Useful for Figma to code, UI mockups, design systems.
Creates and maintains Figma Code Connect template files (.figma.ts) that map Figma components to code snippets. Useful for design-to-code translation with Figma.
Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.