Connect AI coding agents to Figma designs via MCP to generate code from frames, extract design tokens, use Code Connect, and write directly to the canvas
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Connect AI coding agents to Figma designs via MCP to generate code from frames, extract design tokens, use Code Connect, and write directly to the canvas
triggers
["implement this Figma design","generate code from this Figma frame","get design tokens from Figma","extract variables from this Figma file","create a component in Figma","use Code Connect for this design","convert this frame to code","update Figma design with code"]
The Figma MCP server connects AI coding agents directly to Figma, enabling you to generate code from designs, extract design tokens, leverage Code Connect mappings, and write native Figma content back to the canvas. This skill teaches agents how to work with Figma files through the Model Context Protocol.
What It Does
Generate code from Figma frames — Select any frame and get structured code (React + Tailwind by default, adaptable to any framework)
Extract design context — Pull variables, components, styles, and layout data
Code Connect integration — Reference actual component implementations from your codebase
Write to canvas (beta) — Create and modify frames, components, variables, and auto layout directly in Figma
Import from web (rolling out) — Convert web pages into Figma designs
"Implement this design: [paste URL]"
"Generate code for https://www.figma.com/design/..."
"Use Code Connect for this component: [URL]"
Code Connect Integration
Code Connect maps Figma components to your actual component implementations. When configured, agents generate code using your real components instead of generic markup.
<button className="bg-blue-500 px-4 py-2 rounded">
Click me
</button>
With:
import { Button } from'@/components/ui/Button';
<Buttonvariant="primary"size="md">
Click me
</Button>
Prompt:
"Use Code Connect to implement this button component"
"Generate code using our actual component library"
Real-World Workflows
Implement a Feature Flow
"Implement this checkout flow using our existing components:
https://www.figma.com/design/xyz?node-id=100-200
Use components from src/components/checkout
Follow our Next.js page structure
Use our design tokens for spacing and colors"
Agent will:
Call get_design_context for the frame
Call get_variable_defs for tokens
Call get_screenshot for visual reference
Check Code Connect for component mappings
Generate code using your conventions
Extract Design System Tokens
"Extract all color, spacing, and typography variables from this design system:
https://www.figma.com/design/tokens?node-id=1-1
Generate a TypeScript tokens file for Tailwind config"
"Create a primary button component in Figma using our design system tokens.
Should have three variants: small, medium, large.
Use our primary blue and standard corner radius."
Agent will:
Fetch existing variables
Call create_component with proper structure
Apply auto layout
Link to variables
Sync Design and Code
"This Card component has been updated in code (src/components/Card.tsx).
Update the Figma component to match:
- Add elevation prop
- Support optional image
- Update spacing to use 16px instead of 12px"
Agent reads your code, then calls write tools to update Figma.
Configuration and Rules
Project-Level Instructions
Add to your project's agent instructions file (.cursorrules, .clinerules, etc.):
Images returned by get_design_context are base64-encoded:
// Agent pattern for assetsconst assetData = designContext.images[0];
if (assetData.startsWith('data:image')) {
// Write to file
fs.writeFileSync(
`public/assets/${nodeName}.png`,
Buffer.from(assetData.split(',')[1], 'base64')
);
}
Rule for agents:
When Figma MCP returns images:
1. Decode base64 data
2. Save to public/assets/ with semantic names
3. Reference via relative path in code
4. Use Next.js Image component with proper sizing
Framework Translation
Default output is React + Tailwind. Translate to your stack in the prompt:
SwiftUI:
"Generate SwiftUI code from this Figma frame"
Vue + Tailwind:
"Convert this to Vue 3 composition API with Tailwind"
React Native:
"Generate React Native StyleSheet code for this design"
Chakra UI:
"Use Chakra UI components for this layout"
Custom design system:
"Use our design system components from @company/ui-kit
Available components: Button, Card, Stack, Text, Input
Import from @company/ui-kit"
Troubleshooting
Agent not picking right tool
Problem: Generic code generated instead of using variables.
Solution:
"Use get_variable_defs to extract design tokens first,
then generate code referencing those tokens"
Get token: Figma → Settings → Account → Personal access tokens
Best Practices
Structure Figma Files for Better Code
Use components for reusable elements
Link via Code Connect for accurate component reuse
Use variables for colors, spacing, typography
Name layers semantically (CardContainer, not Group 5)
Use Auto Layout to communicate responsive behavior
Add dev notes for complex interactions
Write Effective Prompts
❌ "Make this into code"
✅ "Generate Next.js code for this dashboard layout.
Use components from src/components/dashboard.
Apply our design tokens from @/lib/tokens.
Follow the App Router structure."
Verify Design Intent
Before generating code:
"Show me the auto layout settings and variables used in this frame"
"Get a screenshot and design context for this component"
Keep Designs in Sync
When code changes:
"I updated the Button component in src/components/Button.tsx.
Update the Figma component to match:
[paste code]"
Integration Patterns
CI/CD Design Checks
// scripts/check-design-sync.jsimport { exec } from'child_process';
const figmaNodeId = process.env.FIGMA_COMPONENT_NODE;
const prompt = `
Compare the Figma component at node ${figmaNodeId}
with src/components/Button.tsx.
Report any mismatches in props, variants, or styling.
`;
exec(`claude code "${prompt}"`, (error, stdout) => {
if (stdout.includes('mismatch')) {
process.exit(1);
}
});
Design System Documentation
"Generate Storybook stories from all button variants in this Figma frame.
Include controls for each variant and size.
Use our actual Button component from @/components/ui/Button."
Automated Handoff
"Create a PR that:
1. Extracts design tokens from this Figma file
2. Updates src/theme/tokens.ts
3. Regenerates Tailwind config
4. Shows a preview of changed colors in Storybook"
Advanced Usage
Multi-Frame Workflows
"Implement these three screens as Next.js pages:
1. Login: https://figma.com/design/x?node-id=1-1
2. Dashboard: https://figma.com/design/x?node-id=1-2
3. Profile: https://figma.com/design/x?node-id=1-3
Share components between pages.
Use the same header and navigation."
Design System Audits
"Audit this Figma file for inconsistencies:
- Colors not using variables
- Components without Code Connect
- Hardcoded spacing values
- Layers with generic names
Generate a report with locations and recommendations."
Responsive Design Generation
"This frame has mobile, tablet, and desktop variants.
Generate responsive code that:
- Uses Tailwind breakpoints
- Maintains the same component structure
- Adjusts layout and spacing per breakpoint"
