深色模式
Cursor 接入 Figma
概述
Cursor 接上官方 Figma 插件后,读取的除了截图,还包括节点、布局、文本样式和组件结构。
只看截图生成代码,结果经常靠运气;把设计结构一起交给 Cursor,稳定性会高很多。
准备工作
开始前先确认:
- Figma 使用付费计划,当前账号具备
Dev或Fullseat - 你对目标 Figma 文件有访问权限
- Cursor 可以正常使用 Marketplace 和插件能力
- 已经准备好要实现的 Figma 链接、Frame 或组件
- 当前项目代码已经可以在 Cursor 中正常打开
接入后如果读不到设计内容,先查账号权限、seat 类型和文件访问范围。
接入步骤
安装插件
在 Cursor 的 Marketplace 中搜索 Figma,安装官方插件。
完成授权
安装后,按插件提示完成 Figma 账号授权或 MCP 连接,让 Cursor 可以读取你有权限访问的设计文件。
验证是否接通
可以先复制一个具体 Frame 或组件链接,粘贴到 Cursor 中,让它解释这个设计的结构、布局和样式信息。
如果 Cursor 能正常读出层级、文本、颜色和间距,说明接入已经完成。
用法说明
接入完成后,常用方式主要有两种。
先读设计,再生成代码
先把 Figma 链接交给 Cursor,让它概括页面结构、组件拆分和主要样式信息。先确认它有没有读懂,再谈生成代码。
直接按设计稿实现页面或组件
如果目标已经明确,可以直接让 Cursor 根据 Figma 链接实现组件或页面,并补充说明:
- 代码要落在哪个页面或目录
- 优先复用现有组件和样式变量
- 先完成结构,再继续调整间距、字号、圆角和状态样式
实际使用时,一次只处理一个页面局部、一个组件或一个弹窗。不要一上来就丢整页设计稿,容易乱,也更容易碰到额度限制。
