Figma 配置 - 技术栈

实现方式是使用 cursor-talk-to-figma-mcp 和 bun 启动服务建立和 Figma 连接通信实现

可以通过 Cursor 操作 Figma 或者获取设计稿直接生成代码样式

还有一个同级别的 UI 设计软件 Pencil 配置大相径庭

目前蓝湖也开放了 Figma 配置

1、下载 Figma

打开官网 https://www.figma.com/downloads/ 下载官方软件，注册登录

下载完成之后会有一个图标，点击会继续下载软件

2、下载 Bun

Bun 是一个现代化的 JavaScript/TypeScript 运行时和全栈工具包，可以理解为 Node.js 的更快、更集成的替代品。它集成了运行时、包管理器、打包器、测试运行器等多种工具，旨在提供极致的性能和简洁的开发体验。

Window 系统可以直接通过命令下载

bash 复制代码

curl -fsSL https://bun.sh/install | bash

Mac 可以 HomeBrew 也可以使用上面那个指令

bash 复制代码

# 添加 Bun 的官方仓库
brew tap oven-sh/bun

# 安装 Bun
brew install bun

# 验证安装：
bun --version

其他方式
一键脚本安装（macOS/Linux 通用）：

bash 复制代码

curl -fsSL https://bun.sh/install | bash

或者 npm 安装需要注意的是有 nvm 插件可能会出现很多的 node 版本，切换版本会有不生效的问题

bash 复制代码

npm install -g bun

3、克隆插件 cursor-talk-to-figma-mcp

项目地址 cursor-talk-to-figma-mcp

这里我使用的是 ssh 克隆，我用 http 克隆不下来

bash 复制代码

git clone git@github.com:grab/cursor-talk-to-figma-mcp.git
cd cursor-talk-to-figma-mcp

初始化项目

bash 复制代码

bun setup  # 自动创建 .cursor/mcp.json

启动 WebSocket 服务器

bash 复制代码

bun socket  # 记住显示的端口号（如 3055）和 channel

4、配置 Figma

点击顶部菜单查找 Plugins→ Development→

在弹出的子菜单中，选择 Import plugin from manifest...

这时会打开一个文件选择对话框。

然后打开 cursor-talk-to-figma-mcp 项目所在地

导航到你本地项目的 src/cursor_mcp_plugin 目录。

选择 manifest.json 文件

会出现一个弹窗

注意这个弹窗不可关闭，随机码会变，会导致连接会超时

5、配置 Cursor

配置 MCP

点击 Tools & MCP 然后点击 New MCP Server

把Figma 弹窗的 mcp 内容粘过来

如果 UI 提供了在线的 Web 端的设计稿，可以使用 Cursor 的 Plugins 里 Figma 提供的官方 MCP figma

6、测试

输入：获取当前 Figma 文档信息Connected to server in channel: o3jmymg2 （这个随机码一定要有）

如果返回你在 Figma 的 UI 图的信息就证明成功了

7、增加 Skills

可以加一个 Skills 用于处理样式可能会乱画的问题（可以使用 AI 优化提示词）

bash 复制代码

---------
name: Figma UI
description: 这是一个配合 Figma 的 skills 当用户使用了 Figma 就触发这个文件
--------


1、严格按照设计稿写代码
2、根据项目结构增加页面，不能乱乱来
3、严格按照设计稿的尺寸画页面，需要兼容不同尺寸的 UI
4、遇到疑问点，可以询问用户，等到解答再次执行操作

8、增加 Rules

因为这个 MCP 配置好之后是可以通过 Cursor 控制 Figma 操作设计图，为了防止更改设计稿，增加一个 Rule 文件（可以使用 AI 优化提示词）

Web 端的不受影响

bash 复制代码

---------
name: Figma Rule
description: 这是一个配合 Figma 的 Rule 文件，严格限制 Figma 的使用
--------

1、禁止通过 Cursor 修改 Figma 的设计稿
2、禁止当 Figma 连接失败或者未连接 自己去设计 UI

9、配置 Plugins

上面有提到 Plugins 这里正好可以配置一下官方提供的 Skills 和 MCP

点击 Cursor 的 Plugins

里面会出现 Figma 的图标，点击之后选择你当前登录的账号即可

会提供三个插件

implement-design
把 Figma 里的画板/组件落成代码：解析链接 → get_design_context → get_screenshot → 资源 → 按设计实现。
code-connect-components
用 Code Connect 把 Figma 组件和真实代码组件对应起来。
create-design-system-rules
为你的仓库生成设计系统相关规则，让「Figma → 代码」更贴合你的技术栈和规范。
三个技能（Agent 可自动选用，你也可用自然语言或 / 相关命令引导，具体以 Cursor 里显示的为准）
更多细节可以通过 AI 提问这个插件的功能点

10、问题总结

Figma 弹窗不要关闭，随机码会刷新，会连接超时；
cursor-talk-to-figma-mcp 服务不能终止，终止也会连接超时；
MCP 有两个关于 Figma 的插件分别对应的是 web 端和本地端；
Cursor 模型不能选择 Auto 因为 Cursor 会认为这是一个非常大的需求 Auto 执行不了，可以使用最新模型Composer 2 Fast（个人感觉比较快）；