📄 工具详情 ⚙️ 安装教程 📚 使用教程
能力标签
🔌 MCP🤖 Agent🔄 工作流🔗 REST API🧠 Claude
Figma MCP工具
🔌
MCP工具

Figma MCP工具

基于 TypeScript · 让 AI 助手直接操作你的系统与工具
英文名：figma-mcp-free
⭐ 7 Stars 🍴 1 Forks 💻 TypeScript 📄 MIT 🏷 AI 7.5分
7.5AI 综合评分
figmamcptypescript
⬇ 下载源码 ZIP ⚙️ 配置说明
✦ AI Skill Hub 推荐

经 AI Skill Hub 精选评估，Figma MCP工具 获评「推荐使用」。这款MCP工具在功能完整性、社区活跃度和易用性方面表现出色，AI 评分 7.5 分，适合有一定技术背景的用户使用。

📚 深度解析

Figma MCP工具 是一款基于 MCP（Model Context Protocol）标准协议的 AI 工具扩展。MCP 协议由 Anthropic 开发并开源，旨在建立 AI 模型与外部工具之间的标准化通信接口，目前已被 Claude Desktop、Claude Code、Cursor 等主流 AI 工具采纳。

通过安装 Figma MCP工具，你的 AI 助手将获得额外的工具调用能力，可以用自然语言直接操控该工具的功能，无需学习复杂的命令行语法。MCP 工具的核心价值在于"一次配置，永久增强"——配置完成后，每次与 AI 对话时都可以无缝调用这些工具。

在技术实现上，MCP 工具通过标准的 JSON-RPC 协议与 AI 客户端通信，工具的功能以"工具列表"的形式暴露给 AI 模型，AI 可以按需调用。Figma MCP工具 提供了结构化的工具调用接口，使 AI 模型能够精确地理解和使用每个功能点，显著降低 AI 在工具使用上的错误率。

与传统的 API 集成相比，MCP 工具的优势在于无需编写代码——用户只需在配置文件中添加几行 JSON，即可让 AI 获得全新能力。AI Skill Hub 将 Figma MCP工具 评为 AI 评分 7.5 分，属于同类工具中的优质选择。

📋 工具概览

Figma MCP工具 是一款遵循 MCP（Model Context Protocol）标准协议的 AI 工具扩展。通过 MCP 协议，它可以让 Claude、Cursor 等主流 AI 客户端直接访问和操作外部工具、数据源和服务，实现 AI 能力的无缝扩展。无论是文件操作、数据库查询还是 API 调用，都可以通过自然语言在 AI 对话中直接触发，极大提升生产效率。

GitHub Stars
⭐ 7
开发语言
TypeScript
支持平台
Windows / macOS / Linux
维护状态
轻量级项目，按需更新
开源协议
MIT
AI 综合评分
7.5 分
工具类型
MCP工具
Forks
1

📖 中文文档

以下内容由 AI Skill Hub 根据项目信息自动整理，如需查看完整原始文档请访问底部「原始来源」。

Figma MCP工具 是一款遵循 MCP（Model Context Protocol）标准协议的 AI 工具扩展。通过 MCP 协议，它可以让 Claude、Cursor 等主流 AI 客户端直接访问和操作外部工具、数据源和服务，实现 AI 能力的无缝扩展。无论是文件操作、数据库查询还是 API 调用，都可以通过自然语言在 AI 对话中直接触发，极大提升生产效率。

📌 核心特色
  • 通过标准 MCP 协议与 Claude、Cursor 等主流 AI 客户端深度集成
  • 提供结构化工具调用接口，显著降低 AI 集成复杂度
  • 支持 Claude Desktop 和 Claude Code 无缝接入，开箱即用
  • 可与其他 MCP 工具组合叠加，构建完整 AI 工作站
  • 轻量无侵入设计，不影响现有系统架构
🎯 主要使用场景
  • 在 Claude Desktop 对话中直接调用本地工具，实现 AI 与系统的深度联动
  • 通过自然语言驱动复杂的多步骤自动化任务，代替繁琐手动操作
  • 将多个 MCP 工具组合使用，构建个人专属 AI 工作站
以下安装命令基于项目开发语言和类型自动生成，实际以官方 README 为准。
安装命令
# 方式一：通过 Claude Code CLI 一键安装
claude skill install https://github.com/slashdoodleart/figma-mcp-free

# 方式二：手动配置 claude_desktop_config.json
{
  "mcpServers": {
    "figma-mcp--": {
      "command": "npx",
      "args": ["-y", "figma-mcp-free"]
    }
  }
}

