Skip to content

Figma Design to Code

Implement Figma frames as production code using Figma's official MCP server.

Official vendorby FigmaChecked October 18, 2026

Figma's official skill for turning a Figma design into code with its MCP server. It tells Claude how to pull the right design context, map it to your components and verify the result against the original frame.

Who it is for

  • Frontend developers
  • Designers who code
  • Product teams

Prompts to try

Once the skill is installed, ask for the result in plain words. Claude picks the skill up on its own.

Prompt 1
Implement this Figma frame as a React component: <figma link>
Prompt 2
Build the pricing page from our Figma file using our existing button components
Prompt 3
Turn this Figma mobile screen into SwiftUI

How to install it

In Claude Code

  1. /plugin install figma@claude-plugins-official

In Claude.ai

Not documented: Figma's listing in the Claude plugin directory offers only a Claude Code install.

Good to know

The Figma plugin bundles more skills, including writing to the canvas, design systems, FigJam and Slides.

Unlock the install steps

Free. Leave your email once to open the install steps for all 149 skills, and get the best new skills each month.

No spam. One click to unsubscribe. We use your email to send you the course and AI tips.

How we checked it

Confirmed SKILL.md at skills/figma-design-to-code/SKILL.md in figma/mcp-server-guide via the GitHub API; skill folder last changed 2026-09-21, repo has 2,082 stars and was pushed 2026-10-15; the Figma plugin in Anthropic's official marketplace points to this repo.

Source: github.com/figma/mcp-server-guide/tree/main/skills/figma-design-to-code

More design and front end skills