AI导哈

Figma设计写入服务器

一个通过Figma插件API提供写入访问的模型上下文协议（MCP）服务器，使AI代理能够以编程方式创建、修改和管理Figma设计。

  • by oO
  • TypeScript
  • 本地部署
  • 23 星标
  • 更新于
在 GitHub 查看 oO/figma-mcp-write-server

使用说明

Figma MCP写服务器

一种模型上下文协议（MCP）服务器，通过插件API提供对Figma的写访问，使人工智能代理能够以编程方式创建、修改和管理Figma设计。

设计时❤️ 由人类。编码为✨ 人工智能代理（Claude和Gemini）

[！警告] 该项目处于预发布开发模式（语义版本控制<1.0.0）。所有工具、接口和定义都可能发生变化。

🚀 概述

由于Figma的REST API是只读的，因此该服务器使用插件API来启用写操作，允许AI代理充当自主图形设计师。

功能 REST API MCP 插件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桌面 -插件API访问必需（浏览器版本有限制）
  • 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

备注：由于更好的squelite3预构建二进制兼容性，特别需要Node.js v22.x。其他Node版本可能需要手动编译，这在某些系统上可能会失败。

2.克隆和构建项目

git clone git@github.com:oO/figma-mcp-write-server.git
cd figma-mcp-write-server
npm install
npm run build

3.配置克劳德桌面

将此配置添加到您的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桌面
  2. 首选 插件 → 发展 → 从清单导入插件
  3. 选择 figma-plugin/manifest.json 从项目目录
  4. 从以下位置运行插件 插件 → 发展 → Figma MCP写服务器

可选的：通过复制自定义服务器设置 config.example.yaml 到您的平台特定配置目录，并根据需要进行编辑。看 配置指南 了解详情。

🎯 开始创建

打开Claude Desktop，使用24个可用工具中的任何一个进行编程设计

布局与结构

  • “创建带有标题和副标题的标题框”
  • “使此框架以16px的间距垂直排列其子项”
  • “框内居中文本”或“将圆的中心与矩形的左边缘对齐”
  • “将2px红色笔划添加到此带有圆角端盖的矩形中”

设计系统

  • “创建调色板并一致应用样式”
  • “构建不同颜色和样式的按钮变体”
  • 为颜色和间距创建设计标记，绑定到组件

布尔运算

  • “将形状与联合相结合，用减法创建切口”
  • “通过相交和排除形状来创建复杂的徽标”
  • “构建具有一致笔划填充转换的图标库”

向量运算

  • 创建和编辑具有顶点、路径和贝塞尔曲线的矢量形状
  • 将形状、笔划和文本转换为可编辑的矢量路径
  • “将矢量元素提取或分解为单独的形状”
  • “将多个向量扁平化为单个优化路径”

开发者交接

  • 添加注释和度量，为开发人员生成CSS
  • “将所选组件导出为PNG文件”
  • “使用间距测量创建设计规范”

图像

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

🚧 当前限制

  • 需要活动会话 -需要打开带有活动文件的Figma Desktop应用程序
  • 手动插件设置 -插件必须手动安装并为每个会话运行
  • 单个文件作用域 -操作仅限于当前打开的文件和所选页面
  • 依赖网 -WebSocket连接在较差的网络上可能不稳定
  • 图案填充创建 -由于已知的Figma插件API验证错误，可以读取但不能创建模式填充
  • 仅限桌面 -Figma浏览器版本具有有限的插件API访问权限

📚 文档

📄 许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

相关 MCP