Integrations

Connects to Figma's API to extract components, styles, and text from designs, analyze design system consistency, manage UI content, and generate development documentation.

Figma MCP 服务器

连接到 Figma 的 API 的模型上下文协议 (MCP) 服务器，允许 AI 工具和 LLM 访问和使用您的 Figma 设计。

特征

设计数据提取：从 Figma 设计中提取组件、样式和文本
设计系统分析：分析设计系统的一致性和模式
UI 内容管理：从设计中提取并组织所有 UI 副本
开发交接：为开发人员生成全面的文档
无缝 AI 集成：将您的设计连接到 Claude、Cursor 和其他兼容 MCP 的客户端等 AI 工具

入门

先决条件

Node.js 16 或更高版本
Figma 个人访问令牌（从您的 Figma 帐户设置中获取）

安装

克隆存储库：
git clone https://github.com/yourusername/figma-mcp-server.git cd figma-mcp-server
安装依赖项：
npm install
在项目根目录中创建一个.env文件：
FIGMA_API_TOKEN=your_figma_personal_access_token API_KEY=your_secure_api_key TRANSPORT_TYPE=stdio
构建服务器：
npm run build
启动服务器：
npm start

连接到客户端

克劳德桌面版

打开或创建 Claude for Desktop 配置文件：
- macOS： ~/Library/Application Support/Claude/claude_desktop_config.json
- Windows： %APPDATA%\Claude\claude_desktop_config.json
添加以下配置：
{ "mcpServers": { "figma": { "command": "node", "args": ["/absolute/path/to/figma-mcp-server/build/index.js"], "env": { "FIGMA_API_TOKEN": "your_figma_personal_access_token", "TRANSPORT_TYPE": "stdio" } } } }
重启 Claude 桌面版

光标

全局配置

创建或编辑 Cursor 的 MCP 配置文件：

macOS： ~/Library/Application Support/Cursor/mcp.json
Windows： %APPDATA%\Cursor\mcp.json

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://localhost:3000/sse",
      "env": {
        "API_KEY": "your_secure_api_key"
      }
    }
  }
}

项目特定配置

在项目根目录中创建一个.cursor目录：
mkdir -p .cursor
在该目录中创建一个mcp.json文件：
{ "mcpServers": { "figma-mcp": { "url": "http://localhost:3000/sse", "env": { "API_KEY": "your_secure_api_key" } } } }

可用工具

工具	描述
`get-file-info`	获取有关 Figma 文件的基本信息
`get-nodes`	从 Figma 文件中获取特定节点
`get-components`	从 Figma 文件获取组件信息
`get-styles`	从 Figma 文件获取样式信息
`get-comments`	从 Figma 文件获取评论
`search-file`	按类型、名称等搜索 Figma 文件中的元素。
`extract-text`	从 Figma 文件中提取所有文本元素

可用提示

analyze-design-system - 分析设计系统组件和样式的一致性
extract-ui-copy - 从设计中提取并组织所有 UI 副本
generate-dev-handoff - 根据设计生成开发交接文档

使用示例

与 Claude 一起使用：

Can you analyze the design system in my Figma file with key abc123? Look for consistency in color usage and typography.

与游标一起使用：

Generate React components for the buttons from my Figma file with key abc123, using tailwind CSS.

环境变量

多变的	描述	默认
`FIGMA_API_TOKEN`	您的 Figma 个人访问令牌	（必需的）
`API_KEY`	API 身份验证的安全密钥	（必需的）
`TRANSPORT_TYPE`	传输方法（ `stdio`或`sse` ）	`stdio`
`PORT`	SSE运输港口	`3000`

建筑学

此 MCP 服务器：

使用您的个人访问令牌连接到 Figma API
遵循模型上下文协议公开标准化接口
提供 LLM 可以用来与 Figma 设计进行交互的工具、资源和提示
支持 stdio 传输（本地连接）和 SSE 传输（远程连接）

贡献

欢迎贡献代码！欢迎提交 Pull 请求。

This server cannot be installed

-

security - not tested

F

license - not found

-

quality - not tested

模型上下文协议服务器将 AI 工具和 LLM 连接到 Figma 设计，使它们能够提取设计数据、分析设计系统并生成开发文档。

Figma MCP Server