Cursor接入Figma教程

一、官方推荐方式(最稳)

Figma 官方现在推荐直接在 Cursor 里安装 Figma Plugin。


二、5分钟完成接入

第一步:安装 Cursor

官方下载:

Cursor 官网


第二步:打开 Cursor

快捷键打开命令面板:

Windows

复制代码
复制代码
Ctrl + Shift + P

Mac

复制代码
复制代码
Cmd + Shift + P

第三步:打开 AI Chat

搜索:

复制代码
复制代码
Open Chat

第四步:安装 Figma MCP 插件

在 Cursor 聊天框输入:

复制代码
复制代码
/add-plugin figma

然后回车。

会看到:

复制代码
复制代码
Add Plugin

点击安装。


五、授权 Figma

安装完成后:

复制代码
复制代码
Cursor Settings
→ Tools & MCP
→ Connect

然后:

复制代码
复制代码
浏览器会打开 Figma 授权

点击:

复制代码
复制代码
Allow Access

即可。


六、成功后的效果

你会在:

复制代码
复制代码
Settings → MCP

看到:

复制代码
复制代码
Figma MCP Connected

说明成功了。

然后测试是否成功

直接在 Cursor Chat 输入:

复制代码
复制代码
读取我的 Figma 文件

或者:

复制代码
复制代码
根据这个 Figma 页面生成 Vue2 页面

https://www.figma.com/xxxx
相关推荐
烈焰晴天3 天前
Codex 桌面端如何链接Figma MCP 服务器拿到 Figma设计稿精准尺寸等结构化数据 来精准还原UI
服务器·ui·figma
良逍Ai出海5 天前
免费模板搭完独立站后,我用 Codex + Figma 做了自己的页面设计
前端·人工智能·figma
console.log('npc')8 天前
将 Figma 接入 Codex MCP:从 `/plugins` 到本地插件配置的完整教程
前端·人工智能·python·figma·code·codex·mcp
console.log('npc')8 天前
FigmaEX 汉化,免费使用,下载与安装指南(Windows/Mac)
windows·macos·ui·figma
weixin_441940019 天前
Figma Make 使用教程:从入门到精通
figma
2601_961845159 天前
考研网课资源网盘|2027|资料
数据库·vim·sublime text·figma·photoshop·墨刀·高考
花岛溯14 天前
AI产品经理学习 DAY4 · Cursor 生成figma 原型
学习·产品经理·figma
踩着两条虫14 天前
VTJ.PRO v2.4.0 多人协作与 AI 批量识图实战评测
vue.js·人工智能·低代码·figma
爱吃提升15 天前
Figma中如何在自动布局中调整元素的大小?
figma
爱吃提升15 天前
Figma中如何在自动布局中添加和删除元素?
figma