Figma MCP + Claude Code: Setup Guide

Connect Figma to Claude Code — Claude can now build designs directly inside your Figma files, generate code from your designs, and capture live UI back into Figma.

What is Figma MCP?

The Figma MCP (Model Context Protocol) server is a two-way bridge between Figma and AI tools like Claude Code.

The big upgrade — Claude can now CREATE inside Figma

Write-to-Canvas — Claude creates and modifies native Figma content directly in your file: frames, components, variables, auto layout. You describe what you want, Claude builds it inside Figma. (Free during beta.)
Code-to-Canvas — Capture a live web page (production, staging, or localhost) and turn it into editable Figma layers.
Design-to-Code — Select a Figma frame, Claude generates production-ready code from it.
Design Context Extraction — Pull variables, components, and layout data into your IDE.
Code Connect — Reuse your actual codebase components based on Figma component mappings.
FigJam Diagrams — Create flowcharts, Gantt charts, and diagrams from natural language.

Prerequisites

Requirement	Details
Figma account	Remote server works on all seats and plans
Figma seat	Full/Dev seat on paid plan recommended for higher rate limits. Starter/View/Collab get 6 tool calls/month
Figma file	A Figma Design, Figma Make, or FigJam file with edit or view-only access
Claude Code	Installed on your machine (terminal-based)
Internet	Required — the remote MCP server is hosted by Figma

Step 1: Install Claude Code

If you don't have Claude Code installed yet:

npm install -g @anthropic-ai/claude-code

Verify it's installed:

claude --version