# 配置文件位置
# macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
# Windows: %APPDATA%/Claude/claude_desktop_config.json
📋 安装步骤说明
  1. 确认已安装 Node.js（v18 或以上版本）
  2. 打开 Claude Desktop 或 Claude Code 的 MCP 配置文件
  3. 按「交给 Agent 安装 → Claude Desktop」标签中的 JSON 配置填入 mcpServers 字段
  4. 保存配置文件并重启 Claude 客户端
  5. 重启后，在对话中即可使用本工具
以下用法示例由 AI Skill Hub 整理，涵盖最常见的使用场景。
常用命令 / 代码示例
# 安装后在 Claude 对话中直接使用
# 示例：
用户: 请帮我用 Figma MCP工具 执行以下任务...
Claude: [自动调用 Figma MCP工具 MCP 工具处理请求]

# 查看可用工具列表
# 在 Claude 中输入："列出所有可用的 MCP 工具"
以下配置示例基于典型使用场景生成，具体参数请参照官方文档调整。
配置示例
// claude_desktop_config.json 配置示例
{
  "mcpServers": {
    "figma_mcp__": {
      "command": "npx",
      "args": ["-y", "figma-mcp-free"],
      "env": {
        // "API_KEY": "your-api-key-here"
      }
    }
  }
}

// 保存后重启 Claude Desktop 生效
📑 README 深度解析 真实文档 完整度 57/100 查看 GitHub 原文 →
以下内容由系统直接从 GitHub README 解析整理，保留代码块、表格与列表结构。

Figma MCP Free

<br/>

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.

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.

Install

Manual Setup

Build server

cd server && npm install && npm run build

Build plugin

