Figma MCP Connection with Claude Code

Successfully connected Figma’s MCP server to Claude Code on December 27, 2025.

What is MCP?

MCP (Model Context Protocol) is an open standard that allows AI assistants like Claude to connect to external services and fetch context directly. In this case, it allows Claude Code to read Figma designs, components, and design tokens.

Setup Summary

Prerequisites

Figma Desktop App installed
Claude Code installed
MCP server enabled in Figma

Connection Command

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Verification

Check connected servers:

claude mcp list

You should see figma-desktop with a green checkmark indicating it’s connected.

How to Enable MCP in Figma

Open Figma Desktop App
Go to Preferences (⌘ + ,)
Scroll down to find “Enable Dev Mode MCP server”
Check the box to enable it
The server will run at http://127.0.0.1:3845/mcp

Using Figma MCP with Claude Code

Example Prompts

Fetch design context:

Get the design context from my Figma project AdventureVictoria

Implement a specific screen:

Implement the map screen from this Figma design:
https://www.figma.com/design/RZCJw60n7wgWTN4jMYfkoy/AdventureVictoria

Extract design variables:

Extract all colors, fonts, and spacing from the AdventureVictoria Figma project

Implement a component:

Implement the map marker component from my Figma file

MCP Prompt Examples in Figma

When you select a design element in Figma Dev Mode, the MCP panel shows these prompt options:

Implement design – Implements the entire selected design
Implement component – Focuses on just the selected component
Make implementation plan – Creates a step-by-step implementation plan
Get variables and styles – Extracts design tokens (colors, fonts, spacing)
Create design system rules – Generates design system documentation

Key Features

What you can do:

Fetch design specs from any Figma file you have access to
Extract design tokens, variables, and styles
Get detailed component specifications
Implement designs with Claude Code’s assistance
Access entire project context or individual screens

Available on Free Tier:

Yes! The Figma MCP server is available on the free tier
Runs locally on your machine
No subscription required

Configuration Files

MCP Config locations:

User config (available in all projects): /Users/chrislee/.claude.json
Project config (shared via .mcp.json): /project-directory/.mcp.json
Local config (private to you in this project): Listed in ~/.claude.json project section

Tips

Always make sure Figma Desktop app is running for the MCP server to work
Use Dev Mode in Figma to see MCP panel options
Select entire project/page for full context, or specific components for focused implementation
The “Allow In-Context Code Connect” option should be enabled in Figma MCP settings

Resources

Related Tools

FigJam – Collaborative whiteboarding (3 free boards)
Figma Dev Mode – Developer-focused view with code snippets and specs
Notion MCP – Also connected for documentation workflow

Claude Code MCP Hub – Overview of all MCP integrations
What is Claude Code Plugin? – Understanding plugins and marketplaces