Figma

想象一下，LLM 已经可以很好地设计出前端界面，并且用 H5 页面快速展示给你（你看到的时候代码就已经完成了），那么我们现在还有必要使用 Figma、Stitch 这类设计工具吗？

LLM 当前的设计能力已经很出色了，但它与我们之间仍存在不小的"灵感差距"。就像人与人之间的审美都会有差别一样，何况是人与 LLM。这里恰恰是 Figma 这类工具的价值所在：

1. 1. 存档与对比——方便存档历史设计、做多版本对比，并能自行微调、保留"故事现场"，而不是每次都从零让 AI 重新生成。
2. 2. 对齐与协作——方便与团队其他成员对齐、共同调整（总不能在开会的时候让 AI 现场给你现调一段）。

换句话说，AI 负责"快速产出"，Figma 负责"沉淀、协作与精修"，两者是互补而非替代关系。

简单说明一下Figma功能及应用

Figma 是一款基于浏览器（同时提供桌面客户端）的协作式界面设计与产品开发平台。设计、原型、设计系统、开发交付都能在同一个文件里完成。

Figma 的主要作用：

• • UI/UX 界面设计与交互原型制作；
• • 构建并维护设计系统（组件、样式、变量/Token）；
• • 设计到开发的交付（Dev Mode 检视、代码片段、标注）；
• • 团队实时协作、评论与版本管理。

相比其他设计软件的好处：

• • 真正的实时多人协作——多人可同时在同一文件编辑，改动即时同步，无需来回传文件、对版本。
• • 跨平台、零安装门槛——基于浏览器即可使用，Windows / macOS / 网页通用，团队成员加入成本低。
• • 一体化工作流——设计、原型、白板（FigJam）、演示（Slides）、建站（Sites）、AI 生成（Make）集中在一个平台，减少工具切换。
• • 强大的设计系统能力——团队库、变量、组件变体，让规范能够真正落地复用。
• • 完善的开发协作（Dev Mode + MCP）——可直接对接 Claude Code、Codex 等 AI 编码工具，打通"设计 ↔ 代码"（详见第 4 节）。
• • 生态丰富——大量社区插件、模板与第三方集成。

2. Figma界面

界面比较简单，左侧用户信息及导航，右侧上部分一些工具，下部分就是项目列表或者设计界面（设计工具）

左侧导航栏 集中管理你的文件与团队资源，主要包括：

• • 项目（Projects / Teams）：按团队和项目组织的设计文件；
• • 草稿箱（Drafts）：个人草稿，AI 工具默认会把生成的设计稿放在这里；
• • 收藏（Favorites）：收藏的常用文件或项目；
• • 垃圾箱（Trash）：已删除文件，可在此恢复。

右上方的功能入口

• • Design：开始一个新的设计文件，进入核心的 UI 设计与原型界面（中间无限画布、右侧属性面板、Shift + D 可切换 Dev Mode）。
• • Make：Figma 与 AI 交互的"对话式生成"页面，用自然语言生成设计/应用（AI 额度参考下文套餐介绍，详见第 6 节 Make 说明）。
• • Sites：Figma 的建站功能（见下）。

Figma Sites 功能介绍 Figma Sites 于 Config 2025 推出，是 Figma 内置的网站发布功能：你像平时一样在 Figma 里设计页面，然后直接点击 Publish 就能发布为可访问的真实网站，全程无需离开 Figma、无需第三方工具或开发交付。它的特点包括：

• • 响应式布局：基于 Auto Layout、栅格与断点（breakpoints），让页面自动适配不同屏幕尺寸；
• • 内置交互与动效：跑马灯（marquee）、自定义光标、悬停效果、视差等预设交互，无需写代码；
• • 设计系统集成：可把已发布的团队库组件、样式直接接入站点，保持一致性；
• • 模板与预制区块：导航、Hero 区、整页模板等开箱即用；
• • AI / 自定义代码（chat-to-code，由 Figma Make 驱动）：用提示词生成自定义交互，或直接编辑代码进一步定制。

适用场景：落地页、个人作品集、产品官网等。若需要更专业的营销站、CMS 与高级动效，也可考虑 Framer 等专门工具；若需要交付干净代码给开发，则更适合走 Dev Mode / 代码导出路线。

3. Figma官方套餐

