karthikyaddana/figma-mcp-free

Developer tools

이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기

20 stars 3 forks 품질 77 트렌드 14MIT

Repository Install

MCP server + Figma plugin that streams live design data to AI coding tools — no API rate limits

개요

A plugin + MCP server that streams live Figma document data to AI coding tools without hitting Figma's REST API rate limits. Figma's free-tier API limits are brutal (a handful of requests per month), so I built this to bypass that entirely — the plugin reads directly from the Figma canvas and streams data over a local WebSocket to the MCP server. Clone the repo and run the installer — it detects every installed AI tool and configures them all in one shot. The installer: - Builds the MCP server from source - Auto-detects and configures: , , , , , , , - Skips tools that aren't installed (re-run after installing any new tool) - Prints the plugin install path Then in Figma: → select plugin/manifest.json.

README

원문 README의 일부입니다. 원문 보기.

Figma MCP Free

Install
Features
Manual Setup
Tools
Structure
How It Works

A plugin + MCP server that streams live Figma document data to AI coding tools without hitting Figma’s REST API rate limits. Figma’s free-tier API limits are brutal (a handful of requests per month), so I built this to bypass that entirely — the plugin reads directly from the Figma canvas and streams data over a local WebSocket to the MCP server.

Install

Automatic (recommended)

Clone the repo and run the installer — it detects every installed AI tool and configures them all in one shot.

macOS / Linux

git clone https://github.com/slashdoodleart/figma-mcp-free.git
cd figma-mcp-free
chmod +x install.sh && ./install.sh

Windows (PowerShell)

git clone https://github.com/slashdoodleart/figma-mcp-free.git
cd figma-mcp-free
.\install.ps1

The installer:

Builds the MCP server from source
Auto-detects and configures: Claude Desktop, Claude Code, Cursor, VS Code, VS Code Insiders, Windsurf, Gemini Code (Antigravity), Zed
Skips tools that aren’t installed (re-run after installing any new tool)
Prints the plugin install path

Then in Figma: Plugins → Development → Import plugin from manifest → select plugin/manifest.json.

Features

Zero API calls — reads directly from the Figma plugin API, no REST API tokens needed
Full design extraction — layout (auto-layout → flexbox), typography (with accurate font weights + mixed text segments), fills (solid, gradient, image with variable bindings), effects (shadows, blurs → CSS), constraints, component data
Screenshot export — PNG (with transparency), JPG, SVG, PDF at configurable scale — returned as viewable images to the AI
Target nodes by ID — get_design_context and get_screenshot accept nodeIds to target specific nodes without selecting them in Figma
Design tokens — extracts Figma variables (colors, spacing, typography) for token mapping
Structural metadata — lightweight node tree for navigating large designs before deep-fetching
Leader election — multiple MCP server instances auto-coordinate; only one holds the WebSocket
Works with any MCP client — VS Code, Cursor, Windsurf, Claude Desktop, Gemini Code, Zed, etc.

Manual Setup

Supported tools & config locations

Tool	Config file
Claude Desktop (macOS)	`~/Library/Application Support/Claude/claude_desktop_config.json`
Claude Desktop (Linux)	`~/.config/claude/claude_desktop_config.json`
Claude Desktop (Windows)	`%APPDATA%\Claude\claude_desktop_config.json`
Claude Code	`~/.claude/mcp.json`
Cursor	`~/.cursor/mcp.json`
VS Code / GitHub Copilot	`~/Library/Application Support/Code/User/mcp.json` (macOS)
Windsurf	`~/.codeium/windsurf/mcp_config.json`

GitHub에서 전체 README 보기

설치

npx -y figma-mcp-free

MCP 초보자라면? mcpskill.org 가이드부터 시작하세요 →

설정

{
  "mcpServers": {
    "figma-mcp-free": {
      "command": "node",
      "args": ["/absolute/path/to/figma-mcp-free/server/dist/index.js"]
    }
  }
}