设计稿转代码这件事，如今满屏都是"AI 一键生成"，但早在 AI 之前就有人把这条路走通了——bernaferrari/FigmaToCode 从 2020 年做到现在：不调 AI 模型、不连外部服务、不上传设计稿，纯确定性规则在 Figma 插件沙箱内把选中图层转成 HTML、Tailwind、Flutter、SwiftUI 等多种代码。约 5.2k Star、GPL-3.0 协议，官网口号"Fast, flexible Figma-to-code conversion. Private by design"。在 AI 转码的喧嚣里，它是一个少见的反潮流样本。本文按"概述 → 设计哲学 → 输出矩阵 → 转换流水线 → 对比 → 总结"组织全文。
1、概述
FigmaToCode 定位为快速、灵活的 Figma 转代码转换器：在 Figma 里选中画板、组件或图层编组，插件生成可编辑的视觉脚手架——可以复制、精修，或直接下载为起步项目。由巴西开发者 Bernardo Ferrari 2020 年 6 月创建，维护至今超过六年，约 5.2k Star、507 Fork、GPL-3.0 协议，TypeScript 主体，以 Figma 社区插件 分发，另有 figma-to-code-plugin.vercel.app 官网提供交互式预览与文档。
它瞄准的空档：视觉设计与真实实现之间的过渡地带——设计师给一份稿，前端要一份能跑的起点。与截图转码服务不同，它基于 Figma 的结构化数据做确定性输出：同样的选区与选项，跑两遍结果一致。
2、设计哲学：Privacy by design
README 把"私有"作为第一卖点，四条卖点的前两条都关于此：
- 免费开源——无账号、无试用、无生成积分、无次数限制
- 设计私有——已发布插件的 manifest 配置
networkAccess.allowedDomains: ["none"]，即插件自身不发起任何网络请求
数据流向一句话说清：选区节点经 Figma 插件 API 读取、在内存中归一化、由框架专属的 TypeScript 代码转换、返回插件界面。没有遥测、没有设计上传、没有外部模型、没有独立账号。
这个定位不是技术保守，而是场景判断：它适合"快速手工探索"以及"外部设计流程不被允许的团队"——企业内网、涉密项目、合规敏感环境，"不出网"本身就是刚需。Figma 已是联网产品并按你的计划与策略处理文件；这个插件不给选中的设计数据增加任何新的网络目的地。
3、输出矩阵：五类目标
同一个选区，按需选择输出目标，可同时生成多种形态：
| 目标 | 输出模式 |
|---|---|
| HTML | HTML、React（JSX）、Svelte、styled-components |
| Tailwind CSS | HTML、React（JSX）、Twig；支持 Tailwind 3 与 Tailwind 4 |
| Flutter | Flutter 应用、无状态 widget、snippet |
| SwiftUI | Preview、View 结构、snippet |
配套可调选项（仅对所选目标生效时才显示）：
- Figma 图层名编入生成的 class
- 间距与颜色圆整到最近的 Tailwind token
- 生成 Tailwind 4 语法并加自定义 class 前缀
- 使用 Figma 颜色变量
- 图片以 Base64 内嵌进 HTML
- 矢量图形导出为 SVG
产出物还能打包成可下载的起步项目：Web 端可选 Vite / Next.js / 静态 HTML；Flutter 自带 pubspec.yaml、资产与安装说明；SwiftUI 含源码、资产目录与安装说明。官方定位很克制：这些导出"刻意保持小巧、依赖极轻，是起点而非生产应用"。
4、转换流水线：小型编译器
README 对内部机制的类比很精确——"行为更像一个小型编译器，而非截图转码服务"，五步流程：
- 读取——检查选中的 Figma 节点及其布局与样式元数据
- 归一化——转成中间表示树（不改动源文档）
- 优化——解析父子关系、Auto Layout、对齐、尺寸与定位
- 生成——把归一化树发给所选的 HTML / Tailwind / Flutter / SwiftUI 后端
- 解释——代码、预览数据、提取的资产与转换警告返回界面
两个工程细节值得注意。其一，规则是公共 TypeScript——转换逻辑可以检视、测试与改进，不依赖托管 API，呼应 GPL-3.0 的开源精神。其二，警告优于伪装：当细节无法干净翻译（复杂效果、部分矢量），插件报告警告而非假装结果精确，界面里目标引擎的缺口会显式浮出——诚实的降级比沉默的失真对开发者更有用。
支持范围如实披露：Auto Layout、嵌套画板与编组、对齐、尺寸与堆叠、混合与绝对定位、排版、填充、描边、圆角与多种效果、颜色变量与多种渐变、图片与本地资产导出、Web 与原生目标下的响应式视觉脚手架。
本地开发环境要求 Node.js 24+ 与 pnpm 11：
# 从仓库根目录安装工作区
pnpm install
# 启动插件 watcher 与官网打包器
pnpm dev
# 网站运行于 http://localhost:3000
# 只开发 Figma 插件则过滤
pnpm --filter plugin dev
随后在 Figma 中 Plugins → Development → Import plugin from manifest，选择仓库的 manifest.json 即可热加载开发版。
5、横向对比
Figma 转代码三代同堂，路线泾渭分明：
| 方案 | 路线 | 优势 | 局限 |
|---|---|---|---|
| FigmaToCode | 确定性规则（2020 起） | 完全离线私有、输出可预期、多目标矩阵 | 无 AI 语义推断 |
| Framelink MCP | MCP + Agent | Agent 拿精确数据写代码、灵活接入任意框架 | 需 Agent 与 API 密钥 |
| v0 / Lovable | 托管 AI 平台 | 一句话生成 + 部署 | 平台锁定、设计需上传 |
选型建议：
- 涉密或合规敏感、设计稿不能出网 → FigmaToCode 是为数不多的选择
- 日常 Agent 编码、要灵活还原设计 → Framelink 类 MCP
- 组合玩法：FigmaToCode 快速出脚手架做结构核对，AI 工具在此基础上做语义化重构——确定性打底、智能化加工
选型建议：
- 涉密或合规敏感、设计稿不能出网 → FigmaToCode 是为数不多的选择
- 日常 Agent 编码、要灵活还原设计 → Framelink 类 MCP
- 组合玩法：FigmaToCode 快速出脚手架做结构核对，AI 工具在此基础上做语义化重构——确定性打底、智能化加工
6、总结
FigmaToCode 是一个维护六年的开源 Figma 转代码插件（约 5.2k Star、GPL-3.0、TypeScript）：确定性转换规则在插件沙箱内运行——读取、归一化、优化、生成、解释五步流水线，同一选区输出 HTML / React / Svelte / Tailwind 3 与 4 / Flutter / SwiftUI 多种形态，配套精修选项与可下载起步项目；allowedDomains: ["none"] 的网络配置让"Privacy by design"落到实处——不调模型、不上传、不出网。
它适合把 Figma 稿快速变成可编辑脚手架的场景——个人原型、内部工具起步、以及外部 AI 服务不被允许的合规敏感团队；边界同样来自它的哲学：没有 AI 推断，语义、交互与无障碍仍需人工补齐；复杂效果与部分矢量只有近似或警告；Figma 文档本身只描述视觉结构，生成物务必当作起点代码、审查后再上线。在 AI 转码的赛道里，它证明了"确定性 + 私有 + 可检视"依然是站得住的产品定位——对隐私敏感团队，这甚至不是旧路线，而是唯一路线。 。
