Figma Context MCP

Framelink Figma MCP Server 是一个 Model Context Protocol（MCP）服务器，专为连接 AI 编程工具（如 Cursor）与 Figma 设计文件而设计。该工具通过简化 Figma API 的响应，提取关键的布局和样式信息，使 AI 能够更准确地将设计转换为代码，提升开发效率。

核心功能

Framelink Figma MCP Server 提供了以下核心功能：

• Figma 设计数据访问：支持访问 Figma 文件、画框和组，提取设计元数据，为 AI 提供结构化的设计信息。
• 数据简化处理：自动过滤 Figma API 响应中的冗余信息，仅保留与布局和样式相关的数据，提高 AI 的处理效率。
• Cursor 集成优化：针对 Cursor AI 编程工具进行优化，提升代码生成的准确性和一致性。

安装方法

要使用 Framelink Figma MCP Server，首先需要安装其依赖包。可以通过以下命令进行安装：

npm install figma-developer-mcp

安装完成后，需要配置环境变量，设置 Figma API 访问令牌和服务器端口：

export FIGMA_API_KEY=your_api_key_here
export PORT=3000

最后，启动服务器：

npx figma-developer-mcp --figma-api-key $FIGMA_API_KEY --port $PORT

对于 Windows 用户，配置方式略有不同：

npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

使用方法

在 AI 编程工具中（如 Cursor），可以通过以下步骤使用 Framelink Figma MCP Server：

1. 在 IDE 中打开聊天功能（如 Cursor 的 agent 模式）。
2. 粘贴 Figma 文件、画框或组的链接。
3. 让 AI 基于提取的设计数据生成代码。

例如，可以使用如下指令生成一个 React 登录页面：

实现这个 Figma 设计中的登录表单: https://www.figma.com/file/EXAMPLE/Design-System

此外，还可以从 Figma 设计系统中提取颜色和字体变量：

从这个 Figma 设计系统中提取所有颜色和字体变量: https://www.figma.com/file/EXAMPLE/Design-System

使用场景

Framelink Figma MCP Server 适用于以下场景：

• 需要快速将 Figma 设计转换为前端代码的开发者。
• 使用 AI 辅助编程工具进行开发的团队。
• 希望在开发过程中实现设计与代码的无缝协作。

配置说明

在 IDE 的配置文件中添加 Framelink Figma MCP 服务器的设置，具体配置如下：

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

对于 Windows 用户，配置方式如下：

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

注意事项

使用 Framelink Figma MCP Server 时，需要注意以下事项：

• 需要在 Figma 账户中创建个人访问令牌。
• 目前主要针对 Cursor 工具进行优化，其他工具可能需要额外配置。
• 对于复杂的设计，可能需要人工调整生成的代码。

Framelink Figma MCP Server 通过提供结构化的设计数据，帮助开发者更高效地实现设计到代码的转换，是 AI 编程工具的重要补充。