Figma Implementation Workflow
Implement UI components directly from Figma designs using the Figma MCP.
Prerequisites — CHECK FIRST
Before doing anything else, verify Figma MCP is available:
Check MCP Server Installation
- Look for
mcp__figma__* tools in your available tools
- If no Figma MCP tools exist, STOP and notify the user:
"The Figma MCP server is not installed. To use /arc:figma, you need to install the Figma MCP server. See: https://github.com/figma/figma-mcp"
Check Authentication
- Attempt a simple Figma MCP call (e.g.,
mcp__figma__get_design_context with the provided file)
- If you receive an authentication error, STOP and notify the user:
"The Figma MCP server needs authentication. Please configure your Figma access token in the MCP server settings."
Do NOT proceed if either check fails
- Do not attempt to implement designs without Figma access
- Do not guess at design specs
- Simply halt and inform the user what's needed
Process
Only proceed with the following if Figma MCP is available and authenticated.
Follow the instructions in ${CLAUDE_PLUGIN_ROOT}/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
Required Input
- Figma URL (file or specific node)
- OR description of what to find in an already-shared Figma file
Usage
/arc:figma https://figma.com/design/xxx/yyy?node-id=123-456
Or if Figma file already shared:
/arc:figma "the header component"
Figma MCP Commands
Get design context:
mcp__figma__get_design_context: fileKey, nodeId
Get screenshot for comparison:
mcp__figma__get_screenshot: fileKey, nodeId
Extract specific values:
- Colors, gradients
- Typography (font, size, weight, line-height)
- Spacing (padding, margins, gaps)
- Shadows, borders, radii
- Component structure
Check for related prior UI/design work.
Entry: /arc:figma — [Component/screen] implemented from Figma
Interop
- Use /arc:design if you need to create a design from scratch (no Figma reference)
- Use /arc:implement for planned multi-step implementations
1---2name: figma-53description: 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.4license: MIT5---6
7# Figma Implementation Workflow
8
9Implement UI components directly from Figma designs using the Figma MCP.
10
11<required_reading>
12**Load interface rules for UI implementation:**
13- ${CLAUDE_PLUGIN_ROOT}/rules/interface/design.md — Visual principles
14- ${CLAUDE_PLUGIN_ROOT}/rules/interface/colors.md — Color methodology
15- ${CLAUDE_PLUGIN_ROOT}/rules/interface/spacing.md — Spacing system
16- ${CLAUDE_PLUGIN_ROOT}/rules/interface/typography.md — Typography rules
17- ${CLAUDE_PLUGIN_ROOT}/rules/interface/layout.md — Layout patterns
18- ${CLAUDE_PLUGIN_ROOT}/rules/interface/animation.md — If implementing motion
19- ${CLAUDE_PLUGIN_ROOT}/rules/interface/forms.md — If implementing forms
20- ${CLAUDE_PLUGIN_ROOT}/rules/interface/interactions.md — Touch, keyboard, hover
21- ${CLAUDE_PLUGIN_ROOT}/references/frontend-design.md — Fonts and anti-patterns
22- ${CLAUDE_PLUGIN_ROOT}/references/component-design.md — React component patterns
23</required_reading>
24
25## Prerequisites — CHECK FIRST
26
27**Before doing anything else, verify Figma MCP is available:**
28
291. **Check MCP Server Installation**
30 - Look for `mcp__figma__*` tools in your available tools
31 - If no Figma MCP tools exist, **STOP** and notify the user:
32 > "The Figma MCP server is not installed. To use /arc:figma, you need to install the Figma MCP server. See: https://github.com/figma/figma-mcp"
33
342. **Check Authentication**
35 - Attempt a simple Figma MCP call (e.g., `mcp__figma__get_design_context` with the provided file)
36 - If you receive an authentication error, **STOP** and notify the user:
37 > "The Figma MCP server needs authentication. Please configure your Figma access token in the MCP server settings."
38
393. **Do NOT proceed** if either check fails
40 - Do not attempt to implement designs without Figma access
41 - Do not guess at design specs
42 - Simply halt and inform the user what's needed
43
44## Process
45
46**Only proceed with the following if Figma MCP is available and authenticated.**
47
48Follow the instructions in `${CLAUDE_PLUGIN_ROOT}/agents/design/figma-implement.md`:
49
501. **Extract Design Intent** — Use Figma MCP to get specs (colors, typography, spacing, shadows, component hierarchy)
51
522. **Understand Codebase Context** — Find existing design system, component patterns, styling methodology
53
543. **Implement with Fidelity** — Write code using existing tokens, get padding/spacing right (most commonly missed)
55
564. **Review and Compare** — Screenshot the result, compare against Figma, fix discrepancies, iterate until matching
57
58## Required Input
59
60- Figma URL (file or specific node)
61- OR description of what to find in an already-shared Figma file
62
63## Usage
64
65```
66/arc:figma https://figma.com/design/xxx/yyy?node-id=123-456
67```
68
69Or if Figma file already shared:
70```
71/arc:figma "the header component"
72```
73
74## Figma MCP Commands
75
76**Get design context:**
77```
78mcp__figma__get_design_context: fileKey, nodeId
79```
80
81**Get screenshot for comparison:**
82```
83mcp__figma__get_screenshot: fileKey, nodeId
84```
85
86**Extract specific values:**
87- Colors, gradients
88- Typography (font, size, weight, line-height)
89- Spacing (padding, margins, gaps)
90- Shadows, borders, radii
91- Component structure
92
93<progress_context>
94**Use Read tool:** `docs/progress.md` (first 50 lines)
95
96Check for related prior UI/design work.
97</progress_context>
98
99<arc_log>
100**After completing this skill, append to the activity log.**
101See: `${CLAUDE_PLUGIN_ROOT}/references/arc-log.md`
102
103Entry: `/arc:figma — [Component/screen] implemented from Figma`
104</arc_log>
105
106<success_criteria>
107Figma implementation is complete when:
108- [ ] Design specs extracted via Figma MCP (colors, typography, spacing, shadows)
109- [ ] Component implemented using existing design system tokens
110- [ ] Screenshots compared against Figma design
111- [ ] Responsive states handled (mobile, tablet, desktop)
112- [ ] Discrepancies identified and fixed
113- [ ] Progress journal updated
114</success_criteria>
115
116## Interop
117
118- Use **/arc:design** if you need to create a design from scratch (no Figma reference)
119- Use **/arc:implement** for planned multi-step implementations
majiayu000