1---
2name: figma-implement-design
3description: Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.
4disable-model-invocation: false
5---
6 
7# Implement Design
8 
9## Overview
10 
11This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.
12 
13## Skill Boundaries
14 
15- Use this skill when the deliverable is code in the user's repository.
16- If the user asks to create/edit/delete nodes inside Figma itself, switch to [figma-use](../figma-use/SKILL.md).
17- If the user asks to build or update a full-page screen in Figma from code or a description, switch to [figma-generate-design](../figma-generate-design/SKILL.md).
18- If the user asks only for Code Connect mappings, switch to [figma-code-connect](../figma-code-connect/SKILL.md).
19- If the user asks to author reusable agent rules (`CLAUDE.md`/`AGENTS.md`), switch to [figma-create-design-system-rules](../figma-create-design-system-rules/SKILL.md).
20 
21## Prerequisites
22 
23- Figma MCP server must be connected and accessible
24- User must provide a Figma URL in the format: `https://figma.com/design/:fileKey/:fileName?node-id=1-2`
25  - `:fileKey` is the file key
26  - `1-2` is the node ID (the specific component or frame to implement)
27- **OR** when using `figma-desktop` MCP: User can select a node directly in the Figma desktop app (no URL required)
28- Project should have an established design system or component library (preferred)
29 
30## Required Workflow
31 
32**Follow these steps in order. Do not skip steps.**
33 
34### Step 1: Get Node ID
35 
36#### Option A: Parse from Figma URL
37 
38When the user provides a Figma URL, extract the file key and node ID to pass as arguments to MCP tools.
39 
40**URL format:** `https://figma.com/design/:fileKey/:fileName?node-id=1-2`
41 
42**Extract:**
43 
44- **File key:** `:fileKey` (the segment after `/design/`)
45- **Node ID:** `1-2` (the value of the `node-id` query parameter)
46 
47**Note:** When using the local desktop MCP (`figma-desktop`), `fileKey` is not passed as a parameter to tool calls. The server automatically uses the currently open file, so only `nodeId` is needed.
48 
49**Example:**
50 
51- URL: `https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15`
52- File key: `kL9xQn2VwM8pYrTb4ZcHjF`
53- Node ID: `42-15`
54 
55#### Option B: Use Current Selection from Figma Desktop App (figma-desktop MCP only)
56 
57When using the `figma-desktop` MCP and the user has NOT provided a URL, the tools automatically use the currently selected node from the open Figma file in the desktop app.
58 
59**Note:** Selection-based prompting only works with the `figma-desktop` MCP server. The remote server requires a link to a frame or layer to extract context. The user must have the Figma desktop app open with a node selected.
60 
61### Step 2: Fetch Design Context
62 
63Run `get_design_context` with the extracted file key and node ID.
64 
65```
66get_design_context(fileKey=":fileKey", nodeId="1-2")
67```
68 
69This provides the structured data including:
70 
71- Layout properties (Auto Layout, constraints, sizing)
72- Typography specifications
73- Color values and design tokens
74- Component structure and variants
75- Spacing and padding values
76 
77**If the response is too large or truncated:**
78 
791. Run `get_metadata(fileKey=":fileKey", nodeId="1-2")` to get the high-level node map
802. Identify the specific child nodes needed from the metadata
813. Fetch individual child nodes with `get_design_context(fileKey=":fileKey", nodeId=":childNodeId")`
82 
83### Step 3: Capture Visual Reference
84 
85Run `get_screenshot` with the same file key and node ID for a visual reference.
86 
87```
88get_screenshot(fileKey=":fileKey", nodeId="1-2")
89```
90 
91This screenshot serves as the source of truth for visual validation. Keep it accessible throughout implementation.
92 
93### Step 4: Download Required Assets
94 
95Download any assets (images, icons, SVGs) returned by the Figma MCP server.
96 
97**IMPORTANT:** Follow these asset rules:
98 
99- If the Figma MCP server returns a `localhost` source for an image or SVG, use that source directly
100- DO NOT import or add new icon packages - all assets should come from the Figma payload
101- DO NOT use or create placeholders if a `localhost` source is provided
102- Assets are served through the Figma MCP server's built-in assets endpoint
103 
104### Step 5: Translate to Project Conventions
105 
106Translate the Figma output into this project's framework, styles, and conventions.
107 
108**Key principles:**
109 
110- Treat the Figma MCP output (typically React + Tailwind) as a representation of design and behavior, not as final code style
111- Replace Tailwind utility classes with the project's preferred utilities or design system tokens
112- Reuse existing components (buttons, inputs, typography, icon wrappers) instead of duplicating functionality
113- Use the project's color system, typography scale, and spacing tokens consistently
114- Respect existing routing, state management, and data-fetch patterns
115 
116### Step 6: Achieve 1:1 Visual Parity
117 
118Strive for pixel-perfect visual parity with the Figma design.
119 
120**Guidelines:**
121 
122- Prioritize Figma fidelity to match designs exactly
123- Avoid hardcoded values - use design tokens from Figma where available
124- When conflicts arise between design system tokens and Figma specs, prefer design system tokens but adjust spacing or sizes minimally to match visuals
125- Follow WCAG requirements for accessibility
126- Add component documentation as needed
127 
128### Step 7: Validate Against Figma
129 
130Before marking complete, validate the final UI against the Figma screenshot.
131 
132**Validation checklist:**
133 
134- [ ] Layout matches (spacing, alignment, sizing)
135- [ ] Typography matches (font, size, weight, line height)
136- [ ] Colors match exactly
137- [ ] Interactive states work as designed (hover, active, disabled)
138- [ ] Responsive behavior follows Figma constraints
139- [ ] Assets render correctly
140- [ ] Accessibility standards met
141 
142## Implementation Rules
143 
144### Component Organization
145 
146- Place UI components in the project's designated design system directory
147- Follow the project's component naming conventions
148- Avoid inline styles unless truly necessary for dynamic values
149 
150### Design System Integration
151 
152- ALWAYS use components from the project's design system when possible
153- Map Figma design tokens to project design tokens
154- When a matching component exists, extend it rather than creating a new one
155- Document any new components added to the design system
156 
157### Code Quality
158 
159- Avoid hardcoded values - extract to constants or design tokens
160- Keep components composable and reusable
161- Add TypeScript types for component props
162- Include JSDoc comments for exported components
163 
164## Examples
165 
166### Example 1: Implementing a Button Component
167 
168User says: "Implement this Figma button component: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15"
169 
170**Actions:**
171 
1721. Parse URL to extract fileKey=`kL9xQn2VwM8pYrTb4ZcHjF` and nodeId=`42-15`
1732. Run `get_design_context(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15")`
1743. Run `get_screenshot(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15")` for visual reference
1754. Download any button icons from the assets endpoint
1765. Check if project has existing button component
1776. If yes, extend it with new variant; if no, create new component using project conventions
1787. Map Figma colors to project design tokens (e.g., `primary-500`, `primary-hover`)
1798. Validate against screenshot for padding, border radius, typography
180 
181**Result:** Button component matching Figma design, integrated with project design system.
182 
183### Example 2: Building a Dashboard Layout
184 
185User says: "Build this dashboard: https://figma.com/design/pR8mNv5KqXzGwY2JtCfL4D/Dashboard?node-id=10-5"
186 
187**Actions:**
188 
1891. Parse URL to extract fileKey=`pR8mNv5KqXzGwY2JtCfL4D` and nodeId=`10-5`
1902. Run `get_metadata(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5")` to understand the page structure
1913. Identify main sections from metadata (header, sidebar, content area, cards) and their child node IDs
1924. Run `get_design_context(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId=":childNodeId")` for each major section
1935. Run `get_screenshot(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5")` for the full page
1946. Download all assets (logos, icons, charts)
1957. Build layout using project's layout primitives
1968. Implement each section using existing components where possible
1979. Validate responsive behavior against Figma constraints
198 
199**Result:** Complete dashboard matching Figma design with responsive layout.
200 
201## Best Practices
202 
203### Always Start with Context
204 
205Never implement based on assumptions. Always fetch `get_design_context` and `get_screenshot` first.
206 
207### Incremental Validation
208 
209Validate frequently during implementation, not just at the end. This catches issues early.
210 
211### Document Deviations
212 
213If you must deviate from the Figma design (e.g., for accessibility or technical constraints), document why in code comments.
214 
215### Reuse Over Recreation
216 
217Always check for existing components before creating new ones. Consistency across the codebase is more important than exact Figma replication.
218 
219### Design System First
220 
221When in doubt, prefer the project's design system patterns over literal Figma translation.
222 
223## Common Issues and Solutions
224 
225### Issue: Figma output is truncated
226 
227**Cause:** The design is too complex or has too many nested layers to return in a single response.
228**Solution:** Use `get_metadata` to get the node structure, then fetch specific nodes individually with `get_design_context`.
229 
230### Issue: Design doesn't match after implementation
231 
232**Cause:** Visual discrepancies between the implemented code and the original Figma design.
233**Solution:** Compare side-by-side with the screenshot from Step 3. Check spacing, colors, and typography values in the design context data.
234 
235### Issue: Assets not loading
236 
237**Cause:** The Figma MCP server's assets endpoint is not accessible or the URLs are being modified.
238**Solution:** Verify the Figma MCP server's assets endpoint is accessible. The server serves assets at `localhost` URLs. Use these directly without modification.
239 
240### Issue: Design token values differ from Figma
241 
242**Cause:** The project's design system tokens have different values than those specified in the Figma design.
243**Solution:** When project tokens differ from Figma values, prefer project tokens for consistency but adjust spacing/sizing to maintain visual fidelity.
244 
245## Understanding Design Implementation
246 
247The Figma implementation workflow establishes a reliable process for translating designs to code:
248 
249**For designers:** Confidence that implementations will match their designs with pixel-perfect accuracy.
250**For developers:** A structured approach that eliminates guesswork and reduces back-and-forth revisions.
251**For teams:** Consistent, high-quality implementations that maintain design system integrity.
252 
253By following this workflow, you ensure that every Figma design is implemented with the same level of care and attention to detail.
254 
255## Additional Resources
256 
257- [Figma MCP Server Documentation](https://developers.figma.com/docs/figma-mcp-server/)
258- [Figma MCP Server Tools and Prompts](https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/)
259- [Figma Variables and Design Tokens](https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma)
260