← 返回列表

新工具 GitHub · pelvo/figstudio

用 figstudio 把本地 .fig 交给 Claude Code 读设计稿并生成代码提示

在本机打开 Figma 导出的 .fig 文件，让 Claude Code 等 agent 读到节点树、React + Tailwind 代码提示、变量 token 与截图

开始尝试

效果

README 内嵌 figstudio-intro-4k.mp4 演示视频；本站不托管截图或视频。

这是什么

新在哪里：以前让 agent 读 Figma 设计稿要走 Figma 账号或 Dev Mode 席位，还用不了本地文件；现在用 figstudio 离线解析 .fig 并把与 Figma MCP 同名的工具注册给 agent。

怎么做到的：先让 agent 通过 figstudio-mcp 拿到文件：用 npx 安装 figstudio-mcp 并注册到 Claude Code；首次需要文件时它调用 open_figstudio_browser 打开与本地服务配对的 figstudio.pelvo.dev 页面，把 .fig 拖进标签页（也可带路径直接读磁盘文件、完全不用浏览器）；随后 agent 用 get_metadata、get_design_context、get_variable_defs、get_screenshot、download_assets 读取节点、代码提示、变量、截图与图片。

适合谁
需要让编码 agent 按设计稿写前端的开发者，以及没有 Figma 付费席位但手上有 .fig 文件的人
能帮你
在离线、无需 Figma 账号的情况下，把 .fig 的节点结构、变量与截图变成 agent 可调用的 MCP 工具结果

评分 三项分开看，不合成总分；热度不等于好用

新颖性
全新做法 · 2026-10-09 出现
热度
未知
易上手
需要一些准备
怎么评的

三项都由本站记录的事实按固定规则算出，编辑不能直接改档位；规则改动会写进更新说明。

新颖性

  • ●●● 全新做法，且有来源依据的出现时间在最近 30 天内
  • ●●○ 老工具新用法或近期刚开放，且有来源依据的时间在最近 30 天内
  • ●○○ 出现时间超过 30 天、未核实到精确日期，或已不再是新做法
  • 其他 出现时间未核实、晚于今天，或新颖类型未核实时按最低一档处理，不靠猜测加分

热度

  • ●●● 最近一次每周人工确认为“热门”：最近 14 天里独立讨论、实际案例、持续时间、传播平台、相对关注五项门槛全部满足（规则 heat-v1）
  • ●●○ 最近一次人工确认为“观察中”：前三项至少一项达到，或讨论增长 ≥ 50%，且至少 2 个独立案例
  • ●○○ 最近一次人工确认为“未进入跟踪”
  • 其他 还没有人工确认过的热度记录时显示“未知”。热度只统计本站已接入的信源，不代表全网

易上手

  • ●●● 准备门槛低且难度入门：不需要新账号或付费，首次尝试不超过 30 分钟，公开可用，会复制粘贴即可
  • ●●○ 准备门槛中等，或门槛低但需要改少量代码或配置
  • ●○○ 准备门槛高：需要商业软件或付费服务、首次尝试超过 2 小时、特殊硬件或网络、排队或邀请且无替代方案，或需要专业知识
  • 其他 只有介绍、还没有站内步骤，或关键步骤已失效时显示“暂不可试”；门槛未核实时显示“未核实”

怎么尝试

  • 时间 首次约 20 分钟
  • 费用 免费：README 未提及收费，浏览器版与源码均免费使用，Apache-2.0 许可；原站未说明费用。
  • 账号 不需要新账号
  • 环境 浏览器版任意现代浏览器；桌面应用仅 macOS Apple silicon；CLI/MCP 支持 Linux x86_64/arm64、macOS、Windows；用 npx 方式需 Node.js；自行构建需 Rust 1.95 或更新
  • 准备 本地 .fig 文件：在 Figma 中用「File → Save local copy」导出，供 figstudio 读取
  • 准备 支持 MCP 的客户端（Claude Code / Cursor / Codex）：调用 figstudio 的 MCP 工具
  • 准备 Node.js（选用）：用 npx 运行 figstudio-mcp，无需编译（无 Node 时也可用 Homebrew 或 Linux tar 包安装 figstudio-mcp）
  • 准备 浏览器（Chrome 等）（选用）：默认 --browser-proxy 路径下打开 figstudio.pelvo.dev 并载入 .fig；改用 /path/to/design.fig 直接读磁盘则不需要浏览器

按下面的步骤就能做出第一个结果。复制命令不会自动执行。

  1. 导出本地 .fig 文件

    在 Figma 中打开设计稿，选择 File → Save local copy，得到 .fig 文件。

    预期结果：磁盘上得到一个 .fig 文件

  2. （免安装）浏览器打开设计稿

    访问 https://figstudio.pelvo.dev ，打开或拖入 .fig 文件；文件留在标签页内，不会被上传。

    预期结果：浏览器中渲染出设计稿画布

  3. 把 figstudio MCP 注册给 Claude Code

    需要 Node.js；npm 会拉取预编译二进制，无需编译。

    bash原始来源命令 
    claude mcp add figstudio -- npx -y figstudio-mcp --browser-proxy

    预期结果：Claude Code 中出现名为 figstudio 的 MCP 服务器

  4. 首次调用时打开配对页面

    agent 第一次需要文件时会调用 open_figstudio_browser，打开与本地服务配对的 figstudio.pelvo.dev 页面；在该标签页打开 .fig。

    预期结果：页面与本地服务配对成功，agent 可读到文件

  5. 让 agent 读取设计信息

    让 agent 依次调用 get_metadata、get_design_context、get_variable_defs、get_screenshot、download_assets。

    预期结果：得到节点树、React + Tailwind 代码提示、变量 token、渲染 PNG 与内嵌图片

  6. （可选）改用磁盘文件，不需要浏览器

    把 MCP 注册为直接读取某个 .fig 文件。

    bash原始来源命令 
    claude mcp add figstudio -- npx -y figstudio-mcp /path/to/design.fig

    预期结果：agent 无需浏览器配对即可读到该文件的节点树

原始来源：figstudio：离线读 .fig 并兼容 Figma MCP ↗