figma-implement-design · davila7 — Claude Code skill for Figma-to-code
Turns a Figma node into code that fits your project: pulls the design context, a screenshot and assets over Figma MCP, then maps them onto your components and tokens.
npx claude-code-templates@latest --skill creative-design/figma-implement-designWhat figma-implement-design does
The skill lays out a fixed sequence. The agent reads the file key and node ID from a Figma link, or takes the selected layer in the desktop app, and calls get_design_context for auto layout, sizing, typography, colours and component structure. get_screenshot gives a picture to compare against later, and images or SVGs come straight from the MCP response.
What the server returns is treated as a spec, not as finished code. The default React and Tailwind output gets rewritten against the project's tokens and existing parts, so buttons and wrappers are reused rather than cloned. Large responses are handled by asking get_metadata first and then fetching the child nodes that matter.
None of this runs without a Figma MCP connection, and the skill includes a setup step for it: codex mcp add figma --url https://mcp.figma.com/mcp, enabling rmcp_client in config.toml, logging in with codex mcp login figma and restarting. That points at Codex tooling, even though the skill ships in a Claude catalogue. Picking a layer instead of pasting a URL only works with figma-desktop; the remote server needs a node link.
What it helps with
- build a component from a Figma node link
- read spacing, type and colour values off a frame
- swap MCP Tailwind classes for the project's tokens
- check a finished screen against the Figma screenshot
Example prompts for the agent
- Build the button from the design and reuse our existing components
- Compare the page with the node screenshot and fix the mismatches
How to install figma-implement-design
1claude-code-templates
npx claude-code-templates@latest --skill creative-design/figma-implement-design2Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill figma-implement-design -a claude-code3Manually: put the files in place
~/.claude/skills/figma-implement-design/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/figma-implement-design/
Manually: put the files in place
.agents/skills/figma-implement-design/SKILL.mdFor all projects use ~/.agents/skills/
Manually: put the files in place
.cursor/skills/figma-implement-design/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates figma-implement-design2Manually: put the files in place
.github/skills/figma-implement-design/SKILL.mdPlatform CLI
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/figma-implement-designManually: put the files in place
.devin/skills/figma-implement-design/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about figma-implement-design
How do I install figma-implement-design in Claude Code?
Run npx claude-code-templates@latest --skill creative-design/figma-implement-design, or npx skills add davila7/claude-code-templates --skill figma-implement-design -a claude-code. The skill lands at ~/.claude/skills/figma-implement-design/SKILL.md.
What does figma-implement-design do?
It walks the agent from a Figma node to code: design context, screenshot, assets, translation to the project's components and tokens, then a check against the design.
What is required for the skill to work?
A connected Figma MCP server and a node URL in the form https://figma.com/design/:fileKey/:fileName?node-id=1-2. With figma-desktop you can instead select a layer in the open file.
Similar skills
Everything for Design →figma-implement-design by other authors comes first.
