Figma MCP 怎么接入设计评审本地跑设计上下文服务用 cpolar 远程给前端联调设计评审最怕的不是改稿而是“设计稿说一套前端页面跑出来又是另一套”。间距差 4px、字号漏了一个状态、组件变量没对上评审会上看着都像小问题落到联调里就是一串返工。这篇不讲泛泛的 MCP 概念只把链路跑起来Figma 桌面端打开设计上下文服务前端在本地接入设计上下文做实现和核对再用 cpolar 把本地评审页面临时给设计师、产品、前端同事看。划重点cpolar 这里只负责暴露前端本地页面或评审入口不暴露 Figma token不暴露 MCP 服务本身也不把内部接口直接丢到公网。1 痛点设计评审卡在“看起来差不多”很多团队做设计评审时流程是这样的设计师发 Figma 链接前端打开设计稿手动看尺寸、颜色、圆角、阴影再回代码里一点点调。页面跑起来后再截图丢群里比对。这个流程能用但很累。尤其是组件状态多、页面层级深、变量命名复杂的时候前端很容易只拿到“视觉结果”拿不到设计上下文。Figma MCP 解决的是这层上下文问题。它让支持 MCP 的编辑器或代码工具读取 Figma 里的 frame、layer、变量、组件、布局信息再把这些信息带到实现环节里。这里别误会MCP 不是替你一键交付页面。它更像一个懂 Figma 的上下文入口把设计稿里那些原本要人工翻看的信息交给开发工具读取和整理。2 Figma MCP 在这条链路里负责什么Figma 官方文档里写得很清楚Figma MCP server 用来把设计信息和上下文带进开发工作流。它能做的事情包括读取设计上下文、从选中的 frame 生成代码、结合 Code Connect 复用组件映射以及在部分工作流里写回 Figma 画布。本文只取其中一条更稳的链路读取设计上下文辅助前端实现和评审。这一条链路分成 4 个角色Figma 桌面端打开设计稿启用本地 desktop MCP server。MCP 客户端VS Code、Cursor、Claude Code 这类支持 MCP 的工具读取设计上下文。前端本地服务运行页面例如 Vite 默认的5173端口。cpolar把本地前端页面临时映射成公网地址发给评审同学访问。这一步要先把边界说清楚Figma MCP 的本地地址是http://127.0.0.1:3845/mcp它只在本机使用。远程同事打开的是前端评审页面不是 MCP 服务地址。如果你只是自己在办公室局域网里看页面cpolar 这一步可以先不做。只要涉及异地评审、远程联调、手机端验收临时公网链接就很省事。3 本地准备打开 Figma desktop MCP serverFigma 的 desktop MCP server 依赖 Figma 桌面端。官方文档给出的本地服务地址是http://127.0.0.1:3845/mcp操作路径按下面走安装并打开 Figma desktop app。登录账号打开一个 Figma Design 文件。在底部工具栏切到 Dev Mode也可以按Shift D。在 Inspect 面板里的 MCP server 区域点击Enable desktop MCP server。底部出现 server 已启用并正在运行的提示后再去配置编辑器。这里别急着关 Figma。desktop MCP server 是依托 Figma 桌面端运行的Figma 退出后本地 MCP 地址就读不到设计上下文了。3.1 在 VS Code 里接入VS Code 走 HTTP MCP 配置。打开命令面板搜索MCP: Add Server类型选 HTTP地址填http://127.0.0.1:3845/mcpServer ID 可以填figma-desktop。配置完成后mcp.json里会出现类似内容{ servers: { figma-desktop: { type: http, url: http://127.0.0.1:3845/mcp } } }做完后切到 Agent 模式在聊天输入框里输入#get_design_context。如果工具列表没有出来先检查 Figma 桌面端是否还开着再重启 VS Code。3.2 在 Cursor 里接入Cursor 里打开Settings进入Cursor Settings找到MCP标签添加全局 MCP server填入{ mcpServers: { figma-desktop: { url: http://127.0.0.1:3845/mcp } } }保存后看 MCP 页面里的连接状态。这里最容易填错的是端口必须是3845路径是/mcp不要写成项目的前端端口。3.3 在 Claude Code 里接入Claude Code 可以直接用官方命令添加 HTTP MCP serverclaude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp claude mcp listclaude mcp list能看到figma-desktop后再回到 Figma 选中目标 frame让客户端读取当前选区或设计链接。如果命令执行后连不上先看 3 个点Figma desktop app 是否开启、Dev Mode 是否打开、MCP server 是否处于 enabled 状态。4 前端如何读取设计上下文并落到页面Figma MCP 支持两种常见输入方式选区读取和链接读取。选区读取更贴近设计评审现场。设计师在 Figma 里选中某个 frame前端在 MCP 客户端里让工具读取当前选区直接围绕这个 frame 实现页面。链接读取更贴近异步协作。设计师复制 frame 或 layer 链接前端把链接交给 MCP 客户端。官方文档说明过客户端不会真的打开这个链接而是提取链接里的 node-id再让 MCP server 返回对应对象的信息。这里可以给客户端一段更具体的提示词别只说“帮我实现这个页面”读取当前 Figma 选中的 frame整理出颜色、字体、间距、圆角、组件层级和交互状态。 只生成前端实现需要的信息不写回 Figma 画布。 基于当前项目的 React TypeScript 结构实现页面并列出需要人工核对的设计差异。这段提示有两个好处一是限定只读设计上下文二是让工具输出可核对项。评审时最有用的不是“代码生成了”而是知道哪些地方已经对齐哪些地方需要人眼复核。5 准备一个可评审的本地前端页面为了让链路更完整这里用 Vite 起一个最小 React 页面。已有项目的同学直接进入项目目录执行本节的启动命令就行。新建测试项目npm create vitelatest figma-review-demo -- --template react-ts cd figma-review-demo npm install npm run dev -- --host 0.0.0.0Vite 默认会监听5173。终端里看到本地地址后在浏览器打开http://127.0.0.1:5173再用命令确认页面有响应curl -I http://127.0.0.1:5173返回里有HTTP/1.1 200 OK或HTTP/1.1 304 Not Modified说明本地页面已经能访问。这一步不是为了测试而测试而是先把“前端页面能本地访问”确认掉。后面 cpolar 只负责转发如果本地5173都打不开公网地址也打不开。6 用 cpolar 暴露本地评审入口本地页面跑起来后再开一个终端启动 cpolar HTTP 隧道。目标端口就是 Vite 的5173cpolar http 5173命令启动后终端会输出公网访问地址。把https://开头的地址发给评审同学对方就能打开你本机的前端页面。如果你习惯用 Web UI也可以打开 cpolar 本地管理页面http://127.0.0.1:9200在 Web UI 里新建 HTTP 隧道时配置按这个填隧道名称figma-review协议http本地地址5173域名类型随机域名地区按页面可选项填写创建成功后到“状态 → 在线隧道列表”查看公网地址。这里有个很实用的提醒评审链接只给需要参与的人评审结束就停掉终端里的 cpolar 进程。免费随机公网地址会在 24 小时内变化用它做临时联调入口正好。7 外网验收评审同学应该看到什么把 cpolar 的公网地址发出去之前自己先用手机流量打开一次不要只在本机浏览器里看。验收按这几项走手机关闭 Wi-Fi使用移动网络访问 cpolar 的https://地址。页面能正常加载首屏样式和 Figma frame 对得上。交互状态能触发比如 hover、弹窗、表单错误提示。刷新页面后还能访问控制台没有接口跨域报错。如果手机打不开先不要怀疑 Figma MCP。按链路排查本地http://127.0.0.1:5173是否能打开。Vite 是否还在运行。cpolar 终端是否还在运行。公网地址是否复制完整尤其是https://前缀。页面接口是否依赖内网地址。这里的核心验收结果很明确远程同事打开的是前端页面不需要登录你的 Figma也不需要拿到你的 MCP 配置。8 安全边界只暴露评审页面不暴露设计服务Figma MCP、本地前端服务、cpolar 三者放在一起时安全边界要提前定好。本地 MCP 地址http://127.0.0.1:3845/mcp只给本机编辑器使用不拿它做公网映射。它承载的是设计上下文访问能力不能当成评审页面分享。cpolar 映射的对象只选前端页面端口例如5173、3000、8080。页面里不要打印 Figma token、MCP 响应原文、内部接口密钥也不要把.env内容输出到浏览器。如果页面要调用后端接口给评审准备一个最小权限的测试环境。接口鉴权、只读数据、临时账号都要提前处理好。评审结束后做 3 件事停止 cpolar 隧道进程。下线临时测试账号或收回访问权限。删除页面里用于调试的日志输出。这几步看着朴素但能避免“为了看一个页面把整条开发链路暴露出去”的问题。9 常见问题9.1 MCP 工具列表为空先检查 Figma desktop app 是否打开再检查是否进入 Dev Mode并确认 MCP server 已经 enabled。编辑器侧刷新 MCP server 后仍然为空就重启 Figma desktop app 和编辑器。3845端口和/mcp路径要逐字核对。9.2 读到的不是目标 frame选区读取时Figma 里必须选中具体 frame 或 layer。多人协作时设计师和前端先约定 frame 名称避免读到外层页面或临时分组。链接读取时复制 frame 或 layer 的链接不要只复制文件首页链接。客户端需要从链接里拿到 node-id。9.3 cpolar 公网地址能打开但页面样式不对这类问题通常在前端侧。先看浏览器控制台确认静态资源有没有 404接口有没有跨域错误。如果页面使用了本机绝对地址例如http://127.0.0.1:3000/api远端浏览器访问时会指向对方自己的电脑。评审页面里要使用可访问的测试接口地址或者把数据 mock 到前端。9.4 评审时要不要暴露 Figma MCP 服务不要。MCP server 是给本机 MCP 客户端读取设计上下文的不是给评审同学直接访问的网页。远程评审只暴露前端页面。设计上下文读取、代码生成、差异整理都留在开发者本机完成。10 总结到这里这条设计评审链路已经跑通Figma desktop app 提供本地 MCP 设计上下文前端在编辑器里读取 frame 信息并实现页面Vite 跑出本地评审入口cpolar 把这个入口临时交给远程同事访问。关键步骤可以压缩成 3 件事在 Figma Dev Mode 里启用 desktop MCP server地址固定为http://127.0.0.1:3845/mcp。在 VS Code、Cursor 或 Claude Code 里接入这个 HTTP MCP server围绕选区或 frame 链接读取设计上下文。前端页面本地跑在5173后用cpolar http 5173临时生成公网评审链接。这套方式的价值不在于炫技而是把“看设计稿、写页面、远程验收”放到一条清晰链路里。Figma MCP 管设计上下文cpolar 管临时访问入口各干各的评审时就少很多来回截图和口头描述。
