AllenXue | Portfolio 2025

Home

Work

About

Component

Writing

聊聊

Figma MCP + Next.js

2025 / Q2

写于北京，百度 K1 大厦

0:00/1:34

没耐心看全文？试试作为播客来收听

本文章将讨论如何利⽤ Figma MCP（Model Context Protocol）打通设计与开发⼯作流，实现从 Figma 设计稿⼀键⽣成代码，并将其集成到 Next.js 项⽬中。

"Figma MCP 的主要功能"

Figma MCP 旨在将 Figma 中的设计上下⽂信息传递给 AI 驱动的开发⼯具，从⽽实现更⾼保真度的设计到代码转换。

更多信息请参考 Figma 官⽅博客：Introducing Figma’s Dev Mode MCP server

"⼯作流设想"

以下是⼀些可以利⽤ Figma MCP 实现的⾼效⼯作流：

"⼯具选择与配置"

Figma 官⽅ MCP：（设计师推荐⽤此⽅式）

第三⽅ MCP:

配置 Figma MCP

以 Figma 官⽅的 Dev Mode MCP 为例。

下载 Figma Desktop App。
开启 Dev Mode MCP 服务:
1. 在 Figma 桌⾯应⽤中，点击菜单栏
2. Plugins > Development > 勾选 Enable Dev
3. 选择 Mode MCP Server 来启⽤服务
设置 MCP Client
1. 在 Figma 中启⽤ MCP 服务后，需要将其配置到您的 AI ⼯具（MCP Client，Cursor、VS Code 等）中。
2. 从教程中复制 JSON 配置代码，并将其粘贴到您的 MCP Client 的设置中。

设置 MCP Client

/* MCP Client */
{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

MCP Client

"准备开发环境：初始化 Next.js 项⽬"

在将设计稿转换为代码之前，您需要⼀个项⽬环境来承载这些代码。Next.js 结合 Tailwind CSS 是⼀个⾮常主流且强⼤的选择，尤其适合组件化开发。

打开终端 (Terminal)。
运⾏初始化命令。该命令将创建⼀个名为 my-designsystem-app 的新项⽬，并⾃动配置好 TypeScript 和 TailwindCSS。
npx create-next-app@latest .在安装过程中，它会询问⼀些问题，您可以根据⾃⼰的偏好进⾏选择（例如，建议选择使⽤ App Router ）。
进⼊项⽬⽬录。
启动开发服务器。
现在，你的 Next.js 项⽬已经成功创建并运⾏起来了。这个项⽬将作为我们从 Figma ⽣成的代码的⽬标仓库。

 /* 通过 NPX 安装 Next.js 依赖项目 */
npx create-next-app@latest .

 /* 进入项目目录 */
cd --

 /* 启动本地开发服务器 */
npm run dev

"执⾏⼯作流"

配置完成后，您就可以开始执⾏从设计到代码的完整流程了。

在 Figma 中选择元素：在 Figma ⽂件中，选中你想要转换的 frame 或 layer 。它可以是⼀个独⽴的组件，也可以是⼀个完整的⻚⾯。
在 AI ⼯具中输⼊指令 (Prompt)：切换到你配置好的 AI ⼯具（如 Cursor 或内置 AI 的 VS Code），输⼊具体的指令。
1. 示例 (⽣成组件代码): "将选中的 Figma 组件转换为⼀个使⽤ React, TypeScript 和 Tailwind CSS 的函数式组件。"
集成代码到 Next.js 项⽬：
1. 将 AI ⽣成的 React 组件代码复制出来。
2. 在你的 Next.js 项⽬的 app/components ⽬录（如果不存在，可以新建⼀个）下创建⼀个新的 .tsx ⽂件（例如 MyNewComponent.tsx ）。
3. 将代码粘贴到这个新⽂件中。
4. 现在你就可以在你的⻚⾯中（例如 app/page.tsx ）导⼊并使⽤这个新组件了。

"最佳实践"

⽣成代码的质量取决于多种因素，⼀部分由您控制，另⼀部分则取决于您使⽤的⼯具。以下是⼀些建议，可帮助您获得更清晰、更⼀致的输出。

为您的设计意图提供最佳上下⽂，以便 MCP 和您的 AI 助⼿能够⽣成清晰、⼀致且与您的系统相符的代码。