# Figma Implement Design > 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`. - Skill: `elsolal/figma-implement-design` (Agent Skill) - Install (CLI): `npx skillmds@latest add elsolal/figma-implement-design` - Raw SKILL.md: https://api.skillmd.com/api/skills/elsolal/figma-implement-design/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: elsolal (https://skillmd.com/u/elsolal) - Updated: 2026-09-10 - Page: https://skillmd.com/skills/elsolal/figma-implement-design --- # Implement Design ## Overview This 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. ## Skill Boundaries - Use this skill when the deliverable is code in the user's repository. - If the user asks to create/edit/delete nodes inside Figma itself, switch to [figma-use](../figma-use/SKILL.md). - 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). - If the user asks only for Code Connect mappings, switch to [figma-code-connect](../figma-code-connect/SKILL.md). - 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). - For premium visual direction beyond the Figma tokens (anti-slop typography metrics, motion specs, density rules), invoke a `taste-skill` (default `taste-skill`, or `soft-skill` / `minimalist-skill` / `brutalist-skill`) **before** implementation. For wide-scope deliveries (>10 components), also invoke `output-skill` to enforce complete generation and ban placeholder patterns. ## Prerequisites - Figma MCP server must be connected and accessible - User must provide a Figma URL in the format: `https://figma.com/design/:fileKey/:fileName?node-id=1-2` - `:fileKey` is the file key - `1-2` is the node ID (the specific component or frame to implement) - **OR** when using `figma-desktop` MCP: User can select a node directly in the Figma desktop app (no URL required) - Project should have an established design system or component library (preferred) ## Required Workflow **Follow these steps in order. Do not skip steps.** ### Step 1: Get Node ID #### Option A: Parse from Figma URL **URL format:** `https://figma.com/design/:fileKey/:fileName?node-id=1-2` **Extract:** - **File key:** `:fileKey` (the segment after `/design/`) - **Node ID:** `1-2` (the value of the `node-id` query parameter) #### Option B: Use Current Selection from Figma Desktop App (figma-desktop MCP only) When 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. ### Step 2: Fetch Design Context Run `get_design_context` with the extracted file key and node ID. ``` get_design_context(fileKey=":fileKey", nodeId="1-2") ``` This provides the structured data including: - Layout properties (Auto Layout, constraints, sizing) - Typography specifications - Color values and design tokens - Component structure and variants - Spacing and padding values **If the response is too large or truncated:** 1. Run `get_metadata(fileKey=":fileKey", nodeId="1-2")` to get the high-level node map 2. Identify the specific child nodes needed from the metadata 3. Fetch individual child nodes with `get_design_context(fileKey=":fileKey", nodeId=":childNodeId")` ### Step 3: Capture Visual Reference Run `get_screenshot` with the same file key and node ID for a visual reference. ``` get_screenshot(fileKey=":fileKey", nodeId="1-2") ``` This screenshot serves as the source of truth for visual validation. Keep it accessible throughout implementation. ### Step 4: Download Required Assets Download any assets (images, icons, SVGs) returned by the Figma MCP server. **IMPORTANT:** Follow these asset rules: - If the Figma MCP server returns a `localhost` source for an image or SVG, use that source directly - DO NOT import or add new icon packages - all assets should come from the Figma payload - DO NOT use or create placeholders if a `localhost` source is provided - Assets are served through the Figma MCP server's built-in assets endpoint ### Step 5: Translate to Project Conventions Translate the Figma output into this project's framework, styles, and conventions. **Key principles:** - Treat the Figma MCP output (typically React + Tailwind) as a representation of design and behavior, not as final code style - Replace Tailwind utility classes with the project's preferred utilities or design system tokens - Reuse existing components (buttons, inputs, typography, icon wrappers) instead of duplicating functionality - Use the project's color system, typography scale, and spacing tokens consistently - Respect existing routing, state management, and data-fetch patterns ### Step 6: Achieve 1:1 Visual Parity Strive for pixel-perfect visual parity with the Figma design. **Guidelines:** - Prioritize Figma fidelity to match designs exactly - Avoid hardcoded values - use design tokens from Figma where available - When conflicts arise between design system tokens and Figma specs, prefer design system tokens but adjust spacing or sizes minimally to match visuals - Follow WCAG requirements for accessibility - Add component documentation as needed ### Step 7: Validate Against Figma Before marking complete, validate the final UI against the Figma screenshot. **Validation checklist:** - [ ] Layout matches (spacing, alignment, sizing) - [ ] Typography matches (font, size, weight, line height) - [ ] Colors match exactly - [ ] Interactive states work as designed (hover, active, disabled) - [ ] Responsive behavior follows Figma constraints - [ ] Assets render correctly - [ ] Accessibility standards met ## Implementation Rules ### Component Organization - Place UI components in the project's designated design system directory - Follow the project's component naming conventions - Avoid inline styles unless truly necessary for dynamic values ### Design System Integration - ALWAYS use components from the project's design system when possible - Map Figma design tokens to project design tokens - When a matching component exists, extend it rather than creating a new one - Document any new components added to the design system ### Code Quality - Avoid hardcoded values - extract to constants or design tokens - Keep components composable and reusable - Add TypeScript types for component props ## Common Issues and Solutions ### Issue: Figma output is truncated **Solution:** Use `get_metadata` to get the node structure, then fetch specific nodes individually with `get_design_context`. ### Issue: Design doesn't match after implementation **Solution:** Compare side-by-side with the screenshot from Step 3. Check spacing, colors, and typography values in the design context data. ### Issue: Assets not loading **Solution:** Verify the Figma MCP server's assets endpoint is accessible. The server serves assets at `localhost` URLs. Use these directly without modification. ### Issue: Design token values differ from Figma **Solution:** When project tokens differ from Figma values, prefer project tokens for consistency but adjust spacing/sizing to maintain visual fidelity. ## Additional Resources - [Figma MCP Server Documentation](https://developers.figma.com/docs/figma-mcp-server/) - [Figma MCP Server Tools and Prompts](https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/) - [Figma Variables and Design Tokens](https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma)