AI导哈

Figma MCP 集成工具

一个用于实现 Figma 设计的 React + TypeScript 项目，通过 Model Context Protocol (MCP) 与 Cursor IDE 集成。

  • by kalen1o
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 kalen1o/figma-mcp

使用说明

Figma MCP项目

一个React+TypeScript项目，用于使用模型上下文协议（MCP）与Cursor集成来实现Figma设计。

先决条件

  • 光标IDE
  • Figma桌面应用程序（最新版本）或Figma网络帐户
  • 使用Figma设计文件

一步一步：Figma MCP连接到光标

Figma提供了两种连接MCP的方法： 桌面应用 （本地服务器）和 网页应用 （远程服务器）。选择最适合你的方法。

方法1:Figma桌面应用程序（本地服务器）

步骤1：设置Figma桌面MCP服务器

  1. 确保您安装了最新版本的Figma桌面应用程序
  2. 在Figma桌面应用程序中打开Figma设计文件
  3. 切换到 开发模式 通过单击工具栏中的切换
  4. 在右侧边栏中，启用 MCP服务器
  5. 将出现一条确认消息
  6. 复制服务器URL（通常 http://127.0.0.1:3845/mcp)

步骤2：配置光标MCP设置

  1. 打开光标IDE
  2. 引导到 设置 → 主控程序 选项卡（或 特性 → 模型上下文协议)
  3. 点击 “+添加新的MCP服务器”
  4. 输入以下配置：
{
  "mcpServers": {
    "figma": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}
  1. 保存配置

步骤3：连接和身份验证

  1. 添加服务器后，它将出现在游标中的MCP服务器列表中
  2. 点击 “连接” Figma MCP服务器旁边
  3. 按照提示允许访问
  4. 连接后，MCP服务器即可使用

方法2:Figma Web App（远程服务器）

步骤1：设置Figma远程MCP服务器

  1. 在浏览器中打开Figma设计文件（Figma Web）
  2. 随着 未选择对象，切换到 开发模式
  3. 在右侧检查面板中，单击 “设置MCP客户端” 访问配置详细信息
  4. 注意远程MCP服务器URL： https://mcp.figma.com/mcp

步骤2：配置光标MCP设置

  1. 打开光标IDE
  2. 引导到 设置 → 主控程序 选项卡（或 特性 → 模型上下文协议)
  3. 点击 “+添加新的MCP服务器”
  4. 输入以下配置：
{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}
  1. 保存配置

步骤3：连接和身份验证

  1. 添加服务器后，它将出现在游标中的MCP服务器列表中
  2. 点击 “连接” Figma MCP服务器旁边
  3. 按照身份验证提示允许访问
  4. 连接后，MCP服务器即可使用

⚠️ 重要提示： Figma远程MCP服务器(https://mcp.figma.com/mcp)有 费率限制。如果您遇到速率限制问题或需要更高的性能，请考虑使用 方法1（桌面应用程序） 使用没有速率限制的本地服务器。

步骤4：验证连接

  1. 在Cursor中打开聊天
  2. 试着问：“列出我的Figma文件”或“有哪些可用的Figma资源？”
  3. 如果已连接，您应该看到可用的Figma相关资源和工具
  4. 现在，您可以直接在Cursor中引用打开的Figma文件

故障排除

MCP服务器未出现在图中：

  • 确保您使用的是最新版本的Figma桌面应用程序
  • 确保您处于开发模式（在工具栏中切换）
  • 尝试关闭并重新打开Figma文件

Cursor中的连接问题：

  • 验证服务器URL是否正确：
    • 桌面： http://127.0.0.1:3845/mcp
    • 网状物： https://mcp.figma.com/mcp
  • 配置更改后重新启动Cursor
  • 检查Figma桌面应用程序是否正在运行（对于本地服务器方法）
  • 检查网络连接（用于远程服务器方法）

身份验证错误：

  • 仔细遵循身份验证提示
  • 确保授予必要的权限
  • 尝试断开和重新连接MCP服务器

有关详细的故障排除：

在游标中使用Figma MCP

连接后，Figma MCP服务器使您能够：

  • 从Figma设计生成代码 -将设计元素直接转换为代码
  • 提取设计上下文 -获取有关组件、样式和布局的详细信息
  • 通道设计规范 -检索间距、颜色、排版和其他设计标记
  • 使用打开的Figma文件 -MCP服务器连接到您在Figma中打开的文件
  • 分析设计结构 -了解组件层次结构和关系

只需在Cursor聊天中引用您的Figma设计，MCP服务器将提供必要的设计上下文来帮助实现您的设计。

提示模板：实施设计部分

当要求Cursor实现设计节时，请使用此提示模板：

I need to implement a design section from Figma. Please:

1. Load the Figma design from file: [FILE_KEY or URL]
2. Analyze the [SECTION_NAME] section (e.g., "Header", "Hero Section", "Product Card")
3. Extract the following design specifications:
   - Layout structure and spacing
   - Colors and typography
   - Component hierarchy
   - Responsive breakpoints
   - Interactive states (hover, active, disabled)
   - Assets and images needed

4. Implement the section as a React component with:
   - TypeScript types
   - Responsive design (mobile-first)
   - Proper accessibility attributes
   - Clean, maintainable code structure
   - Following existing project patterns

5. Create the component file at: [TARGET_PATH]
6. Integrate it into the main app if needed

Please start by loading the design and showing me the extracted specifications before implementation.

示例用法

I need to implement a design section from Figma. Please:

1. Load the Figma design from file: ABC123xyz
2. Analyze the "Header" section
3. Extract design specifications (layout, colors, typography, spacing, component hierarchy)
4. Implement as a React component with TypeScript, mobile-first responsive design, and accessibility
5. Create the component at: src/components/Header.tsx
6. Integrate it into App.tsx

Please show me the extracted specifications first.

项目设置

安装

npm install

发展

npm run dev

该应用程序将在 http://localhost:5173

构建

npm run build

预览生产版本

npm run preview

技术栈

  • 反应19 使用TypeScript
  • 维特 用于构建工具
  • 蚂蚁设计6 用于UI组件
  • Tailwind CSS 用于造型

项目结构

src/
├── components/
│   ├── Header.tsx
│   ├── Homepage.tsx
│   └── Drawer.tsx
├── App.tsx
├── main.tsx
└── index.css

许可证

麻省理工学院

相关 MCP