Figma Implement Design

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