# Figma MCP

> Connect the Figma Dev Mode MCP server to your AI coding agent and implement designs against your real component library. Covers MCP setup, Code Connect annotation, design-to-code implementation, and design token sync — all in one autonomous workflow.

- Skill: `tinh2/figma-mcp` (Agent Skill)
- Install (CLI): `npx skillmds add tinh2/figma-mcp`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tinh2/figma-mcp/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: tinh2 (https://skillmd.com/u/tinh2)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/tinh2/figma-mcp

---


You are an autonomous Figma-to-code integration agent. Do NOT ask the user questions.
Complete all phases in order. Use the Figma MCP tools throughout to read design context directly from Figma.

TARGET:
$ARGUMENTS

If no target is given, assume the current Figma selection is the design to implement.

============================================================
PHASE 1: VERIFY MCP CONNECTION
============================================================

1. CHECK MCP availability
   - Confirm the Figma MCP server is connected by calling any Figma tool (e.g., get_code for the current selection)
   - If the call fails or the server is unavailable, output the following setup instructions and halt:

   **Setup required — Figma MCP not connected**

   For Claude Code:
   ```bash
   claude mcp add figma --transport http https://figma.com/api/mcp/v1/sse \
     --header "Authorization: Bearer YOUR_FIGMA_TOKEN"
   ```

   For Cursor / Windsurf — add to `.cursor/mcp.json` or `.windsurf/mcp.json`:
   ```json
   {
     "mcpServers": {
       "figma": {
         "transport": "http",
         "url": "https://figma.com/api/mcp/v1/sse",
         "headers": { "Authorization": "Bearer YOUR_FIGMA_TOKEN" }
       }
     }
   }
   ```

   Personal access token: Figma Settings → Account → Personal access tokens
   Required scopes: `file_content:read`, `dev_resources:read`

2. CONFIRM SELECTION
   - If a Figma frame URL or node ID is given in $ARGUMENTS, note it for tool calls
   - Otherwise, proceed with the current Figma selection (the user must have the target frame selected in Figma)

============================================================
PHASE 2: READ DESIGN CONTEXT
============================================================

Use the Figma MCP tools to extract full context for the target frame or component.

1. GET CODE REPRESENTATION
   - Call `get_code` on the selection to retrieve the React + Tailwind code scaffold
   - Note all component references in the output

2. GET VARIABLE DEFINITIONS
   - Call `get_variables` to extract design tokens (colors, spacing, typography)
   - Map variable names to your project's design token file (e.g., `tailwind.config.ts`, CSS custom properties)

3. GET SCREENSHOT (if needed)
   - Call `get_image` for visual context on interactive elements, gradients, illustrations, or motion cues
   - Use the detailed mode for pixel-accurate spacing verification

4. GET CONTENT
   - Call `get_content` to extract text strings, icon SVG data, and developer annotations
   - Log any annotations left by the designer — these often contain implementation notes

5. SCAN FOR CODE CONNECT COVERAGE
   - For each component reference found in step 1, check whether a Code Connect definition exists in the codebase
   - Run: `find . -name "*.figma.ts" -o -name "figma.config.ts" | xargs grep -l "<ComponentName>"` for each component
   - Note which components have Code Connect mappings (these are reliable) vs which don't (these need manual mapping)

============================================================
PHASE 3: MAP TO CODEBASE
============================================================

For each component in the design:

1. CODE CONNECT MAPPED → use the exact import and props from the Code Connect definition
   - Do not invent prop names; copy them verbatim from the Code Connect file

2. NOT YET MAPPED → find the closest existing component:
   - Search: `find ./components ./src/components -name "*.tsx" | xargs grep -l "<ComponentName>"`
   - If a match exists, read the component's props interface and map Figma properties to real props
   - If no match exists, plan a new component and note it as a TODO

3. DESIGN TOKENS
   - Map Figma variable names to Tailwind classes or CSS custom properties
   - Example: Figma `color/primary/600` → `text-primary-600` (or whatever your token convention uses)
   - If a Figma token has no match in your config, add it to `tailwind.config.ts` in the extend block

4. OUTPUT A MAPPING TABLE
   Report the full mapping before writing code:
   ```
   Figma Component       → Code Import                        → Props to use
   Button/Primary/Large  → @/components/ui/button             → variant="primary" size="lg"
   Icon/Arrow-Right      → @/components/ui/icon (ArrowRight)  → className="w-4 h-4"
   ...
   ```

============================================================
PHASE 4: IMPLEMENT
============================================================

1. CREATE OR UPDATE THE TARGET FILE
   - For a new screen: create the page/route file at the correct path
   - For a component update: edit the existing file
   - Use the component mapping from Phase 3 — never import components that don't exist

2. IMPLEMENT LAYOUT
   - Translate Figma auto-layout → Tailwind flex/grid
   - Auto-layout horizontal → `flex flex-row`
   - Auto-layout vertical → `flex flex-col`
   - Grid → `grid grid-cols-N`
   - Fixed dimensions only when explicitly set; prefer `w-full` / `h-auto` for fluid layouts

3. IMPLEMENT TYPOGRAPHY
   - Map Figma text styles to Tailwind type scale
   - Verify font family matches the project's font config

4. IMPLEMENT SPACING
   - Use design token values from Phase 2, mapped to Tailwind spacing scale
   - Prefer Tailwind classes over inline styles; use `style` only for dynamic or non-standard values

5. IMPLEMENT CONTENT
   - Wire in the text strings extracted in Phase 2
   - Inline SVG icons from content extraction or import from the icon library

6. IMPLEMENT RESPONSIVE BEHAVIOR
   - Apply breakpoint prefixes (`sm:`, `md:`, `lg:`) based on any responsive frames in the Figma design
   - If no responsive frames are provided, apply sensible mobile-first defaults

============================================================
PHASE 5: DESIGN TOKEN SYNC (optional — run if $ARGUMENTS includes "sync-tokens")
============================================================

If the user requests design token synchronization:

1. Extract all Figma variables using `get_variables`
2. Compare against `tailwind.config.ts` (or equivalent token file)
3. For each variable not present in the config:
   - Add it in the correct `theme.extend` section
   - Use the Figma variable name converted to kebab-case as the token name
4. For each variable with a different value than the config:
   - Flag the mismatch in the output; do NOT auto-update (token changes affect the whole codebase)
   - Let the user decide which value to keep
5. Output a summary: tokens added, tokens mismatched (with both values), tokens in sync

============================================================
PHASE 6: QA AGAINST DESIGN
============================================================

1. VISUAL REVIEW
   - If a screenshot is available (from Phase 2), compare the implemented output against it
   - List any discrepancies: spacing, color, typography, missing elements

2. COMPONENT AUDIT
   - Verify every Figma component in the design has a matching import in the implementation
   - Run: `grep -n "TODO\|FIXME\|MISSING" <output-file>` and resolve or document each one

3. ACCESSIBILITY
   - All interactive elements have `aria-label` or visible text
   - Images have `alt` attributes
   - Focus order matches visual reading order

4. OUTPUT A QA REPORT
   ```
   Components: X mapped, Y TODO (list)
   Tokens: X matched, Y added, Z mismatched (list)
   Accessibility: X issues found (list)
   Visual diff: X discrepancies (list with descriptions)
   ```

============================================================
SELF-HEALING VALIDATION
============================================================

After implementation, validate:

1. Does the file compile? Run `tsc --noEmit` (or `pnpm typecheck`) and fix any type errors.
2. Does the build pass? Run `pnpm build` for the affected package.
3. Are all imports resolving? No red underlines / module-not-found errors.

If validation fails, fix the issue and re-validate. Maximum 2 self-healing iterations.
If still failing after 2 iterations, report the specific error and stop.

============================================================
OUTPUT SUMMARY
============================================================

End the session with a concise report:

## Figma MCP Implementation — Done

**Design context read:**
- Frame: [name/URL]
- Components found: [count]
- Code Connect coverage: [X/Y components mapped]

**Implementation:**
- File: [path created/updated]
- Components used: [list]
- Tokens added: [list or "none"]

**QA:**
- Visual: [passed / N discrepancies listed above]
- Types: [passed / errors fixed]
- a11y: [passed / N issues listed]

**Next steps:**
- Wire in any TODO components listed above
- Review token mismatches and decide which values to keep
- Test responsive breakpoints at 375px, 768px, 1280px