Figma 采用 "套餐 + 席位（Seat）类型" 的组合计价，无法单独购买某个工具，工具访问权随套餐与席位类型捆绑，官方付费内容截图如下：

先理解三种付费席位类型（Full / Dev / Collab）：

• • Full 席位（全功能）：完整访问 Figma Design、Dev Mode、Slides、FigJam，可进行完整的设计创建与编辑。适合设计师。
• • Dev 席位（开发）：面向开发者，提供完整的 Dev Mode 检视与交付能力（看规格、复制 CSS/iOS/Android 代码、导出资源），但不能做完整的设计编辑。价格比 Full 低。
• • Collab 席位（协作）：轻量协作席位，可编辑 FigJam 与 Slides，对 Design 文件为只读/评论。适合产品、运营等需要参与但不做设计的角色。

三个付费版本：

专业版（Professional） 面向独立设计师与中小团队。解锁无限文件、版本历史、团队库、Dev Mode。提供月付与年付（年付更便宜）。

• • Full 席位 $16/月、Dev 席位 $12/月、Collab 席位 $3/月。

组织版（Organization） 面向中大型公司，在专业版基础上增加：分支与合并、组织级库、私有插件、集中化团队管理、设计系统分析等**。**

• • Full 席位 $55/月、Dev 席位 $25/月、Collab 席位 $5/月。

企业版（Enterprise） 面向大型组织，在组织版基础上增加：SSO/SAML 单点登录、高级安全控制、专属支持、来宾访问控制、多工作区等。价格通常需联系销售，常有量级折扣**。**

• • Full 席位 $90/月、Dev 席位 $35/月、Collab 席位 $5/月。

MCP 调用频率限制（与 AI 积分是两回事）

下表是 Figma MCP server 的调用速率限制（即 Claude Code / Codex 等通过 MCP 读取设计数据的频率上限），数据与 Figma 官方开发者文档一致：

补充：写入类工具（如 generate_figma_design、add_code_connect_map、whoami 等）不计入上述读取速率限制。命中限制时会返回 429 / rate limit 错误，需放慢请求或升级席位/套餐。

吐槽一下，免费版本每人每月6次的调用上线，是真的六（不掏钱别想用了！）

AI credits（AI 积分）

AI credits 是 AI 调用的积分，与上面的 MCP 调用次数是两套独立的体系。 它衡量的是你在 Figma 平台上使用 AI 功能（尤其是用 Make 对话生成设计图）的消耗，而不是 MCP 的 API 调用次数。也就是说：通过 Claude Code / Codex 走 MCP 读取设计，消耗的是上表的"调用次数额度"；只有当你在 Figma 里用 Make 等 AI 功能时，才会消耗 AI 积分。

各套餐的 AI 积分额度（每月，按席位）：

• • 免费版 / View 席位：约 500 积分/月（且有 150/天 的上限）；
• • 专业版 Full 席位：3,000 积分/月；Dev / Collab 席位：500 积分/月；
• • 组织版 Full 席位：约 3,500 积分/月；其他席位：500 积分/月；
• • 企业版 Full 席位：约 4,250 积分/月；其他席位：500 积分/月。

注意：积分用尽后付费 AI 功能会停用至下月重置；可通过"AI 积分订阅"（共享积分池，约 $120/月起含 +5,000 积分）或按量付费（约 $0.03/积分）补充。Make 生成一个完整小应用可能一次就消耗几十甚至上百积分，重度使用前请留意余额。

4. 在 Claude Code 或 Codex 中安装 Figma

接入的核心是 Figma MCP server。推荐使用远程（Remote）server（https://mcp.figma.com/mcp），功能最全、无需常开桌面客户端。

4.1 Claude Code

第一步：安装

# 方式一：官方插件仓库安装（推荐，自带 MCP 设置与常用工作流 Skills）claude plugin install figma@claude-plugins-official# 方式二：手动添加 MCP server#  - `--scope user` 表示全局可用，不必每个项目重复添加#  - 如果只想当前项目可用，可以去掉 `--scope user`claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

第二步：授权

# 进入 Claude Codeclaude# 执行 mcp 命令，找到已安装的 figma，回车/mcp

