MCP 服务器

Figma MCP Server Overview

在 MCP 服务器上，由 Cursor AI 从 Figma 自动生成的 UI。

kiensamson0000

开发者工具

README

Figma MCP 服务器概览

Figma MCP 服务器代表着设计和人工智能融合方面的一项突破性解决方案。通过利用模型上下文协议 (MCP)，该服务器实现了 Figma 的设计资源与大型语言模型 (LLM)（如 Claude、Windsurf、Cursor 和 Cline）之间的无缝集成。本文档概述了 Figma MCP 是什么，解释了它的工作原理，并概述了开始使用它的分步过程。

简介

在快速发展的设计和开发领域，弥合创意设计和代码实现之间的差距至关重要。Figma MCP 服务器旨在通过充当中间件来简化此过程，该中间件将 Figma 设计数据转换为 AI 编码助手的结构化上下文。这种集成不仅提高了生产力，而且减少了通常涉及将设计转换为代码的手动开销。

什么是 Figma MCP？

Figma MCP 是模型上下文协议的服务器实现。它的主要功能是向各种 LLM 提供标准化的上下文——包括布局、组件和样式。通过此协议，设计师和开发人员可以利用 AI 来自动化任务、生成可重用的用户界面组件，并在整个工作流程中保持高度一致性。该服务器是一个促成因素，有助于最大限度地发挥 AI 集成在现代设计流程中的潜力。

Figma MCP 如何工作？

Figma MCP 服务器的核心功能如下：

协议实现： 它利用模型上下文协议作为通用适配器，允许不同的 AI 系统轻松地与 Figma 数据交互。
Figma API 集成： 服务器使用访问令牌连接到 Figma 的 API。此连接允许它以只读模式获取设计文件、组件和样式定义。
数据简化： 它处理和简化复杂的设计数据，以便 AI 工具可以提取基本的布局和样式信息，而不会被不必要的细节淹没。
标准化通信： 通过定义的端点（例如用于服务器发送事件 (SSE) 的端点），服务器为 AI 助手提供了一种可靠的机制来接收最新的设计信息。

这种结构化的方法确保 AI 模型获得准确、简洁和相关的设计上下文，从而生成高保真代码。

快速开始 Framelink Figma MCP 服务器？

本指南将引导您完成 Framelink Figma MCP 服务器的设置。

设置和使用

开始使用 Figma MCP 服务器涉及几个明确定义的步骤：

先决条件

在安装之前，请确保您具备以下条件：

Node.js（版本 16.0 或更高版本）
npm（版本 7.0 或更高版本）或 pnpm（版本 8.0 或更高版本）
一个 Figma 帐户（建议使用专业版或企业版计划）
具有读取权限的 Figma API 访问令牌

获取 Figma API 访问令牌

注册 Figma 帐户： 访问 Figma 官方网站并注册（如果您还没有帐户）。
下载 Figma 桌面应用程序： 选择与您的操作系统（Windows、macOS 或 Linux）兼容的版本并安装它。
登录并访问个人资料设置： 启动 Figma 应用程序，使用您的凭据登录，然后单击侧边栏中的个人资料图标。
导航到安全设置： 在下拉菜单中，转到“设置”页面，然后单击“安全”选项卡。
生成个人访问令牌： 滚动到“个人访问令牌”部分，然后单击“生成新令牌”。命名令牌（例如，Figma_MCP），生成它，并立即复制它（Figma 只显示一次）。使用密码管理器或加密文件安全地保存它。
使用环境变量保护您的令牌： 例如，在您的终端中运行：
```
export FIGMA_API_TOKEN="your_token_here"
```

安装 Figma MCP 服务器

您可以使用 NPM 快速安装服务器，而无需手动安装存储库：

npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

或者，要从本地源安装：

克隆存储库：

git clone https://github.com/GLips/Figma-Context-MCP.git
cd Figma-Context-MCP

使用 pnpm 安装依赖项：
```
pnpm install
```
将 .env.example 文件复制到 .env，并将占位符值替换为您的 Figma API 令牌。
启动服务器：
```
pnpm run dev
```

配置服务器

环境变量： 在 .env 文件中设置 FIGMA_API_TOKEN，并可选择设置 PORT（默认为 3333）。
命令行参数： 可以通过命令行直接使用 --figma-api-key 和 --port 等选项；这些选项优先于环境变量。

与 AI 工具集成

服务器启动并运行后，按如下方式将其与 AI 工具（例如，Cursor IDE）集成：

确保服务器正在运行： 通过运行安装命令验证它是否在正确的端口上处于活动状态。
将 MCP 服务器添加到您的 AI 工具： 对于 Cursor：
- 打开应用程序并导航到“设置”>“MCP”部分。
- 单击“添加新 MCP 服务器”并输入名称（例如，“Figma MCP”）。
- 选择 SSE（服务器发送事件）选项并输入服务器 URL（通常为 http://localhost:3333）。
验证连接： 绿色状态指示器将确认集成成功。红色指示器表示需要进行故障排除。
使用 Figma 设计： 在 Figma 中，选择您所需的设计，如果需要，对组件进行分组，然后使用“复制选择链接”选项复制设计链接。在 Cursor Composer（启用代理模式）中，粘贴链接以提示 AI 执行任务，例如生成 React 代码、创建可重用的 UI 组件或优化布局。

其他提示和功能

MCP 检查器： 在新终端中运行 pnpm inspect 以启动 MCP 检查器 Web UI，该 UI 允许您查看可用工具、触发调用和检查响应。
可用工具：
- get_file：从 Figma 检索详细的文件信息。
- get_node：获取有关 Figma 文件中特定节点的数据。
主要特点：
- MCP 合规性： 该服务器符合模型上下文协议，可与多个 LLM 应用程序兼容。
- 类型安全实现： 使用 TypeScript 构建，以实现健壮且可维护的代码库。
- 自定义 URI 方案： 支持自定义 URI 方案，以方便设计资产的管理。
- 错误处理和验证： 提供强大的错误处理以确保可靠的运行。
- 批量操作： 能够高效地处理多个设计元素。

结论

Figma MCP 服务器是一个强大的工具，可以弥合 Figma 设计和 AI 编码助手之间的差距。通过实施结构化的通信协议，它使设计师和开发人员能够自动化任务、减少重复性工作，并在将设计转换为代码时实现高精度。无论您的目标是通过自动化提高生产力，还是加强团队之间的协作，将 Figma MCP 服务器集成到您的工作流程中都将带来显着的好处。

对于那些准备提升其 API 开发和设计工作流程的人，请考虑下载并试用 Apidog，以获得完整且经济高效的 API 管理解决方案。