Figma MCP Server 上手指南让 AI 直接读懂你的设计稿3 步跑通 Figma 设计稿转代码【免费下载链接】mcp-server-guideA guide on how to use the Figma MCP server项目地址: https://gitcode.com/GitHub_Trending/mc/mcp-server-guideFigma MCP Server 是官方出的远程服务把 Figma 的布局、颜色、组件结构直接递给 AI。粘贴一个设计稿链接AI 就能输出代码不用导图、不用标注。它覆盖 Figma 设计稿转代码、Figma Code Connect 组件互连也支持 Figma Make 接入 AI。设计师和前端都能上手按本文操作5 分钟跑通第一次生成。 先看一个真实场景把 Make 原型里的弹窗搬进项目Before你在 Make 里搭好弹窗原型想落进 React 项目。手动流程是对着画板截图、取色、量间距、补交互逻辑一个弹窗耗掉大半天改完还要返工。After你把 Make 项目链接丢给 AI补一句“从这个 Make 项目里拿弹窗组件的行为和样式用我现有的 Popup 组件来实现。”AI 会先列出 Make 项目里可取的文件你选中弹窗相关的那几个它拉取上下文再基于原型的功能和样式扩展现有 Popup 组件。一个下午对齐原型代码直接进代码库。前提是客户端支持 MCP resources 能力VS Code 和 Cursor 都支持。⚡ 5 分钟完成 Figma MCP Server 接入它是远程服务地址固定为https://mcp.figma.com/mcp。支持 Streamable HTTP 的客户端都能连不用 clone 任何东西。VS CodeMCP 面板三步加服务按⌘ Shift P搜MCP:Add Server选 HTTP。粘贴https://mcp.figma.com/mcp回车提示输入服务器 ID 时填figma。选全局或仅当前工作区mcp.json自动写入{ servers: { figma: { type: http, url: https://mcp.figma.com/mcp } } }打开聊天面板切到 Agent 模式输入#get_design_context。能看到工具列表说明接入成功看不到就重启 VS Code。注意VS Code 里用 MCP 需要账号已启用 GitHub Copilot。Claude Code一条命令装插件装插件一条命令服务器配置和技能规则一起带上claude plugin install figmaclaude-plugins-official想手动接入也行终端执行claude mcp add --transport http figma https://mcp.figma.com/mcp再用claude mcp list确认。Cursor聊天里装插件在 agent 聊天里输入/add-plugin figma。插件自带 MCP 配置和常用工作流技能。手动配的话进 Cursor Settings 的 MCP 标签页加一条url: https://mcp.figma.com/mcp即可。 3 个高频用法设计稿转代码、Code Connect、生成设计规范用法一Figma 设计稿转代码对 AI 说什么Figma 里选中一个 frame复制链接粘贴给 AI“实现这个设计 https://figma.com/design/xxxx?node-id42-15用 React颜色用项目里的 token代码放 src/components/ui/”你会得到什么一份 React 组件代码间距和颜色映射到你项目的 token图标图片用的是设计稿导出的资源直接进代码库。完整七步流程见 skills/figma-design-to-code/SKILL.md。用法二Figma Code Connect 组件互连对 AI 说什么选中设计库里的 Button 组件复制链接“把这个 Figma 组件连到 src/components/ui/Button.tsx”你会得到什么一个.figma.ts模板文件。之后 AI 生成代码遇到这个组件直接 import 你的 Button不再现写。注意两点组件要发布到团队库账号需要 Organization 或 Enterprise 档。用法三生成项目设计规范对 AI 说什么“分析我这个代码库生成 Figma 转代码的设计系统规则”你会得到什么一份规则文件写清布局原语、文件组织、命名习惯、哪些值禁止硬编码存进 IDE 配置目录。之后 AI 每次生成代码都遵守同一套约定。 踩坑速查表现象原因一句话解法工具报错说不认识节点你粘贴的是文件链接没带node-id在 Figma 里先选中具体 frame 再复制 URL输出被截断、组件缺失一次选的节点太大上下文装不下先用get_metadata看节点树再逐个子节点取上下文图标加载不出AI 却装了新图标包Figma 返回的localhost资源地址被 AI 忽略了规则文件里写死localhost 资源直接引用禁止导入图标包生成代码总不复用你现有组件组件没发布或没连 Code Connect把组件发布到团队库按用法二连一次报 429 或月度额度耗尽Starter 和 View/协作席位每月只有 6 次调用额度升级到 Full/Dev 席位或下月重置VS Code 里#后面看不到 figma 工具没启用 GitHub Copilot或配置没生效确认 Copilot 已开重启 VS Code 装好之后的 5 步打开 Figma选中一个简单 frame复制带node-id的链接。在 AI 对话里粘贴链接说“实现这个设计”看第一份代码。把代码存进src/components和设计稿逐像素对一遍。给会重复的元素建组件并发布到团队库连上 Code Connect。让 AI 生成项目规则文件存进 IDE 配置目录之后每次生成都吃同一套约定。【免费下载链接】mcp-server-guideA guide on how to use the Figma MCP server项目地址: https://gitcode.com/GitHub_Trending/mc/mcp-server-guide创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考