选择 Authenticate，将弹出的授权链接复制到浏览器中完成授权即可。需要重新授权时也是同样的操作。授权完成后，再次运行 /mcp 看到 figma 显示为已连接（connected）即成功。

4.2 Codex

Codex 同时支持 CLI 与 IDE 扩展，二者共享同一份配置。

方式一（最简便）：在 Codex 桌面应用里直接安装 Figma MCP server，按提示完成 OAuth 授权。

方式二（CLI / 配置文件）：编辑 ~/.codex/config.toml（Windows 为 %USERPROFILE%\.codex\config.toml）：

[mcp_servers.figma]url = "https://mcp.figma.com/mcp"# OAuth + streamable HTTP 必须开启 RMCP 客户端，注意这个features 全局只能有一个，如果已经存在把rmcp_client = true复制过去即可[features]rmcp_client = true# 旧版本可能需要：experimental_use_rmcp_client = true

授权：

# 执行该命令，然后会自动打开浏览器进行授权，如果没有设置默认浏览器可能无法自动打开，手动复制到对应的浏览器授权即可codex mcp login figma

最佳实践：结合官方提供的技能来帮助，更方便快速的获得你需要的设计UI，官方技能仓库地址：https://github.com/figma/mcp-server-guide/tree/main/skills，以下是当前的Figma官方的技能：

5. 案例：使用Claude code生成一个登录注册的页面

接入成功后，就可以让 AI 直接基于 Figma 工作。建议的提示思路：先把想要的风格、布局、语言说清楚，让它先在本地生成网页预览，确认满意后再上传到 Figma。

例如可以这样描述："帮我设计一个登录 + 注册页面，风格参考 ××（或：极简 / 拟物 / 玻璃拟态等），主色调 ××，布局为左图右表单，中文界面。先生成本地 HTML 预览给我看，确认后再上传到 Figma。"

这里使用的是 Claude Code。如果描述不够具体，它会让你补充对应的风格、布局、语言等信息， 以下就是他根据我的Prompt进行的进一步的需求确认：

需要注意：这类设计任务比较耗费 Token（要拉取/写入大量设计上下文），建议一次聚焦一个页面或模块，避免一次性丢一整套大设计。

生成完成后，工具默认会把设计稿存放到 Drafts（草稿箱），你可以手动把它移动到对应的项目目录里。

最终生成的登录注册页面示例：

拿到设计稿后，你就可以在 Figma 平台里继续进行调整、对齐与精修。

注意：为了节省MCP api的调用额度，尽量先本地网页预览，然后满意了在上传到Figma。如果不差钱，那么请忽略这条，不过上传次数触发太多也会限流，需要注意！

个人经验总结

• • 先本地预览，再上传 Figma：让 AI 先出 HTML 预览，确认风格方向后再写入 Figma，避免反复消耗调用次数与积分。
• • 描述要具体：风格、配色、布局、语言、参考案例讲得越清楚，返工越少；含糊的需求只会让它反问或跑偏。
• • 分块生成、控制规模：按页面/模块逐个生成，比一次性生成整套设计更稳定，也更省 Token。
• • 善用 Code Connect 与设计系统：把 Figma 组件映射到真实代码组件、规范好变量/Token，AI 才能产出贴合你设计系统的结果，而不是"凭空猜测"。
• • 分清两套额度：MCP 调用次数（读取设计）与 AI 积分（Make 等生成）是独立的；命中频率限制就放慢请求或升级席位，积分不够就关注余额或补购。
• • 草稿箱要及时归位：生成稿默认在 Drafts，记得移动到正确项目，避免找不到或被误删。
• • AI 负责草稿、人负责定稿：AI 出方案的速度很快，但审美对齐、细节微调、团队协作仍由人在 Figma 里完成——这正是 Figma 不可替代的地方。
• • 双向写回要谨慎：把代码 UI 写回 Figma 画布很强大，但会改动设计源文件，建议先在副本或分支上操作。

以上经验，纯属个人经验总结。希望对你有帮助，感谢您的点赞阅读！！！

参考文档

https://help.figma.com/hc/en-us/articles/39216419318551-Get-started-with-the-Figma-MCP-server

https://developers.figma.com/docs/figma-mcp-server/rate-limits-access/

https://help.figma.com/hc/en-us/articles/39166810751895-Figma-skills-for-MCP

https://github.com/figma/mcp-server-guide