figma-free-mcp
Enables Claude to connect to Figma without a paid plan, offering auto-connect and 100+ tools for document manipulation, design system sync, and code-to-Figma conversion.
README
π¨ Figma MCP for Free Plan
https://smithery.ai/servers/haju-xp/figma-free-mcp
Connect Claude to Figma with zero friction. No paid plan. No channel ID copy-paste. Just works.
β¨ Why this exists
| Figma Official MCP | ClaudeTalkToFigma | figma-free-mcp | |
|---|---|---|---|
| Free plan | β Paid only | β | β |
| Auto-connect | β | β Manual channel ID | β Auto-detect |
| Tools | Many | 70+ | 100+ |
| One-line install | β | β | β |
π Quick Start (3 steps)
Step 1 β Install MCP + download plugin
npx figma-free-mcp@latest setup
This will:
- β Register MCP in Claude Desktop automatically
- β
Download the Figma plugin to
~/.figma-free-mcp/plugin/ - β Show you the exact manifest path
Step 2 β Install the Figma plugin (one-time)
- Open Figma Desktop
- Menu β Plugins β Development β Import plugin from manifest...
- Select the path shown in Step 1:
C:\Users\[YourName]\.figma-free-mcp\plugin\manifest.json - Run "Figma Free MCP" plugin in Figma β it auto-connects!
Step 3 β Start the relay server
Open a terminal and keep it running:
npx --package figma-free-mcp figma-free-mcp-socket
β οΈ Keep this terminal open while using Claude with Figma.
π¬ Usage
Once everything is running, just talk to Claude naturally:
"Figmaμ λ²νΌ μ»΄ν¬λνΈ λ§λ€μ΄μ€"
"μ€λ³΅ νμ΄μ§ μ°Ύμμ μ 리ν΄μ€"
"globals.css μμ ν ν°μ Figma λ³μλ‘ μ±ν¬ν΄μ€"
"μ΄ React μ»΄ν¬λνΈλ₯Ό Figma νλ μμΌλ‘ λ³νν΄μ€"
Claude automatically detects your open Figma file β no channel ID needed!
π οΈ All Tools (100+)
π Auto-Connect
| Tool | Description |
|---|---|
auto_connect |
Auto-detect active Figma sessions and connect |
list_active_channels |
List all open Figma plugin sessions |
π Document & Pages
get_document_info, get_pages, get_selection, get_node_info, get_nodes_info, scan_text_nodes, get_styles, get_local_components, get_remote_components, get_variables and more
πΌοΈ Creation
create_frame, create_rectangle, create_ellipse, create_text, create_page, create_component_from_node, create_component_instance, create_component_set and more
βοΈ Modification
set_fill_color, set_stroke_color, set_text_content, set_font_size, set_corner_radius, set_auto_layout, move_node, resize_node, delete_node, clone_node and more
π¨ Design System Sync
| Tool | Description |
|---|---|
sync_css_to_figma |
CSS variables β Figma variable collections |
sync_figma_to_css |
Figma variables β CSS custom properties |
compare_design_tokens |
Diff report between CSS and Figma |
apply_design_system |
Apply design policy doc to Figma |
audit_design_consistency |
Find policy violations in Figma file |
π Page Manager
| Tool | Description |
|---|---|
list_all_pages_detailed |
All pages + frame count + duplicate detection |
deduplicate_pages |
Auto-merge/remove duplicate pages |
organize_pages |
Sort pages by number or alphabetically |
cleanup_empty_pages |
Remove empty pages |
β‘ Code to Figma
| Tool | Description |
|---|---|
react_to_figma |
React/TSX component β Figma frame |
css_class_to_figma_style |
CSS classes β Figma local styles |
generate_component_variants |
Generate hover/active/disabled variants |
ποΈ Architecture
Claude Desktop
β
β stdio (MCP)
βΌ
figma-free-mcp server (100+ tools)
β
β WebSocket (port 3055)
βΌ
Figma Plugin (auto-connect)
β
β Figma API
βΌ
Your Figma File β¨
βοΈ Commands Reference
# Install & register MCP
npx figma-free-mcp@latest setup
# Start WebSocket relay server
npx --package figma-free-mcp figma-free-mcp-socket
# Uninstall
npx figma-free-mcp@latest uninstall
π Upgrading from v1.0.7 or earlier
βββββββββββββββββββββββββββββ
If you see a recurring "MCP figma-free-mcp-socket: Server disconnected" error in Claude Desktop, run this once:
npx figma-free-mcp@latest setup
Then restart Claude Desktop. The error will be gone.
βββββββββββββββββββββββββββββ
β FAQ
Q. Do I need a paid Figma plan? A. No. Works with free Figma accounts.
Q. Do I need Claude Pro? A. Any Claude Desktop plan works.
Q. The plugin shows "Disconnected"
A. Make sure the relay server is running: npx --package figma-free-mcp figma-free-mcp-socket
Q. Multiple Figma files are open A. Claude will ask which file to connect to.
Q. Port 3055 is already in use
A. Kill the existing process: netstat -ano | findstr :3055 then taskkill /PID [number] /F
β οΈ License & Usage
MIT License β free to use and modify.
β Personal & commercial use allowed β Modification allowed β Claiming as your own work prohibited β Removing author credit prohibited
Β© 2026 haju-xp
π Credits
Built on top of claude-talk-to-figma-mcp by arinspunk (MIT License).
Recommended Servers
playwright-mcp
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
Magic Component Platform (MCP)
An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
Audiense Insights MCP Server
Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.
VeyraX MCP
Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.
graphlit-mcp-server
The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.
Kagi MCP Server
An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.
E2B
Using MCP to run code via e2b.
Neon Database
MCP server for interacting with Neon Management API and databases
Qdrant Server
This repository is an example of how to create a MCP server for Qdrant, a vector search engine.
Exa Search
A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.