AI导哈

Figma MCP服务器

基于模型上下文协议(MCP)的Figma API服务器实现，支持Figma插件和小部件集成。

  • by sichang824
  • TypeScript
  • 本地部署
  • 3 星标
  • 更新于
在 GitHub 查看 sichang824/mcp-figma

使用说明

Figma MCP服务器

基于模型上下文协议（MCP）的Figma API服务器实现，支持Figma插件和小部件集成。

特性

  • 通过MCP与Figma API互动
  • 用于Figma插件通信的WebSocket服务器
  • 支持Figma控件开发
  • 通过命令行参数配置环境变量
  • 丰富的Figma操作工具

安装

  1. 克隆存储库：
git clone <repository-url>
cd figma-mcp
  1. 安装依赖项：
bun install

配置

环境变量

创建一个 .env 文件并设置以下环境变量：

FIGMA_PERSONAL_ACCESS_TOKEN=your_figma_token
PORT=3001
NODE_ENV=development

获取Figma访问令牌

  1. 登录到 Figma
  2. 转到帐户设置>个人访问令牌
  3. 创建新的访问令牌
  4. 将令牌复制到您的 .env 文件或通过命令行参数传递

用法

构建项目

bun run build

运行开发服务器

bun run dev

使用命令行参数

支持通过设置环境变量 -e 参数：

bun --watch src/index.ts -e FIGMA_PERSONAL_ACCESS_TOKEN=your_token -e PORT=6000

您还可以使用专用的令牌参数：

bun --watch src/index.ts --token your_token

或其简写：

bun --watch src/index.ts -t your_token

在游标中配置MCP

添加到 .cursor/mcp.json 文件：

{
  "Figma MCP": {
    "command": "bun",
    "args": [
      "--watch",
      "/path/to/figma-mcp/src/index.ts",
      "-e",
      "FIGMA_PERSONAL_ACCESS_TOKEN=your_token_here",
      "-e",
      "PORT=6000"
    ]
  }
}

可用工具

服务器提供以下Figma操作工具：

  • 文件操作：获取文件、版本等。
  • 节点操作：获取和操纵Figma节点
  • 注释操作：管理Figma文件中的注释
  • 图像操作：将Figma元素导出为图像
  • 搜索功能：搜索Figma文件中的内容
  • 组件操作：管理Figma组件
  • 画布操作：创建矩形、圆形、文本等。
  • 小部件操作：管理Figma小部件

Figma插件开发

插件介绍

Figma插件是扩展Figma功能的定制工具，可实现工作流自动化、添加新功能或与外部服务集成。此MCP服务器提供了一种开发、测试和部署Figma插件的便捷方式。

建造和测试

构建插件：

bun run build:plugin

在开发模式下运行：

bun run dev:plugin

在Figma中加载插件

  1. 在Figma中右键单击打开菜单->插件->开发->从清单导入插件。..
  2. 选择插件 manifest.json 文件
  3. 您的插件现在将出现在Figma的插件菜单中

插件与MCP服务器的交互

插件可以通过WebSocket与MCP服务器通信，以实现：

  • 复杂的数据处理
  • 外部API集成
  • 跨会话数据持久化
  • AI功能集成

发展

构建小部件

bun run build:widget

构建插件

bun run build:plugin

开发模式

bun run dev:widget  # Widget development mode
bun run dev:plugin  # Plugin development mode

许可证

麻省理工学院

相关 MCP