cd ../plugin && npm install && npm run build ```

Then run ./install.sh (or .\install.ps1) to configure your AI tools.

Supported tools & config locations

ToolConfig 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
Gemini Code (Antigravity)~/Library/Application Support/Google/GeminiCode/mcp_config.json
Zed~/.config/zed/settings.json

Add the MCP server entry to mcpServers in the relevant file:

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

Or use npx (no build required):

{
  "mcpServers": {
    "figma-mcp-free": {
      "command": "npx",
      "args": ["-y", "figma-mcp-free"]
    }
  }
}

The Figma Plugin

Runs inside Figma and reads directly from the canvas using the Figma Plugin API. It serializes nodes into structured JSON with full layout, typography, visual styles, design tokens, and component data. Connects to the MCP server over WebSocket at ws://localhost:1994.

VS Code / GitHub Copilot

Add to ~/Library/Application Support/Code/User/mcp.json (global) or .vscode/mcp.json (workspace):

{
  "servers": {
    "figma-bridge": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "figma-mcp-free"]
    }
  }
}

For the best experience, use the included VS Code agent (Figma MCP Free) and Copilot instructions in .github/copilot-instructions.md — they define the recommended design-to-code workflow.

🎯 aiskill88 AI 点评 A 级 2026-06-01

高质量开源MCP工具，提升设计开发效率

📚 实用指南（长尾问题）
适合谁
  • 需要让 Claude / Cursor 操作本地工具的 AI 工程师
  • 构建多智能体协作系统的 Agent 开发者
最佳实践
  • 配置 MCP 服务器时建议使用 stdio 传输 + JSON-RPC，避免暴露公网
  • Agent 任务先做 dry-run 验证工具调用链，再开启自主执行
常见错误
  • API key 直接提交到 git 仓库（请用 .env 并加入 .gitignore）
  • MCP 配置路径拼错或权限不足，重启 Claude Desktop 才生效
部署方案
  • 云端托管：可放在 Vercel / Railway / Fly.io 等 PaaS 平台
相关搜索
figma-mcp-free 中文教程figma-mcp-free 安装报错怎么办figma-mcp-free MCP 配置figma-mcp-free Agent 工作流figma-mcp-free 与同类工具对比figma-mcp-free 最佳实践figma-mcp-free 适合谁用

⚡ 核心功能

👥 适合谁
  • 需要让 Claude / Cursor 操作本地工具的 AI 工程师
  • 构建多智能体协作系统的 Agent 开发者
⭐ 最佳实践
  • 配置 MCP 服务器时建议使用 stdio 传输 + JSON-RPC，避免暴露公网
  • Agent 任务先做 dry-run 验证工具调用链，再开启自主执行
⚠️ 常见错误
  • API key 直接提交到 git 仓库（请用 .env 并加入 .gitignore）
  • MCP 配置路径拼错或权限不足，重启 Claude Desktop 才生效

👥 适合人群

Claude Desktop / Claude Code 用户AI 工具开发者需要扩展 AI 能力的专业人士自动化工程师

🎯 使用场景

  • 在 Claude Desktop 对话中直接调用本地工具，实现 AI 与系统的深度联动
  • 通过自然语言驱动复杂的多步骤自动化任务，代替繁琐手动操作
  • 将多个 MCP 工具组合使用，构建个人专属 AI 工作站

⚖️ 优点与不足

✅ 优点
  • +MIT 协议，可免费商用
  • +标准化 MCP 协议，生态互联性强
  • +与 Claude 官方生态无缝对接
  • +即插即用，配置简单快捷
⚠️ 不足
  • −依赖 Claude 客户端，非 Claude 用户无法使用
  • −MCP 协议仍在持续演进，接口可能变更
  • −需要一定的配置步骤
⚠️ 使用须知

AI Skill Hub 为第三方内容聚合平台，本页面信息基于公开数据整理，不对工具功能和质量作任何法律背书。

建议在沙箱或测试环境中充分验证后，再部署至生产环境，并做好必要的安全评估。

📄 License 说明

✅ MIT 协议 — 最宽松的开源协议之一，可自由商用、修改、分发，仅需保留版权声明。

🔗 相关工具推荐

FastGPT
基于LLM的知识平台，提供综合解决方案
mcp-use MCP工具
MCP工具
playwright-mcp MCP工具
基于Playwright的MCP协议服务器实现，提供浏览器自动化能力。支持网页交互、截图、数据采集等功能，适合开发者集成
Composio智能工具编排平台
MCP工具
📚 相关教程推荐
天涯社区重启：一个时代结束后，AI社区时代正在开始
帮助中心 · AI Skill Hub
MCP 配置教程
帮助中心 · AI Skill Hub
MCP 工具
帮助中心 · AI Skill Hub
Cursor AI 编程完全指南：Rules 配置、Composer 使用、MCP 集成
帮助中心 · AI Skill Hub
📰 相关 AI 新闻
AI 前沿资讯：Is your AI strategy burning ca…
AI 资讯 · 知识关联
AI Agent 自主化能力最新进展
AI 资讯 · 知识关联
AI Agent 自主化能力最新进展
AI 资讯 · 知识关联
AI 前沿资讯：If LLMs Have Human-Like Attrib…
AI 资讯 · 知识关联
🍿 AI 圈相关吃瓜
配了5个 MCP 工具，Claude 一个都没用
AI 圈观察
Filesystem MCP 帮 Claude 找文件，找了整个 node_modules
AI 圈观察
MCP 生态的现状：工具多，能用的少
AI 圈观察
🗺️ 相关解决方案
mcp
mcp-server-setup
agent
ai-agent-workflow
workflow
ai-workflow-templates
🧩 你可能还需要
基于当前 Skill 的能力图谱，自动补全的工具组合
技能寻求者
MCP · Agent · 工作流
DeepCode Agent工作流
MCP · Agent · 工作流
total-agent-memory MCP工具
为Claude Code和Codex CLI提供持久化记忆功能的开源MCP工具。自动提取知识图谱，支持多轮对话上下文保留，适合需要长期记忆和
cordum MCP工具
MCP · Agent · 工作流
natively-cluely-ai-assistant — Claude Skill 中文使用文档
免费开源的AI面试助手，实时转录，隐蔽模式，局部RAG，BYOK。无订阅，防止数据泄露。
kb-arena开源AI工作流
kb-arena是开源的AI工作流，用于Benchmark 9 retrieval architectures（向量、上下文、QnA、知识图

❓ 常见问题 FAQ

figma-mcp-free 是一款TypeScript开发的AI辅助工具。开源MCP工具：MCP server + Figma plugin that streams live design data to AI coding tools — no 。⭐7 · TypeScript 主要应用场景包括：设计师与开发者实时协作。
💡 AI Skill Hub 点评

AI Skill Hub 点评：Figma MCP工具 的核心功能完整，质量良好。对于Claude Desktop / Claude Code 用户来说，这是一个值得纳入个人工具库的选择。建议先在非生产环境试用，再逐步推广。

⬇️ 获取与下载
⬇ 下载源码 ZIP

✅ MIT 协议 · 可免费商用 · 直接从 aiskill88 服务器下载，无需跳转 GitHub

📚 深入学习 Figma MCP工具
查看分步骤安装教程和完整使用指南，快速上手这款工具
⚙️ 安装教程 📚 使用教程
🌐 原始信息
原始名称 figma-mcp-free
原始描述 开源MCP工具：MCP server + Figma plugin that streams live design data to AI coding tools — no 。⭐7 · TypeScript
Topics figmamcptypescript
GitHub https://github.com/slashdoodleart/figma-mcp-free
License MIT
语言 TypeScript
🔗 原始来源
🐙 GitHub 仓库  https://github.com/slashdoodleart/figma-mcp-free

收录时间：2026-06-01 · 更新时间：2026-06-01 · License：MIT · AI Skill Hub 不对第三方内容的准确性作法律背书。