Figma MCP Write Server

Figma MCP 写入服务

一个通过 Plugin API 为 Figma 提供写入权限的 Model Context Protocol（MCP）服务，让 AI Agent 能够以编程方式创建、修改和管理 Figma 设计。

由人类用 ❤️ 设计，由 AI Agent（Claude 和 Gemini）用 ✨ 编写

警告

此项目处于预发布开发阶段（Semantic Versioning < 1.0.0）。所有工具、接口和定义都可能发生变化。

🚀 概述

由于 Figma 的 REST API 仅支持读取，此服务使用 Plugin API 启用写入操作，让 AI Agent 能够作为自主平面设计师开展工作。

功能	REST API MCP	Plugin API MCP（本项目）
读取操作	✅ 完全支持	✅ 完全支持
写入操作	❌ 不支持	✅ 完全支持
实时更新	❌ 仅支持轮询	✅ 实时连接
速率限制	有（REST API 限制）	无（直接通过插件访问）
设置复杂度	简单	中等（需要插件）
离线使用	✅ 可离线使用	❌ 需要活动的 Figma 会话

📋 可用工具

这些工具并非只是 Figma API 的简单封装，而是经过整理，便于直观使用和查找。人类依赖 UI 和良好的 UX，但 MCP 工具必须从 Agent 的角度进行设计。

工具类别

• 核心设计： figma_nodes、figma_text、figma_fills、figma_strokes、figma_effects
• 布局与定位： figma_auto_layout、figma_constraints、figma_alignment、figma_hierarchy
• 设计系统： figma_styles、figma_components、figma_instances、figma_variables、figma_fonts
• 高级操作： figma_boolean_operations、figma_vectors
• 开发者工具： figma_dev_resources、figma_annotations、figma_measurements、figma_exports
• 系统： figma_plugin_status、figma_pages、figma_selection、figma_images

这 24 个工具完整覆盖 Figma 的各项功能，从创建基础形状和文本，到使用组件和变量构建复杂的设计系统。高级功能包括组合形状的布尔运算、自定义路径的矢量操作，以及面向开发交付的全面导出选项。

有关每种工具的详细文档，请参阅完整指南。

⚡ 快速开始

系统要求

• 操作系统 - Windows 10+、macOS 10.14+ 或 Linux（Ubuntu 18.04+）
• 活动的 Figma 会话 - 服务必须在打开的 Figma 文件中运行
• 网络连接 - 用于字体数据库同步和插件通信

1. 📋 安装先决条件

• Node.js 22.x - 从 nodejs.org 下载
• npm - 随 Node.js 一起安装（使用 npm --version 验证）
• Figma Desktop - 访问 Plugin API 所必需（浏览器版本存在限制）
  • 下载：figma.com/downloads（Windows 10+ 或 macOS 11+）
• Git - 用于克隆代码库

node --version  # Should show v22.x.x
npm --version   # Should show 8.0.0 or higher
git --version   # Should show 2.0.0 or higher

注意：由于 better-sqlite3 预构建二进制文件的兼容性，必须使用 Node.js v22.x。其他 Node 版本可能需要手动编译，而这在某些系统上可能会失败。

2. 克隆并构建项目

git clone [email protected]:oO/figma-mcp-write-server.git
cd figma-mcp-write-server
npm install
npm run build

3. 配置 Claude Desktop

将此配置添加到 Claude Desktop MCP 设置文件中：

配置：

{
  "mcpServers": {
    "figma-mcp-write-server": {
      "command": "node",
      "args": ["/path/to/figma-mcp-write-server/dist/index.js"],
      "env": {
        "NODE_ENV": "production"
      }
    }
  }
}

4. 安装 Figma 插件

1. 打开 Figma Desktop
2. 前往 Plugins → Development → Import plugin from manifest
3. 在项目目录中选择 figma-plugin/manifest.json
4. 从 Plugins → Development → Figma MCP Write Server 运行插件

**可选：**将 config.example.yaml 复制到适用于你平台的配置目录，并根据需要进行编辑，以自定义服务设置。详情请参阅配置指南。

🎯 开始创作

打开 Claude Desktop，使用 24 种可用工具中的任意一种以编程方式进行设计

布局与结构

• "创建一个包含标题和副标题的页眉框架"
• "将此框架的子元素设为垂直排列，间距为 16px"
• "将文字在框架内居中"或"将圆形的中心与矩形的左边缘对齐"
• "为此矩形添加 2px 红色描边，并设置圆角端点"

设计系统

• "创建调色板并一致地应用样式"
• "创建具有不同颜色和样式的按钮变体"
• "为颜色和间距创建设计令牌，并绑定到组件"

布尔运算

• "用联合运算合并形状，用减去运算创建镂空"
• "通过相交和排除形状创建复杂徽标"
• "创建图标库，并一致地将描边转换为填充"

矢量操作

• "使用顶点、路径和贝塞尔曲线创建和编辑矢量形状"
• "将形状、描边和文字转换为可编辑的矢量路径"
• "提取或拆分矢量元素，生成独立形状"
• "将多个矢量扁平化为单个优化路径"

开发者交接

• "添加注释和尺寸标注，为开发者生成 CSS"
• "将选定组件导出为 PNG 文件"
• "创建包含间距尺寸的设计规范"

图像

• "列出此页面中使用的所有图像及其使用信息"
• "从 https://example.com/photo.jpg 创建图像节点"
• "从本地文件 ~/Desktop/logo.png 添加图像，位置为 100,50"
• "从现有哈希 abc123 创建图像节点，位置为 150,200"
• "将图像数据以 PNG 格式导出到 Downloads 文件夹"

🚧 当前限制

• 需要活动会话 - 需要打开 Figma 桌面应用程序并打开活动文件
• 手动设置插件 - 每次会话都必须手动安装并运行插件
• 仅限单个文件 - 操作仅限于当前打开的文件和选定页面
• 依赖网络 - 网络状况不佳时，WebSocket 连接可能不稳定
• 创建图案填充 - 可以读取图案填充，但由于已知的 Figma Plugin API 验证错误，无法创建
• 仅限桌面端 - Figma 浏览器版本对 Plugin API 的访问受限

📚 文档

• 完整指南 - 设置、工具、示例和开发
• 示例 - 使用自然语言执行常见设计任务
• 配置 - 高级服务设置
• 开发 - 面向贡献者的技术参考
• 更新日志 - 版本历史和更新

📄 许可证

本项目采用 MIT License 许可，详情请参阅 LICENSE 文件。