金大哥 - mcp-figma MCP 详情

article

README

🚀 Figma MCP 服务器

Figma MCP 服务器是一个基于 Model Context Protocol (MCP) 的 Figma API 服务器实现，它支持 Figma 插件和小部件集成，为 Figma 开发提供了强大的功能和便捷的操作。

🚀 快速开始

Figma MCP 服务器允许您通过 MCP 与 Figma API 进行交互，支持 Figma 插件和小部件开发。以下是使用该服务器的基本步骤：

# 克隆仓库
git clone <repository-url>
cd figma-mcp
# 安装依赖项
bun install
# 构建项目
bun run build
# 运行开发服务器
bun run dev

✨ 主要特性

MCP 交互：通过 MCP 与 Figma API 进行交互，实现高效通信。
插件通信：带有 WebSocket 服务器，方便与 Figma 插件进行通信。
小部件支持：支持 Figma 小部件开发，拓展 Figma 功能。
灵活配置：可通过命令行参数配置环境变量，满足不同需求。
丰富工具集：提供丰富的 Figma 操作工具，涵盖文件、节点、评论等操作。

📦 安装指南

克隆仓库

git clone <repository-url>
cd figma-mcp

安装依赖项

bun install

💻 使用示例

构建项目

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

📚 详细文档

配置

环境变量

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

FIGMA_PERSONAL_ACCESS_TOKEN=your_figma_token
PORT=3001
NODE_ENV=development

获取 Figma 访问令牌

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

在 Cursor 中配置 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 功能的定制工具，可实现工作流自动化、添加新功能或集成外部服务。以下是如何使用 Figma 插件的示例：

安装插件：在 Figma 账户中下载并安装所需的插件。
配置插件：根据插件要求设置必要的参数和权限。
使用插件：在设计项目中调用插件功能，如自动布局、数据绑定等。

插件开发步骤

创建新插件：
- 打开 Figma 账户，进入插件市场。
- 点击“创建插件”按钮，开始构建新的插件项目。
编写代码：
- 使用 JavaScript 或 TypeScript 编写插件逻辑。
- 定义插件功能，如事件监听、数据处理等。
测试插件：
- 在 Figma 中打开测试文件，加载开发中的插件。
- 测试各项功能，确保插件按预期工作。
发布插件：
- 完成测试后，填写插件描述和使用说明。
- 提交插件到 Figma 市场，供其他用户下载使用。

在 Figma 中加载插件

打开 Figma 应用，进入您要使用的项目。
点击右上角的“插件”图标，选择“从我的电脑加载”或“从 URL 加载”。
选择已下载的插件文件或输入插件链接，点击“打开”。

开发

构建小部件和插件

# 构建 widget
bun run build-widget
# 构建 plugin
bun run build-plugin

运行开发模式

# 启动 widget 开发服务器
bun run dev-widget
# 启动 plugin 开发服务器
bun run dev-plugin

📄 许可证

本项目采用 MIT 许可证。

mcp-figma