Introduction
The gap between design and development is where inconsistencies are born. A designer creates a pixel-perfect mockup; a developer interprets it slightly differently. Multiply this across hundreds of screens and the UI diverges from design intent.
A robust Figma-to-code workflow eliminates this gap through shared design tokens, structured naming, and automation that extracts values directly from design files.
This guide covers Figma setup for developer handoff, token extraction, component mapping, and automating the sync.
Key Concepts
Figma Variables as Token Source
// Exported from Figma Variables or Tokens Studio
{
"color": {
"primitive": {
"blue-500": { "$value": "#3B82F6", "$type": "color" },
"gray-900": { "$value": "#111827", "$type": "color" }
},
"semantic": {
"bg-primary": { "$value": "{color.primitive.white}", "$type": "color" },
"text-primary": { "$value": "{color.primitive.gray-900}", "$type": "color" }
}
}
}
Component Mapping
// Figma → Code mapping document
// | Figma Component | React Component |
// |----------------------|-------------------------------------|
// | Button/Primary/SM | <Button variant="primary" size="sm"> |
// | Card/Default | <Card> |
// | Avatar/Circle/MD | <Avatar shape="circle" size="md"> |
// | Input/Default | <Input /> |
Practical Examples
1. Token Sync Script
// scripts/sync-figma-tokens.ts
async function syncTokens() {
const res = await fetch(`https://api.figma.com/v1/files/${FILE_ID}/variables/local`, {
headers: { 'X-Figma-Token': process.env.FIGMA_TOKEN! },
});
const { meta } = await res.json();
const tokens = {};
for (const variable of Object.values(meta.variables)) {
// Transform Figma variable to token format
tokens[variable.name] = { value: variable.resolvedValue };
}
await fs.writeFile('tokens/figma.json', JSON.stringify(tokens, null, 2));
console.log('Tokens synced from Figma');
}
2. Component Spec Template
# Button Component Spec
## Figma Link: [View](https://figma.com/file/xxx)
## Tokens Used
- Background: color.action.primary
- Text: color.text.on-action
- Border radius: radius.md (8px)
- Padding: spacing.3 horizontal
## States: Default, Hover, Active, Focus, Disabled, Loading
## Accessibility
- Min touch target: 44x44px
- Focus ring: 2px offset
3. Design Lint Configuration
// Enforce token usage in Figma
module.exports = {
rules: {
'no-hardcoded-colors': 'error',
'no-hardcoded-spacing': 'warning',
'text-style-required': 'error',
'component-naming': { pattern: 'Category/Variant/Size' },
},
};
Best Practices
- ✅ Use Figma Variables — they map directly to design tokens
- ✅ Name Figma components to match code component names and props
- ✅ Automate token extraction — manual sync drifts immediately
- ✅ Create component spec documents for complex components
- ✅ Use Figma Dev Mode for inspecting spacing and tokens
- ❌ Don't auto-generate production code from Figma — it's always worse
- ❌ Don't skip the mapping document — assumptions cause inconsistencies
Common Pitfalls
- Designers using one-off colors instead of variables — enforce with linting
- Token names mismatching between Figma and code — establish naming convention first
- Assuming developers check Figma — provide tokens in code
- Not including interactive states in designs — developers guess hover and focus
Related Guides
- Design Tokens Complete Guide — Token architecture and transformation
- Design Handoff Best Practices — Communication processes
- Design System Documentation — Documenting the mapping
- Building Component Libraries — Implementing from designs