Figma在AI工具中的使用方法入门介绍

Figma一直是产品经理和UI设计师的必备工具。所以在AI工具的发展过程中也是属于必须接入的工具之一，重要程度估计仅次于Office四件套。

无论是那个AI厂商都不敢忽视，你去搜各类skill库，figma相关的skill也都多如牛毛。可见由figma构成的一套生态有多火热。

今天给大家介绍的是figma官方的一套MCP。安装后，就可以用AI来操控Figma作图了，从此告别拖拉拽。

先提醒：Figma 在AI工具中调用需要 Figma 付费版才能用（教育版也行）。教育版在某宝 50 块左右，我用下来没问题。逐步习惯付费办公吧，毕竟我也想着别人花钱来买我的服务。

安装方式

安装很简单，Claude code安装进入插件库安装即可。

Cursor也是一样，在Marketplace搜索figma安装即可。

其他平台也差不多，都是一键安装。

连接 Figma 服务

安装好 MCP 之后，还需要登录你的 Figma 账号才能真正连上。这个过程是在 Figma 那边完成的。

连接的过程主要也是输入你figma账密的过程，跟着AI工具的提示一步一步走即可。

点击同意后，会调取网页，点击同意获得你授权，即完成。

Figma skill 介绍

装好连上之后，Figma MCP 可不只有一个功能，它带了 5 个 skill，各有各的用途。先搞清楚它们分别干什么，后面用起来才不懵。

1. figma-use

干什么的：让你在 Figma 文件里执行 JavaScript，直接操作画布上的节点——创建 Frame、改 AutoLayout、改颜色、批量改文本、绑定变量等。

什么时候用：你要”自动修 Figma”、”批量改一堆图层”、”把某块布局重排”这类写操作的时候。

举个例子：你说”把这个页面里所有标题颜色改成品牌色”，figma-use 就会去 Figma 里找到所有标题节点，批量改颜色。

2. figma-implement-design

干什么的：把 Figma 设计稿转成前端代码（通常是 React/Tailwind），并提醒你映射到项目里已有的组件和规范。

什么时候用：你说”按这个 Figma 还原前端页面/组件”的时候。

这是最常用的一个 skill。你在 Figma 里选中一个 Frame，给 Cursor 贴上链接，让它帮你生成代码，背后调用的就是 figma-implement-design。

3. figma-generate-design

干什么的：反过来——把代码或文字描述写回 Figma。它会优先通过设计系统（组件、变量、样式）来搭页面，避免硬编码样式。

什么时候用：你说”把当前页面生成到 Figma”或”在 Figma 里搭个同款大屏”的时候。

4. figma-generate-library

干什么的：从你的代码库梳理出设计系统——tokens、变量、组件库、主题，然后补齐到 Figma 里，让后续设计和代码更一致。

什么时候用：你觉得 Figma 里很乱、没有规范，想先把”组件/变量/主题”建好的时候。

5. figma-code-connect

干什么的：维护 Figma 的 Code Connect 映射文件，让 Figma 组件能关联到代码里的真实组件用法。

什么时候用：你们团队用 Code Connect 做设计系统联动的时候。

使用场景

搞清楚每个 skill 之后，来看看实际怎么用。

场景一：Figma 设计稿转为前端代码

这是最经典的场景。设计师给你一个 Figma 链接，你直接让 Cursor 生成代码。

操作步骤：

1. 在 Figma 里选中要转代码的 Frame，复制链接

首次提示词可以这样写：

使用 @Figma 当前选中的 frame，生成 React + Tailwind 组件。严格遵循 Figma 中的：Variables（颜色、spacing、radius）Auto Layout 结构组件 Variants（包括所有交互状态）字体、阴影、精确间距生成代码放到 src/components/ 下，遵循项目现有风格。

这里有个关键：一定要选中具体元素再复制链接，不要复制整个文件的链接。不然token在燃烧。

持续优化：

说实话，第一版出来的代码还原度可能不太高——10% 都不到也不是夸张。这时候别急，开始”PUA”它：

"用项目里的 shadcn/ui 组件替换，不要硬编码""这个间距再收紧 2px，对齐左边""这个阴影用 Figma 的 blur 和 offset 精确复刻"

场景二：前端代码到Figma 设计

反过来也行——你已经有了一个前端页面，想让 Figma 里有对应的设计稿。

操作步骤：

1. 先让 Cursor 做个规划：根据参考图得出 UI 设计规范，再根据规范把页面生成到 Figma。
2. 让 Cursor 执行规划，它会调用 figma-generate-design 来写 Figma。

反正我用下来这个方向目前效果还比较差，demo 转 Figma 奇差无比。但如果你只是想快速出个粗糙的设计稿做沟通，勉强能用。

最后，总结下个人使用体验

虽然现在 Figma MCP 的还原度还远远不够完美，但我却也没有打开Figma去自己画一个的想法。这大概就是工作方式的改变吧。

后面我会尝试一小部分一小部分给AI让去做。如果彻底走通了，做出完美的设计来，那UI这个工作我就自己做了，想想和UI设计师们battle的日子，估计也到头了。。。

以上就是全部内容，如果有好的使用技巧欢迎留言，如果有帮助记得给我点点赞~