Implement UI directly from Figma designs using the Figma MCP with pixel-perfect fidelity. Use when given a Figma URL, asked to "implement from Figma", "match the design", or when building UI that needs to precisely match design specs.
Implement UI components directly from Figma designs using the Figma MCP.
Follow the instructions in /agents/design/figma-implement.md:
Extract Design Intent — Use Figma MCP to get specs (colors, typography, spacing, shadows, component hierarchy)
Understand Codebase Context — Find existing design system, component patterns, styling methodology
Implement with Fidelity — Write code using existing tokens, get padding/spacing right (most commonly missed)
Review and Compare — Screenshot the result, compare against Figma, fix discrepancies, iterate until matching
/arc:figma https://figma.com/design/xxx/yyy?node-id=123-456
Or if Figma file already shared:
/arc:figma "the header component"
Get design context:
mcp__figma__get_design_context: fileKey, nodeId
Get screenshot for comparison:
mcp__figma__get_screenshot: fileKey, nodeId
Extract specific values: