在互联网产品开发中，设计师与开发者之间的协作效率至关重要。Figma 在 2025 Config 推出了 Figma Make，作为一款能帮设计师把设计稿直接变成产品的全新编程工具，它不仅实现了设计稿到原型的快速转化，还拓展了设计师的职能，为行业带来了更多可能性。

一、Figma Make 的功能特点

1. 从设计到原型的快速转化：用户可以将 Figma Design 中的框架直接复制给 AI 模型，保留其结构和元数据，然后通过简单提示词，如 “让这个按钮触发动画” 或 “让这个元素响应滚动”，快速生成可交互的原型。
2. 精准编辑与迭代：设计师可点选设计元素并用自然语言描述更改，实现精确编辑，同时保留设计系统的组件层级和一致性。
3. 无需从零开始：用户可基于现有设计文件操作，无需从零创建原型。
4. 团队协作：支持团队成员共同编辑项目，促进协作。
5. 代码生成与修改：能依用户提示生成代码，开发人员可直接修改调整。
6. 与 Figma Sites 无缝集成：可将生成原型嵌入通过 Figma Sites 发布的页面，实现设计到发布的全流程打通。

二、设计稿转代码的技术原理

1. 设计稿解析：提取 Figma 的 JSON 结构，获取图层位置、样式等元数据。需进行样式归一化处理、图层结构优化等操作，如将阴影转译为 box-shadow，过滤隐藏图层等。
2. 布局分析：将绝对定位转换为 Flex/Grid 布局，解决设计稿与前端习惯差异。采用投影法布局推断、AI 驱动的布局聚类等方法，如用 DBSCAN 算法对元素位置聚类识别容器。
3. 组件识别：匹配设计元素与代码组件库，标注交互逻辑。
4. 代码生成：通过模板引擎将中间表示（DSL）转换为 Vue/React 等框架代码。需执行代码优化策略，如 CSS 原子化、Tree Shaking 等。

三、AI 技术在设计稿转代码中的应用

1. 基于深度学习的代码生成：深度学习模型（如 GPT 系列）通过大规模代码数据集训练，学习代码中的模式和规律，在生成代码时，根据输入前缀预测后续代码元素。
2. AI 辅助布局推断：采用 GNN 建模元素空间关系，解决传统投影法对非常规布局的识别瓶颈。
3. 动态组件代码生成：结合 LLM 生成带业务逻辑的代码，如根据设计稿生成带 API 调用的代码。
4. 设计系统双向同步：建立 Figma Token 与 CSS 变量的映射关系，实现修改设计稿自动更新代码变量。

四、Figma Make 的优势与意义

1. 提高效率：显著减少前端开发中的手动编码时间，让开发者有更多时间专注于业务逻辑和功能优化。
2. 减少误差：自动化过程减少了人为因素导致的布局不一致和样式错误。
3. 加速迭代：设计变更可以快速反映到代码中，支持快速原型验证和产品迭代。
4. 拓展设计师职能：让设计师能够更直接地参与到产品开发的更多环节，提升了其在开发流程中的影响力。
5. 推动行业变革：为设计与开发的协作模式带来了新的思路和方法，推动了整个行业的创新和发展。

Figma Make 的出现，让设计与开发更加紧密地结合在一起，AI 技术的深度融入，使得从设计稿到完整产品的转化变得更加高效、精准和便捷。