karthikyaddana/figma-mcp-free

开发工具

本页由 AI 翻译，技术细节请以原文为准。查看原文

20 stars 3 forks 质量 77 趋势 14MIT

Repository Install

MCP 服务器 + Figma 插件，可将实时设计数据流向 AI 编码工具——无 API 速率限制

概览

一个插件+MCP服务器，可以将Figma文档实时数据流向AI编码工具，而不超过Figma的REST API速率限制。Figma的免费API限制非常严格（每月只有少量请求），所以我设计了这个插件来完全绕过这些限制——插件直接从Figma画布读取数据，并通过本地WebSocket将数据流式传输到MCP服务器。克隆仓库并运行安装程序——它检测到所有已安装的AI工具，并一次性配置好。安装程序： - 从源头构建MCP服务器 - 自动检测和配置：，，，，跳过未安装的工具（安装新工具后重新运行） - 打印插件安装路径然后在Figma里：→选择插件/manifest.json。

概述（AI 翻译）

安装
特色
手动设置
工具
结构
工作原理

安装

自动（推荐）

克隆仓库并运行安装程序——它检测到所有已安装的AI工具，并一次性配置好。

macOS / Linux

Windows （PowerShell）

安装人员：

从源头构建MCP服务器
自动检测和配置：Claude 桌面，Claude代码，光标，VS 代码，VS Code Insiders，Windsurf，Gemini Code（反重力），Zed
跳过未安装的工具（安装新工具后重新运行）
打印插件安装路径

然后在 Figma 里：插件→开发 → 从 manifest 导入插件 →选择 plugin/manifest.json。

特色

零API调用 — 直接读取Figma插件API，无需REST API令牌

本页由 AI 翻译，技术细节请以原文为准。

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

新手？先看 mcpskill.org 教程 →

配置

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