Agent skill · Figma
Figma Design to Code
Officialname: figma-design-to-code★ 2.1k (repo)pushed 2026-10-20SKILL.md on GitHubchecked 2026-10-24
Install
The skills CLI copies the skill into the folder of each agent you pick (Claude Code, Codex, Cursor, Copilot, Gemini CLI, OpenCode, Windsurf...). Add -g for all projects. Needs Node.js 22.20+. docs
npx skills add figma/mcp-server-guide --skill figma-design-to-code
Copy the skill folder into ~/.claude/skills (all projects) or .claude/skills (this repo). Claude Code picks it up without a restart. docs
npx skills add figma/mcp-server-guide --skill figma-design-to-code -a claude-code # or by hand: git clone --depth 1 https://github.com/figma/mcp-server-guide.git /tmp/figma-design-to-code-src cp -r /tmp/figma-design-to-code-src/skills/figma-design-to-code ~/.claude/skills/figma-design-to-code
Download the skill folder, zip it, then Customize > Skills > + > Create skill > Upload a skill. Code execution must be on (Settings > Capabilities). docs
git clone --depth 1 https://github.com/figma/mcp-server-guide.git /tmp/figma-design-to-code-src cp -r /tmp/figma-design-to-code-src/skills/figma-design-to-code ./figma-design-to-code zip -r figma-design-to-code.zip figma-design-to-code
Codex reads skills from .agents/skills in the repo or ~/.agents/skills. Type $ in Codex to use one. docs
npx skills add figma/mcp-server-guide --skill figma-design-to-code -a codex
gh skill (GitHub CLI 2.90+, preview) installs it for Copilot in VS Code, the CLI and the cloud agent. Copilot also reads .github/skills and ~/.copilot/skills. docs
gh skill install figma/mcp-server-guide figma-design-to-code
Cursor reads .cursor/skills, .agents/skills and ~/.cursor/skills (and .claude/skills). It does not install loose skills from a GitHub URL, so copy it in. docs
npx skills add figma/mcp-server-guide --skill figma-design-to-code -a cursor
Installs from the GitHub repo; --path picks this skill out of the repo. Default scope is user (all projects). docs
gemini skills install https://github.com/figma/mcp-server-guide.git --path skills/figma-design-to-code
OpenCode reads .opencode/skills, ~/.config/opencode/skills and the Claude and .agents folders. docs
npx skills add figma/mcp-server-guide --skill figma-design-to-code -a opencode
Windsurf (now Devin Desktop) reads .devin/skills, .windsurf/skills and ~/.codeium/windsurf/skills. docs
npx skills add figma/mcp-server-guide --skill figma-design-to-code -a windsurf
Pairs with the Figma MCP server: the server gives the agent the tools, the skill teaches it how to use them.
More from figma/mcp-server-guide
- Figma Code Connect: Creates Code Connect files that map Figma components to their real code snippets.
- Figma Generate Design: Recreates an app page or layout from code as a design inside Figma.
- Figma Use: Required primer for the Figma MCP write tool so edits to Figma files work reliably.
Other frontend & design skills
- Frontend Design · Anthropic
- Web Artifacts Builder · Anthropic
- shadcn/ui · shadcn
- React Composition Patterns · Vercel
- React Best Practices · Vercel
- React View Transitions · Vercel
- Web Design Guidelines · Vercel
- Web Performance Audit · Cloudflare
FAQ
How do I install the figma-design-to-code skill?+
Run npx skills add figma/mcp-server-guide --skill figma-design-to-code and pick your agents, or use the tab for your agent above. In Claude Code the skill ends up in ~/.claude/skills/figma-design-to-code/SKILL.md.
Which agents can use Figma Design to Code?+
Any agent that reads the Agent Skills format (SKILL.md): Claude Code, the Claude apps, Codex, GitHub Copilot, Cursor, Gemini CLI, OpenCode, Windsurf and more.
Who maintains Figma Design to Code?+
Figma, the company or project behind it, in the figma/mcp-server-guide repo on GitHub, last pushed 2026-10-20.
Read a skill's SKILL.md and scripts before you install it: skills aren't verified by any agent vendor. All agent skills · MCP servers