Figma MCP Server Setup Guide – Free Alternative for AI Design Editing

GitHub Repository: https://github.com/antonytm/figma-mcp-server
This is the unofficial, open-source Figma MCP server by antonytm that enables AI to EDIT Figma files (not just read them).

Overview

This guide documents how to set up the antonytm/figma-mcp-server – a free, open-source MCP server that allows AI tools like Claude Code to read AND edit Figma designs. Unlike Figma’s official MCP server (which is read-only and requires a paid plan), this solution works with free Figma accounts.

What You Can Do

Action	Supported
Read existing designs	✅
Understand layout/styles	✅
Create new frames	✅
Create shapes/text	✅
Modify properties	✅
Build wireframes	✅

Why This Solution? (The Key Insight)

The Problem

Figma’s REST API is READ-ONLY. You cannot edit Figma files through the API. This is why the official Figma MCP server can only read designs, not create or modify them.

The Solution: Figma Plugin + WebSocket Bridge

The Figma Plugin API (which runs inside Figma) CAN read and edit documents. But plugins run in a sandbox – you can’t call them from outside Figma.

antonytm’s solution: Use WebSockets as a bridge between the MCP Server and a Figma Plugin!

Architecture

┌─────────────────┐      ┌─────────────────┐      ┌─────────────────┐
│   Claude Code   │─────▶│   MCP Server    │─────▶│  Figma Plugin   │─────▶ Figma Document
│                 │ HTTP │  (localhost:    │  WS  │  (runs inside   │       (EDIT!)
│                 │      │   38450)        │      │   Figma)        │
└─────────────────┘      └─────────────────┘      └─────────────────┘

How It Works (Step by Step)

Claude Code sends a command (e.g., “create a rectangle”)
MCP Server receives the command via HTTP and adds it to a queue
MCP Server sends the command via WebSocket to the Figma Plugin
Figma Plugin (running inside Figma) listens for WebSocket messages
Figma Plugin executes the command using Figma’s Plugin API (CAN EDIT!)
Figma Plugin sends the result back via WebSocket
MCP Server returns the result to Claude Code

The Three Components

Component	What it does	Where it runs
MCP Server (`/mcp` folder)	Receives AI commands, manages queue	Your terminal
Figma Plugin (`/plugin` folder)	Executes commands in Figma	Inside Figma app
WebSocket	Connects MCP Server ↔ Plugin	localhost:38450

⚠️ This is why you need BOTH running:

❌ Only MCP Server → Connected clients: [] (no plugin to execute commands)
❌ Only Figma Plugin → “Not connected to MCP server” (no server to receive AI commands)
✅ Both running → AI can read AND edit Figma!

Prerequisites

Node.js installed
Figma Desktop App (free account works!)
Claude Code (or other MCP-compatible AI tool)
Terminal/Command Line access

Step 1: Clone the Repository

git clone https://github.com/antonytm/figma-mcp-server.git
cd figma-mcp-server

Step 2: Build the Figma Plugin

cd plugin
npm install
npm run build

Why “Build” the Plugin?

The plugin source code is written in TypeScript + React, but Figma can only run JavaScript + HTML.

What npm run build does:

Compiles TypeScript → JavaScript (Figma can’t read TypeScript)
Bundles React UI → single HTML file (the plugin window you see)
Outputs to /dist folder (what Figma actually loads)

The manifest.json points to the built files:

{
  "main": "dist/main.js",
  "ui": "dist/index.html"
}

Without building:

❌ No dist/main.js → Figma can’t run the plugin
❌ No dist/index.html → No plugin UI window

Step 3: Fix the Manifest (Important!)

The default manifest includes "dev" in editorType which requires a paid Figma plan. Edit plugin/manifest.json and change:

From:

"editorType": ["figma", "figjam", "dev"]

To:

"editorType": ["figma"]

Then rebuild:

npm run build

Step 4: Start the MCP Server

Open a new terminal and run:

cd figma-mcp-server/mcp
npm install
npm run start

You should see:

Server listening on http://localhost:38450
Connected clients: []

What this means:

✅ Server listening on http://localhost:38450 → MCP server is running
⏳ Connected clients: [] → MCP server is running but NOT yet connected to Figma Plugin (this is expected at this step – the plugin will connect in Step 5)

⚠️ Keep this terminal running!

Step 5: Import Plugin to Figma

Open Figma Desktop App
Open any design file
Make sure you’re in Design Mode (NOT Dev Mode) – Press Shift + D to toggle
Go to Plugins → Development → Import plugin from manifest…
Navigate to and select: figma-mcp-server/plugin/manifest.json
Run the plugin: Plugins → Development → Figma MCP Server
Keep the plugin window open!

You should see:

Plugin window: “Connected to MCP server” ✅
Terminal: Connected clients: ['f801xrkr3uc6cVLIAAAB'] ✅ (random ID means plugin connected!)

Step 6: Configure Claude Code

Run this command to add the MCP server to Claude Code at project scope:

claude mcp add figma --transport http --scope project http://localhost:38450/mcp

Or manually create/edit .mcp.json in your project root:

{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "http://localhost:38450/mcp"
    }
  }
}

⚠️ Important: Use type: "http" and url, NOT type: "stdio" and command!

Step 7: Verify Connection

