figma/mcp-server-guide
A guide on how to use the Figma MCP server
Figma MCP 服务器指南 – 是什么
该仓库包含 Figma 的模型-上下文-协议（MCP）服务器 的文档和设置说明。MCP 服务器是一个轻量级 HTTP 服务，允许 AI 驱动的编码助手（如 GitHub Copilot、Cursor、Claude Code、Gemini CLI）从 Figma 文件中读取设计数据，并在某些情况下将数据写回画布。通过公开特定于设计的工具（如 - get_design_context、generate_image、upload_assets 等），该服务器使 LLM 能够将选定的 Figma 帧转换为结构化数据，进而生成可投入生产的代码。
核心功能
- 读取设计上下文 – 提取选定节点的组件、变量、自动布局信息，以及其对应的 React + Tailwind 表示。
- 写入画布 – （Beta）直接从 AI 客户端创建或修改帧、组件、变量和自动布局。
- 生成占位符资产 – 即时生成图像并上传回文件。
- 代码生成 – 将选定的帧转换为代码，可选使用 Code Connect 保持生成代码与现有组件同步。
- 未来功能 – 将网页转换为 Figma 设计。
谁在使用？
希望使用 AI 助手 连接设计与代码 的开发者。本指南展示了如何从多个主流编辑器（VS Code、Cursor、Claude Code、Gemini CLI）连接该服务器，以及如何提示助手获取设计数据、生成代码或更新 Figma 文件。
速率限制与定价
- 初学者 / 查看 / 协作席位：每月 ≤6 次工具调用。
- 专业版、组织版或企业版的 Dev / 全功能席位：每分钟限制与 Figma 的 Tier 1 REST API 一致。
- 画布写入在测试阶段免费，但未来将转为按使用量计费的功能。
支持资源
- 完整的开发者文档：https://developers.figma.com/docs/figma-mcp-server/
- 用于保持生成代码与代码库同步的 Code Connect 文档。
- 用于视频转故事板和 PRD 转 FigJam 项目计划的工作流技能子文件夹。
TL;DR
此仓库 不是代码库，而是配置 Figma MCP 服务器的逐步指南，使 AI 代理能够读取/写入设计数据并从 Figma 帧生成代码。这是一个真正的 AI 助手集成项目，旨在简化从设计到代码的工作流。
相关
- 项目
- 项目
- 项目
- 项目
- 项目