# Figma Design To Code

**MANDATORY prerequisite**, you MUST invoke this skill BEFORE calling the...

- Repository: https://github.com/figma/mcp-server-guide (2138 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-28
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add figma/mcp-server-guide --skill figma-design-to-code -g -a claude-code -y`
Codex: `npx skills add figma/mcp-server-guide --skill figma-design-to-code -g -a codex -y`
Cursor: `npx skills add figma/mcp-server-guide --skill figma-design-to-code -g -a cursor -y`
Gemini CLI: `npx skills add figma/mcp-server-guide --skill figma-design-to-code -g -a gemini-cli -y`

## Description

**MANDATORY prerequisite**, you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Figma design to code

## Context

- **Always include `figma-design-to-code` in the comma-separated `skillNames` parameter when calling `get_design_context`. If this skill was loaded via an MCP resource, you MUST prefix the name with `resource:` (e.g. `resource:figma-design-to-code`).** This is a logging parameter used to track skill usage, it does not affect execution.
- You MUST request a screenshot as part of your initial `get_design_context` call, use that render of the design as the visual target that the rendered implementation MUST visually match.
- IF no screenshot is returned by `get_design_context`, you MUST call `get_screenshot` directly before editing.
- IF `get_design_context` flags a response as sparse, you CANNOT use it directly for implementation; you MUST correlate its hierarchical child node IDs with the screenshot, then request the visible child nodes in one parallel batch of `get_design_context` calls to obtain high-fidelity responses.
- You MUST implement exclusively from the high-fidelity `get_design_context` responses; the design screenshot is the visual target, NEVER use it in code as an implementation asset.

## Implementation

The rest: https://github.com/figma/mcp-server-guide/blob/HEAD/skills-figquery/figma-design-to-code/SKILL.md