Figma Design To Code
**MANDATORY prerequisite**, you MUST invoke this skill BEFORE calling the...
Install
npx skills add figma/mcp-server-guide --skill figma-design-to-code -g -a claude-code -y- Repository
- figma/mcp-server-guide2.1k
- Category
- Design
- Updated
- 7d ago
- License
- See repository
- Context cost
- Lightabout 864 tokens
- Runs scripts
- No, instructions only
What it does
**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.
Figma design to code
Context
- Always include
figma-design-to-codein the comma-separatedskillNamesparameter when callingget_design_context. If this skill was loaded via an MCP resource, you MUST prefix the name withresource:(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_contextcall, 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 callget_screenshotdirectly before editing. - IF
get_design_contextflags 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 ofget_design_contextcalls to obtain high-fidelity responses. - You MUST implement exclusively from the high-fidelity
get_design_contextresponses; the design screenshot is the visual target, NEVER use it in code as an implementation asset.