In Claude Code, run:

/mcp

You should see:

❯ figma · ✓ connected

Figma MCP Edit Functions

Create Elements

Tool	Description
`mcp__figma__create-frame`	Create a new frame (x, y, width, height, name, parentId)
`mcp__figma__create-rectangle`	Create a rectangle (x, y, width, height, name, parentId)
`mcp__figma__create-text`	Create text element (x, y, text, fontSize, fontName, fontWeight, fontColor)
`mcp__figma__create-component`	Create a component (name, parentId)
`mcp__figma__create-instance`	Create instance of a component (componentId, x, y, name, parentId)
`mcp__figma__clone-node`	Clone/duplicate a node (id)

Modify Elements

Tool	Description
`mcp__figma__move-node`	Move frame to x, y position
`mcp__figma__resize-node`	Resize frame (id, width, height)
`mcp__figma__set-parent-id`	Move frame to different page/parent
`mcp__figma__set-fill-color`	Set fill color (id, color as #RRGGBBAA)
`mcp__figma__set-stroke-color`	Set stroke color (id, color as #RRGGBBAA)
`mcp__figma__set-corner-radius`	Set corner radius (id, cornerRadius, or individual corners)
`mcp__figma__set-layout`	Set auto-layout (mode, padding, spacing, alignment, sizing)

Component Properties

Tool	Description
`mcp__figma__add-component-property`	Add property to component (BOOLEAN, TEXT, INSTANCE_SWAP, VARIANT)
`mcp__figma__edit-component-property`	Edit existing component property
`mcp__figma__delete-component-property`	Remove component property
`mcp__figma__set-instance-properties`	Set properties on an instance
`mcp__figma__set-node-component-property-references`	Link node to component properties

Delete

Tool	Description
`mcp__figma__delete-node`	Delete a node (id)

Read-Only (for reference)

Tool	Description
`mcp__figma__get-pages`	List all pages
`mcp__figma__get-node-info`	Get frame/node details
`mcp__figma__get-selection`	Get current selection
`mcp__figma__get-all-components`	List all components

Usage Examples

Read Figma File

What's in my current Figma file?

Create Wireframe

Create a simple wireframe with a header, content area, and footer

Create Elements

Create a blue rectangle 300x200 pixels

Analyze and Recreate

Look at the LoginView frame and create a simplified wireframe version

Troubleshooting

❌ “Manifest error: editorType does not include dev”

Problem: You’re trying to run the plugin in Dev Mode.
Solution: Press Shift + D to switch to Design Mode, then run the plugin.

❌ “Connected clients: []” stays empty

Problem: Figma plugin not running or not connected.
Solution:

Make sure you’re in Design Mode (not Dev Mode)
Run the plugin: Plugins → Development → Figma MCP Server
Keep the plugin window open

❌ “Task timed out” error in Claude Code

Problem: MCP server can’t reach Figma plugin.
Solution:

Check terminal – MCP server should be running
Check Figma – plugin window should show “Connected to MCP server”
Both must be running simultaneously

❌ Claude Code shows “figma · ✗ failed”

Problem: Wrong MCP configuration.
Solution: Check your .mcp.json:

✅ Correct:

{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "http://localhost:38450/mcp"
    }
  }
}

❌ Wrong:

{
  "mcpServers": {
    "figma": {
      "type": "stdio",
      "command": "http://localhost:38450/mcp"
    }
  }
}

Key Points to Remember

Keep three things running: Terminal with MCP server (npm run start), Figma plugin window (don’t close it!), Claude Code
Stay in Design Mode – Plugin doesn’t work in Dev Mode
MCP config uses http type, not stdio
Free Figma account works! – Just remove "dev" from editorType

Comparison: Official vs This Solution

Feature	Official Figma MCP	antonytm/figma-mcp-server
Cost	Paid plan required	Free
Read designs	✅	✅
Edit designs	❌	✅
Create elements	❌	✅
Requires Dev Mode	✅	❌
Open Source	❌	✅

Resources

GitHub Repo: https://github.com/antonytm/figma-mcp-server
License: Apache-2.0 (Open Source)
Alternative (read-only): https://github.com/GLips/Figma-Context-MCP

Last Updated: January 2026

Overview

What You Can Do

Why This Solution? (The Key Insight)

The Problem

The Solution: Figma Plugin + WebSocket Bridge

Architecture

How It Works (Step by Step)

The Three Components

⚠️ This is why you need BOTH running:

Prerequisites

Step 1: Clone the Repository

Step 2: Build the Figma Plugin

Why “Build” the Plugin?

Step 3: Fix the Manifest (Important!)

Step 4: Start the MCP Server

Step 5: Import Plugin to Figma

Step 6: Configure Claude Code

Step 7: Verify Connection

Figma MCP Edit Functions

Create Elements

Modify Elements

Component Properties

Delete

Read-Only (for reference)

Usage Examples

Read Figma File

Create Wireframe

Create Elements

Analyze and Recreate

Troubleshooting

❌ “Manifest error: editorType does not include dev”

❌ “Connected clients: []” stays empty

❌ “Task timed out” error in Claude Code

❌ Claude Code shows “figma · ✗ failed”

Key Points to Remember

Comparison: Official vs This Solution

Resources

Leave a Comment Cancel Reply