MCP ★ 1.1k ⬇ 88.3k

Figma MCP

Claude Plugins → figma/mcp-server-guide →
#Figma#design#UI#code generation

Updated

💡

Official Figma MCP server. Read design files, convert designs to code, and write back to the Figma canvas — all from Claude Code.

🔓
Design-to-code conversion Capability
Installation · plugin marketplace (claude-plugins-official)
$ /plugin install figma

Official Figma MCP server

What it does

The official Figma MCP server lets Claude Code read from and write to your Figma files. Pull layout, colors, typography, and components straight out of a design, convert them to production code, and optionally push structured updates back to the canvas.

Features

  • Canvas read/write — browse Figma designs and create/update content directly
  • Code conversion — convert selected frames into frontend code
  • Variables / components extraction — pull design tokens, component properties, and layout data
  • Code Connect — link existing code components to Figma components for reuse
  • Web → Figma — turn web pages into Figma designs

Use cases

  1. Turn a Figma spec directly into a React/Tailwind component.
  2. Extract variables and tokens from a design system and apply them across your code.
  3. Reverse-convert an existing web page into a Figma design to clean up the design system.

When to use it

  • Implement a design spec without manually copying colors/spacings from the inspector
  • Generate component libraries mapped 1:1 to your Figma components
  • Keep design tokens in sync between Figma variables and code

Frequently Asked Questions

What is Figma MCP?

Figma's official MCP server. From Claude Code you can read Figma designs, convert frames into frontend code, and write back to the canvas.

Where does it run?

Claude Code, Claude Desktop, VS Code, and Cursor.

How do I install it?

In Claude Code, run `/plugin install figma`. It's listed on the claude-plugins-official marketplace.

What can it do?

Read and write the canvas, convert selected frames into frontend code, extract design tokens and component properties, link existing code components via Code Connect, and convert web pages back into Figma designs.

When is it most useful?

Turning Figma frames into React/Tailwind components, applying design system tokens across code, and reverse-converting existing web pages into Figma to formalize a design system.