用途:Figma Make 是 AI 原型工具,生成的 .make 文件包含 React/TypeScript 源代码、设计令牌、资源和 AI 对话记录,但无法通过 Figma API 获取。本工具通过逆向 .make 格式,提取全部内容并生成可运行的 React 应用。
主要能力:解析 canvas.fig 自定义二进制格式(fig-makee 头、Deflate 压缩的 Kiwi schema、Zstandard 压缩的消息数据),导出源码文件、设计令牌(hex/rgba/hsl 颜色、字体、CSS 变量)与图片资源,并组织为 React 应用结构,同时修正导入路径(如 @radix-ui 版本号、figma:asset:hash 转为 /images/hash.png)。
使用方式:先克隆仓库并进入目录,运行 ./run-all.sh ../YourFile.make 完成提取,再在 output/react_app 下执行 npm install --legacy-peer-deps 和 npm run dev。也支持分步执行 node 01-decode-canvas.js、02-extract-source-code.js、03-extract-design-tokens.js、04-create-react-app.js,以及 ./cleanup.sh 清理。
适用场景:需要将 Figma Make 原型转为本地可编辑、可运行的 React 项目时使用。
限制:属于逆向工程,提取代码仍受 Figma 服务条款与相应许可约束;仅 CODE_FILE 节点含源代码;依赖 fzstd 处理 Zstandard 压缩;安装可能因 React 18 出现 peer 依赖冲突,需 --legacy-peer-deps;生成应用使用 Tailwind v4 与 @tailwindcss/postcss;main.tsx 省略 React.StrictMode 以避免 Framer Motion 动画问题。费用与平台支持资料暂未提供。