figma-design-to-code
**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.
Install
With your agent
Install OMGSkills skill "figma/dev-mode-mcp-server-guide:figma-implement-design" into this agent's normal skills directory: call the OMGSkills MCP get_install_plan tool for your agent and run the script it returns (it installs only the pinned commit and verifies SKILL.md), and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.
Manual command
git clone https://github.com/figma/mcp-server-guide /tmp/mcp-server-guide && ln -s /tmp/mcp-server-guide/skills/figma-design-to-code ~/.claude/skills/figma-design-to-codeFrom README
Figma design to code Context Always include figma-design-to-code in the comma-separated skillNames parameter when calling getdesigncontext. 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 — it does not affect execution. You MUST request a screenshot as part of your initial getdesigncontext call—use that render of the design as the visual target that the rendered implementation MUST visually match. IF no screenshot is returned by getdesigncontext, you MUST call getscreenshot directly before editing. IF getdesigncontext 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 getdesigncontext calls to obtain high-fidelity responses.
More from this repo
figma-generate-design
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section...
figma-use
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call.
figma-code-workflows
Import or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or...