**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'.
Install
npx skills add figma/mcp-server-guide --skill figma-design-to-codenpx skills add figma/mcp-server-guide --skill figma-design-to-code -a claude-code -gnpx skills add figma/mcp-server-guide --skill figma-design-to-code -a codex -ggemini skills install https://github.com/figma/mcp-server-guide.git --path skills-figquery/figma-design-to-codegh skill install figma/mcp-server-guide figma-design-to-codegit clone --depth 1 https://github.com/figma/mcp-server-guide /tmp/figma__mcp-server-guide
mkdir -p ~/.claude/skills ~/.agents/skills
cp -R /tmp/figma__mcp-server-guide/skills-figquery/figma-design-to-code ~/.claude/skills/figma-design-to-code # Claude Code
cp -R /tmp/figma__mcp-server-guide/skills-figquery/figma-design-to-code ~/.agents/skills/figma-design-to-code # Codex, Cursor, Gemini CLI, Copilot, OpenCode