STARWARCLOUD STARWAR.AI
返回市场
菲玛-MCP写入服务器

菲玛-MCP写入服务器

作者：oO12 星标更新：2025-11-12
安装使用来源：spider==github.com

项目介绍

Figma MCP 写入服务器

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

由人类精心设计。由AI代理（Claude 和 Gemini）编写。

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

🚀 概述

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

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

📋 可用工具

这些工具不是简单地围绕Figma API的薄封装，而是为了直观使用和发现而组织的。人类依赖于UI和良好的用户体验，但MCP工具必须从代理的角度设计。

工具分类

  • 核心设计： 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  # 应显示v22.x.x
npm --version   # 应显示8.0.0或更高版本
git --version   # 应显示2.0.0或更高版本

注意：由于better-sqlite3预编译二进制兼容性，特别需要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桌面

将以下配置添加到您的Claude桌面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 Write Server运行插件

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

🎯 开始创作

打开Claude桌面并使用24个可用工具之一进行编程设计

布局与结构

  • "创建带有标题和副标题的头部框架"
  • "让这个框架垂直排列其子项，间距为16px"
  • "在框架内居中文本" 或 "将圆心对齐到矩形的左侧边缘"
  • "给这个矩形添加一个2px红色描边，端点为圆角"

设计系统

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

布尔操作

  • "使用联合合并形状，使用减法创建切口"
  • "通过相交和排除形状创建复杂的标志"
  • "构建具有统一描边填充转换的图标库"

矢量操作

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

开发者交接

  • "添加注释和测量，为开发者生成CSS"
  • "将选定组件导出为PNG文件"
  • "创建带有间距测量的设计规范"

图像

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

🚧 当前限制

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

📚 文档

📄 许可证

本项目采用MIT许可证 - 详情见LICENSE文件。