前言
每个移动端开发者都经历过这个场景：设计师丢来一个 Figma 链接，你打开看了看，叹口气，开始对着设计稿一个像素一个像素地写 UI 代码。
一个中等复杂的页面——带导航栏、列表、卡片、底部按钮——手写 Compose 或 XML 布局，至少要半天。如果算上间距微调、主题适配、深色模式，一天都打不住。
我一直在想：这件事能不能自动化？
不是那种"截个图让 AI 猜"的方式，而是真正理解设计稿的结构，生成能直接用的代码。
折腾了几个月，踩了不少坑，最后做出了一个开源工具叫 figma-to-mobile。今天把过程中的思考和技术细节分享出来。
现有方案我都试过了
在动手之前，我把市面上能找到的方案都试了一遍：
方案一：Figma 插件（Locofy、Anima、TeleportHQ）
这类工具的思路是：装一个 Figma 插件，选中图层，直接导出代码。
优点： 开箱即用，不需要配置。
问题：
- 导出的代码大量使用绝对定位（
absoluteOffset、position: absolute），完全不是移动端的写法 - 不理解 Auto Layout 的语义——Figma 里明明是个 Column，导出来却是一堆写死坐标的 Box
- 付费，而且不便宜（Locofy Pro 要 $25/月）
- 导出后几乎无法迭代，改一点设计就要重新导出
方案二：截图给 AI（GPT-4V、Claude Vision）
最近很火的思路：截个图，丢给多模态 AI，让它生成代码。
优点： 简单粗暴，什么设计工具都行。
问题：
- AI 只能"看"到像素，猜不出布局结构。一个 8 行的列表，AI 可能给你写 8 个独立的 Row，而不是一个 LazyColumn
- 颜色靠猜，经常偏色（#333333 和 #2C2C2C 肉眼看不出，但代码里不一样）
- 间距靠猜，误差大
- 完全没有主题信息（Material3 Color Scheme、Typography）
- 没有组件状态信息（按钮的 pressed/disabled 状态？不知道）
方案三：手写
最靠谱但最慢。好处是代码质量完全可控，坏处是——太慢了。
我的思路：直接读 Figma 的设计树
上面三种方案的核心问题是：信息丢失。
- 插件导出丢失了布局语义
- 截图丢失了所有结构信息
- 手写没有丢失信息，但你自己就是"解析器"
Figma 其实有完整的 REST API，可以拿到一个节点的完整设计树：
- 每个节点的类型（FRAME、TEXT、INSTANCE、VECTOR）
- Auto Layout 参数（方向、间距、对齐、padding）
- 填充色、描边、圆角、阴影
- 文字属性（字体、字号、行高、颜色）
- 组件实例信息（指向哪个 Component，当前 Variant 属性）
这些信息足够生成高质量的布局代码。
关键洞察：与其让 AI 从像素猜结构，不如把结构直接喂给 AI，让它做翻译。
技术实现
整个工具分三步：提取 → 解释 → 生成。
第一步：从 Figma API 提取设计数据
写了一个 Python 脚本（figma_fetch.py），输入 Figma 链接，输出精简后的设计树 JSON。
# 解析 Figma URL，提取 file_key 和 node_id
# GET /v1/files/{file_key}/nodes?ids={node_id}
# 返回完整节点树，包括子节点、样式、Auto Layout 参数
Figma API 返回的原始数据非常冗余（一个中等页面可能有 2MB JSON），所以做了大量精简：
- 去掉不可见节点（
visible: false） - 合并纯装饰节点（只有背景色的空 Frame）
- 将 RGBA 浮点色值转为
#RRGGBB十六进制 - 提取阴影、渐变等效果信息
- 保留组件实例的 Variant 属性（关键！）
精简后的数据通常只有原始数据的 10-20%，但保留了所有布局和样式信息。
第二步：AI 解释设计语义
这是最关键的一步。拿到设计树后，AI 需要理解"这些节点组合在一起是什么意思"。
举几个例子：
| Figma 结构 | 正确理解 | 错误理解 |
|---|---|---|
| 6 个结构相似的纵向子节点 | LazyColumn + item 模板 | 6 个独立的 Column |
INSTANCE 节点带 State=Pressed | 按钮有多种状态，需要 selector | 只是一个普通按钮 |
| 横向排列、itemSpacing=8 | Row(Arrangement.spacedBy(8.dp)) | 手动加 Spacer |
| padding: 16/16/16/16 | Modifier.padding(16.dp) | 分别写四个方向 |
为此写了一套映射规则（compose-patterns.md、xml-patterns.md 等），告诉 AI：
"当你看到
layoutMode: VERTICAL+itemSpacing: X，输出Column(verticalArrangement = Arrangement.spacedBy(X.dp))"
"当你看到 3 个以上结构相似的子节点，考虑使用
LazyColumn/RecyclerView而不是逐个写死"
第三步：生成平台代码
目前支持四个平台：
| 平台 | 特点 |
|---|---|
| Jetpack Compose | Material3 主题系统，最完善 |
| Android XML | ConstraintLayout/LinearLayout，兼容旧项目 |
| SwiftUI | VStack/HStack/ZStack，适配 iOS |
| UIKit | AutoLayout 约束，适配旧 iOS 项目 |
每个平台有独立的 patterns 文件，定义了 Figma 属性到目标代码的映射规则。AI 根据这些规则生成代码，而不是自由发挥。
这很重要 —— 不限制 AI 的话，它可能生成能跑但不符合团队规范的代码。有了 patterns，输出质量稳定得多。
踩过的坑
坑 1：INSTANCE 节点是金矿
Figma 里的 INSTANCE 节点代表"组件实例"，它指向一个可复用的 Component。
一开始我忽略了这个信息，把所有节点一视同仁地转成代码。结果：一个页面里用了同一个 Button 组件 5 次，生成了 5 段几乎一模一样的代码。
正确做法： 识别出 INSTANCE 节点，提取它的 componentId 和 variantProperties，生成一个可复用的 Composable/View，然后复用。
坑 2：Variant 属性对应组件状态
Figma 的 Component Variants 是个强大的功能。设计师会创建 Button 组件，然后定义变体：
State: Default / Pressed / Disabled
Size: Small / Medium / Large
这些 Variant 属性直接映射到代码里的状态和参数。如果忽略它们，生成的代码只有"默认状态"，交互效果全丢。
坑 3：Figma 的 px 不等于 Android 的 px
Figma 里的单位是 CSS px（1:1 对应 dp），不是 Android 的物理 px。这意味着：
- Figma 16px → Compose
16.dp（不是 16.px） - Figma 字号 14px → Compose
14.sp
看起来简单，但如果搞错了，整个页面的尺寸都会偏。
坑 4：Auto Layout ≠ 绝对定位
Figma 支持两种布局：Auto Layout（自适应）和自由定位（手动拖拽）。
很多插件把自由定位的节点也导出成绝对坐标，在移动端完全不可用。我的做法是：
- Auto Layout 节点 → 映射到 Column/Row/LazyColumn
- 自由定位节点 → 用
Box+Modifier.offset()+ 警告提示
并且在输出里告诉用户："这个节点使用了绝对定位，建议在 Figma 里改成 Auto Layout 以获得更好的代码质量。"
坑 5：设计稿里的"装饰性"节点
设计师喜欢用空的 Frame 做间距、背景分隔、装饰效果。这些节点在设计稿里有意义，但转成代码就是垃圾——一堆什么都不做的空 Box。
解决方案：在提取阶段就过滤掉"只有背景色、没有子节点、没有文字"的叶子节点，或者合并到父节点的 padding/background 里。
效果对比
用一个 Material Design 3 的消息应用设计稿做测试：
| 指标 | 截图给 AI | Figma 插件导出 | figma-to-mobile |
|---|---|---|---|
| 布局结构正确 | ❌ 大量绝对定位 | ❌ 绝对定位 | ✅ Column/Row/LazyColumn |
| 颜色准确 | ⚠️ 靠猜，有偏差 | ✅ 准确 | ✅ 准确 |
| 间距准确 | ❌ 误差大 | ✅ 准确 | ✅ 准确 |
| Material3 主题 | ❌ 没有 | ❌ 没有 | ✅ 有 |
| 组件复用 | ❌ 重复代码 | ❌ 重复代码 | ✅ 提取复用 |
| 可以迭代 | ❌ 重新截图 | ❌ 重新导出 | ✅ 自然语言修改 |
不是银弹
说几个这个工具做不到的事，免得大家期望太高：
- 不能处理复杂插画/图标——Figma 里的 Vector 节点（SVG 路径）目前只标记为"需要导出为图片资源"，不会转成代码绘制
- 需要设计稿规范——如果设计师完全不用 Auto Layout，全靠手动拖拽定位，输出质量会大打折扣
- 不能替代开发者——生成的代码是"80% 完成度"的起点，剩下 20%（业务逻辑、数据绑定、动画）还是要自己写
- 依赖 AI 的理解能力——AI 偶尔会对复杂嵌套结构产生误判，需要人工审查
但 80% 的重复工作被自动化了，这已经是巨大的提效。
怎么用
工具是 AI Agent Skill 的形式，支持主流 AI 编程助手：
# OpenClaw（一键安装）
clawhub install figma-to-mobile
# Claude Code / GitHub Copilot
# 复制 figma-to-mobile 文件夹到项目的 skills 目录
ClawHub 页面：clawhub.ai/timeaground…
设好 Figma Token 后，在 AI 助手对话框里直接说：
把这个设计转成 Jetpack Compose：www.figma.com/design/xxx/…
AI 会自动拉取设计数据、分析结构、生成代码。不满意可以继续用自然语言修改：
"把顶部导航栏改成 sticky" "配色换成深色模式" "列表项加上点击波纹效果"
完全开源，MIT 协议，免费使用。
GitHub: github.com/TimeAground…
如果觉得有用，欢迎 ⭐ Star 支持。有问题或建议可以提 Issue，我会积极回复。
也欢迎关注我的 X（Twitter）：@timeaground，会持续分享开发者工具和 AI 效率方面的内容。
