Official Figma MCP Connection (Read-Only)

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.

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

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

Project Details

Project Name: AdventureVictoria
Project URL: https://www.figma.com/design/RZCJw60n7wgWTN4jMYfkoy/AdventureVictoria

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?node-id=1011-883

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

Connected MCP Servers

Currently connected servers in Claude Code:

canva (disconnected – needs login)
figma-desktop ✅ (connected)
firecrawl-mcp ✅ (connected)
notion ✅ (connected)
ocr-server ✅ (connected)

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): ~/.claude.json
Project config (shared via .mcp.json): project-level .mcp.json
Local config (private to you in this project): ~/.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

Note created: December 27, 2025

Want to EDIT Figma files with AI? See the Figma MCP Server Setup Guide – Free Alternative for AI Design Editing for the antonytm/figma-mcp-server which allows creating and modifying designs (not just reading).