Figma MCP for Free Plan
Connect Claude to Figma with zero friction.
What it can do
- Get Document Info: Get detailed information about the current Figma document
- Get Selection: Get information about the current selection in Figma
- Get Node Info: Get detailed information about a specific node in Figma
What data it sees
Do you need an account
No: the server works without sign-in
Connect Claude to Figma with zero friction. No paid plan. No channel ID copy-paste. Just works.
✦ 100+ tools for Figma automation ✦ Auto-connect — Claude detects your open file ✦ Multi-file editing — work on several files at once, by file name (no channel IDs) ✦ Design system sync, page manager, code→Figma ✦ Free Figma plan supported
───────────────────────────── 📋 Before you start (Prerequisites)
• Node.js 18+ → check in terminal: node -v (install: nodejs.org) • Figma DESKTOP app → not the browser version (figma.com/downloads) • Claude Desktop → claude.ai/download
No Python or other runtime needed — npx/npm come with Node.js.
───────────────────────────── ⚡ Quick Start
▶ Step 1 — Install the MCP + download the plugin Run in your terminal: npx figma-free-mcp@latest setup This auto-registers the MCP in Claude Desktop and downloads the Figma plugin to: ~/.figma-free-mcp/plugin/ (Tip: the terminal prints the exact path — copy it for Step 2.)
▶ Step 2 — Register the plugin in Figma (one time only)
- Open the Figma DESKTOP app (not the browser)
- Menu → Plugins → Development → Import plugin from manifest...
- Select this file: ~/.figma-free-mcp/plugin/manifest.json
• Can't see the folder? In the file dialog press ⌘⇧G (Mac) / Ctrl+L (Windows) and paste the path above. • You only do this once — Figma remembers it afterwards.
▶ Step 3 — Start the relay server (keep it running) The relay connects Claude ↔ Figma. Run in a terminal and LEAVE IT OPEN: figma-free-mcp socket ⚠️ Start this BEFORE opening the plugin in Step 4.
▶ Step 4 — Open the plugin in your Figma file In Figma: Plugins → Figma Free MCP It auto-connects to the relay — no channel ID needed.
✅ Done! Now just talk to Claude: "Figma에 버튼 컴포넌트 만들어줘" / "중복 페이지 정리해줘"
───────────────────────────── 🗂️ Editing multiple files at once
- Open each file and run the plugin in it (one plugin instance per file — a Figma limitation: a plugin can only touch the file it runs in).
- Ask Claude by file name, e.g. "add a button to the Order file, a header to the Billing file" Claude routes each command to the right file — still no channel IDs.
───────────────────────────── 🛠️ Troubleshooting
• Plugin shows "Disconnected" → make sure Step 3 (relay) is running. • "Port 3055 already in use" → free it: lsof -ti:3055 | xargs kill • "command not found: npx" → install Node.js first (nodejs.org). • Updated to a new version? → re-run npx figma-free-mcp@latest setup then re-import the plugin in Figma. • Multiple files, wrong target? → ask Claude to "list active channels" to see each file by name.
───────────────────────────── 📖 Full docs → github.com/haju-xp/figma-free-mcp
───────────────────────────── ⚠️ License & Usage
✅ Personal & commercial use allowed ✅ Modification allowed ❌ Claiming as your own work prohibited ❌ Removing author credit prohibited
© 2026 haju, All rights reserved for branding.
How to connect
How to connect Figma MCP for Free Plan to Claude
The server address to paste into Claude settings:
https://figma-free-mcp--haju-xp.run.tools
- Open Claude (claude.ai or the desktop app).
- Go to Settings → Connectors.
- Click Add custom connector.
- Paste the server address copied below into Remote MCP server URL and click Add.
- In a chat, click + → Connectors and switch the new connector on.
Custom connectors are available on Free, Pro, Max, Team and Enterprise plans (Free is limited to one). On Team and Enterprise an organization Owner adds the connector first under Organization settings → Connectors.
Authorization
After you click Add, a sign-in window for the service opens. Sign in with your own account and approve access. Claude never sees your password.
How to connect Figma MCP for Free Plan to ChatGPT
The server address to paste into ChatGPT settings:
https://figma-free-mcp--haju-xp.run.tools
- Open ChatGPT in a browser (chatgpt.com). A Plus, Pro, Business, Enterprise or Edu plan is required.
- Turn on developer mode once: Settings → Apps → Advanced settings → Developer mode.
- Open Settings → Connectors and click Create.
- Fill in the form: Name (anything), Description (one line about what the service does), MCP server URL (copy it below).
- Under Authentication choose OAuth if the service requires sign-in, otherwise None. Click Create.
- In a new chat open + → Apps/Connectors and enable the connector.
OpenAI has renamed this section before (Connectors → Apps/Plugins). If the label differs, search settings for "developer mode". On Business/Enterprise workspaces an admin must allow custom connectors first.
Authorization
On first use ChatGPT opens the service's sign-in window. Sign in and approve access.
How to connect Figma MCP for Free Plan to Cursor
The server address to paste into Cursor settings:
https://figma-free-mcp--haju-xp.run.tools
Fastest: click Open in Cursor below and confirm the prompt.
Manually:
- In Cursor open Settings → Cursor Settings → MCP and click Add new global MCP server.
- Paste the JSON copied below into
~/.cursor/mcp.json(per project:.cursor/mcp.jsonin the repo root). - Save the file. The server appears in the MCP list; authorize it there if asked.
Authorization
If the service needs sign-in, an authorize button appears next to the server in the MCP list.
Server tool list (60)
Raw names from tools/list. Only developers need these.
| get_document_info | Get detailed information about the current Figma document |
| get_selection | Get information about the current selection in Figma |
| get_node_info | Get detailed information about a specific node in Figma |
| get_nodes_info | Get detailed information about multiple nodes in Figma |
| get_styles | Get all styles from the current Figma document |
| get_local_components | Get all local components from the Figma document |
| get_remote_components | Get available components from team libraries in Figma |
| scan_text_nodes | Scan all text nodes in the selected Figma node |
| join_channel | Join a specific channel to communicate with Figma |
| export_node_as_image | Export a node as an image from Figma |
| create_page | Create a new page in the current Figma document |
| delete_page | Delete a page from the current Figma document |
| rename_page | Rename an existing page in the Figma document |
| get_pages | Get all pages in the current Figma document |
| set_current_page | Switch to a specific page in the Figma document |
| duplicate_page | Duplicate an existing page in the Figma document, creating a complete copy of all its contents |
| create_rectangle | Create a new rectangle in Figma |
| create_frame | Create a new frame in Figma |
| create_text | Create a new text element in Figma |
| create_ellipse | Create a new ellipse in Figma |
| create_polygon | Create a new polygon in Figma |
| create_star | Create a new star in Figma |
| group_nodes | Group nodes in Figma |
| ungroup_nodes | Ungroup nodes in Figma |
| clone_node | Clone an existing node in Figma |
| insert_child | Insert a child node inside a parent node in Figma |
| flatten_node | Flatten a node in Figma (e.g., for boolean operations or converting to path) |
| boolean_operation | Perform a boolean operation (union, subtract, intersect, exclude) on two or more nodes. All nodes must share the same parent. |
| set_fill_color | Set the fill color of a node in Figma. Alpha component defaults to 1 (fully opaque) if not specified. Use alpha 0 for fully transparent. |
| set_stroke_color | Set the stroke color of a node in Figma (defaults: opacity 1, weight 1) |
| set_selection_colors | Recursively change all stroke and fill colors of a node and all its descendants. Works like Figma's 'Selection colors' feature - perfect for recoloring icon instances. |
| move_node | Move a node to a new position in Figma |
| resize_node | Resize a node in Figma |
| delete_node | Delete a node from Figma |
| set_corner_radius | Set the corner radius of a node in Figma |
| set_auto_layout | Configure auto layout properties for a node in Figma |
| set_effects | Set the visual effects of a node in Figma |
| set_effect_style_id | Apply an effect style to a node in Figma |
| rotate_node | Rotate a node in Figma by a specified angle in degrees (clockwise). Use relative=true to add to the current rotation instead of setting an absolute value. Note: locked nodes can still be rotated — the Plugin API bypasses the UI lock by design. |
| set_node_properties | Set visibility, lock state, and/or opacity of a node in Figma. Only provided properties are changed; omitted properties remain unchanged. |
| reorder_node | Change the z-order (layer order) of a node within its parent. Distinct from insert_child which re-parents a node — reorder_node changes position within the same parent. |
| convert_to_frame | Convert a group or shape node into a frame in Figma. Preserves position, size, visual properties, and children. Useful for converting groups into auto-layout-capable frames. |
| set_gradient | Set a gradient fill on a node in Figma. Supports linear, radial, angular, and diamond gradients. Replaces all existing fills (same behavior as set_fill_color). |
| set_image | Set an image fill on a node from base64-encoded image data. Supports PNG, JPEG, GIF, WebP. Max ~5MB after decode. |
| set_grid | Apply layout grids to a frame node in Figma. Supports columns, rows, and grid patterns. |
| get_grid | Read layout grids from a frame node in Figma |
| set_guide | Set guides on a page in Figma. Replaces all existing guides on the page. |
| get_guide | Read guides from a page in Figma |
| set_annotation | Add an annotation label to a node in Figma. Uses the proposed Annotations API — requires Figma Desktop with enableProposedApi. |
| get_annotation | Read annotations from a node in Figma. Uses the proposed Annotations API. |
| rename_node | Rename a node (frame, component, group, etc.) in Figma |
| set_text_content | Set the text content of an existing text node in Figma |
| set_multiple_text_contents | Set multiple text contents parallelly in a node |
| set_font_name | Set the font name and style of a text node in Figma |
| set_font_size | Set the font size of a text node in Figma |
| set_font_weight | Set the font weight of a text node in Figma |
| set_letter_spacing | Set the letter spacing of a text node in Figma |
| set_line_height | Set the line height of a text node in Figma |
| set_paragraph_spacing | Set the paragraph spacing of a text node in Figma |
| set_text_case | Set the text case of a text node in Figma |