- 掌握使用 Figma Make 连接外部 API（如 Mapbox）创建动态、可交互地图原型的方法
- 学习如何利用 Make 的属性面板和批注功能，在代码环境中进行精准的视觉与交互编辑
- 了解设计师直接在生产代码库中修复界面问题、绕过产品待办列表的工作流程
- 对比传统原型方法与 Figma Make 在效率、保真度和协作上的差异
背景：为什么需要连接设计与真实代码的动态原型？
在传统的设计开发流程中，一个长期存在的痛点是原型与最终产品之间的巨大鸿沟。设计师使用 Sketch、Figma、Framer 等工具制作的原型，往往是静态的或交互逻辑简单的。当面对高度动态、数据驱动的复杂界面时，这种原型在用户测试中显得苍白无力，无法提供真实的操作感受。
以汉莎航空系统（Lufthansa Systems）为例，他们为飞行员设计的 Lido Pilot Apps 核心是一个动态地图，需要实时显示航线、航点、天气、机场移动地图（AMM）及空中交通信息。用静态截图或简单动效向飞行员收集反馈，效果远不如一个行为接近真实应用的原型。 过去，团队尝试了多种工具，但始终难以在原型中实现动态地图，直到他们开始使用 Figma Make。
另一方面，对于网站或应用中的细节打磨和无障碍（Accessibility）改进，传统流程也效率低下。设计师发现问题后，需要创建工单（Ticket）并放入产品待办列表（Backlog），等待工程师排期。这个过程不仅缓慢，而且设计意图在文字描述中容易丢失。Figma Make 提供了一种可能性：让设计师直接在生产代码中做出修改，并由工程师进行代码审查。
准备：开始使用 Figma Make 前需要什么？
要实践本教程中的工作流，你需要准备以下条件。请注意，具体功能可用性和价格以 Figma 官方最新说明为准。
软件与账号
你需要一个 Figma 账号，并且该账号所在的工作区或计划已开通 Figma Make 功能。根据资料，Figma Make 已结束测试，向所有用户开放。
关键功能与概念
本教程将涉及 Figma Make 的几项核心功能：1) 通过提示词或连接代码库创建原型；2) 使用属性面板（Properties Panel）进行视觉编辑；3) 使用批注（Annotations）为 AI 代理（Agent）提供上下文；4) 将修改直接推送至 GitHub 代码库。
外部资源（可选但强大）
为了创建像汉莎航空那样的动态地图，你需要接入外部数据源。资料中提到的资源包括：Mapbox（自定义地图平台）、OpenSky Network（提供空中交通样本数据）。这些通常需要 API 密钥。对于直接修改生产代码的工作流，你需要访问目标代码库（如 GitHub 仓库）的权限。
- Figma 账号及 Make 功能权限
- （动态地图原型）Mapbox 等地图服务的 API 凭证
- （代码直接编辑）GitHub 仓库的访问权限
- 对目标设计领域的基本了解（如航空术语或前端组件结构）
1创建连接真实数据的动态地图原型
汉莎航空的案例展示了如何将复杂的业务逻辑和数据融入原型。他们的起点是一个基于 Mapbox 构建的、与 iPad 应用共享数据的内部网页版地图。
核心操作是将这个现有的网页地图集成到 Figma Make 中。 他们尝试了两种方法：调用该网页版的 API，或者直接使用其公开链接。两种方式在 Make 中都能良好运行。这意味着，你可以在 Make 原型中嵌入一个行为与真实应用近乎一致的动态地图，支持缩放、平移等操作。
接着，他们将 Figma 设计文件中制作好的顶部栏、底部栏和图层图标直接复制粘贴到 Make 中。这样，一个高保真的、可交互的驾驶舱地图原型就初具雏形了。
提示词示例（调整飞机图标大小）: Apply Federal Aviation Administration (FAA) aircraft weight classes to the icons: super, heavy, large, small.提示词示例（筛选数据）: Show sample aircraft markers only within 500 nautical miles of our simulated position.2使用属性面板与批注进行精准编辑
当你的原型建立在真实代码基础上时，Figma Make 提供了两种超越文本提示词的精准编辑方式：属性面板和批注。这解决了纯文本提示可能带来的模糊性和猜测工作。
属性面板 让你能像在 Figma Design 中一样进行视觉编辑。选中元素后，你可以直接调整内边距（Padding）、圆角（Corner Radius）、字体粗细（Font Weight）、透明度（Opacity）、Z 轴索引（Z-index）和边框样式（Border Style）等。你还可以看到完整的 DOM 树（相当于代码的图层面板），并一次性选中所有相同元素的实例进行批量修改。
批注 则适用于那些超越视觉属性的更改，例如交互和动画。你可以在画布上直接圈出需要修改的区域，然后用自然语言描述变更。这为 AI 代理提供了精确的位置上下文和灵活的指令。
批注指令示例（交互）: When you hover over this thumbnail, have it zoom in slightly.批注指令示例（动画）: Fade this button in after a 300ms delay.批注指令示例（微交互）: Add a subtle press effect when this button is tapped.3直接在生产代码中修复与迭代，绕过待办列表
这是对传统“设计-交接到开发”流程的颠覆。以一个虚构的“未来猜想博物馆”（MOSF）网站的无障碍改进项目为例。设计师发现了一系列小问题：展览页标签不清、行动号召按钮不明显、日期选择器难以辨认、空搜索结果页面体验不佳。
传统流程是：设计师创建工单 -> 放入待办列表 -> 等待工程师排期 -> 工程师实现时可能误解描述 -> 反复沟通。这些小而重要的“最后20%”的打磨工作很容易被无限期推迟。
使用 Make 的新流程是：设计师在获得工程师授权后，直接将项目的 GitHub 仓库连接到 Figma Make。设计师在 Make 中基于生产代码进行修改，然后由工程师进行代码审查（Code Review）。这逆转了交接方向：从“设计师描述，工程师构建”变为“设计师构建，工程师审查”。
案例分析：汉莎航空动态地图原型的价值与测试
让我们回到汉莎航空的案例，看看他们利用 Figma Make 构建的动态地图原型具体解决了哪些之前无法测试的问题。
测试动态交互的阈值：例如，他们可以找到“空中交通信息应该在哪个缩放级别出现而不至于使地图混乱”，因为现在飞行员可以在可缩放的原型上直接操作并给出反馈。
验证复杂的业务逻辑与法规要求：在与地图制图师同事合作时，他们可以试验像机场移动地图（AMM）这样的不同类型地图。例如，测试飞机在起飞瞬间跑道颜色切换的效果，这是一个区分地面交通与空中交通的法规要求，必须亲眼看到动态过程才能评估。
意外发现与快速迭代：飞行轨迹（Flight trajectories）的显示甚至是在实验过程中意外产生的副产品。这个未计划的功能为他们带来了全新一轮的反馈。
关键价值在于：所有这些测试和迭代都发生在接触实际 SwiftUI 代码实现之前。这意味着开发团队最终得到的是经过充分思考和验证的设计方案，减少了后期的返工和修改成本。
对比与选择：何时使用 Figma Make 与传统方法？
Figma Make 并非要完全取代传统设计工具，而是为解决特定痛点提供了新选择。根据资料中的案例和数据，我们可以总结其适用场景。
一份由 Figma 数据科学团队进行的随机对照试验（RCT）显示，使用 Figma Make 后，整体设计工作速度提升了 20%，任务难度感知降低了 16%。其中，项目经理（PM）受益最大，任务速度提升 23%，难度感知降低 37%。这表明 Make 尤其适合需要快速探索想法、但又缺乏深度设计技能的角色。
| 场景/需求 | 推荐方法 | 关键原因 |
|---|---|---|
| 为复杂、数据驱动的界面（如动态地图、仪表盘）进行高保真用户测试 | Figma Make (连接API/代码) | 能创建行为接近真实产品的交互原型，反馈质量高 |
| 对现有产品进行细节打磨、无障碍改进等“小修复” | Figma Make (直接编辑生产代码) | 绕过待办列表，快速上线，且能发现代码依赖，避免不一致 |
| 快速生成概念原型或探索多种视觉风格 | Figma Make 或传统设计工具 | Make 的提示词生成速度快，但精细控制可能仍需传统工具辅助 |
| 大型、结构明确的新功能开发 | 传统设计+开发协作流程 | 需要清晰的架构设计和专业分工，Make 更适合迭代而非从零搭建复杂架构 |
| 项目经理或产品负责人快速验证想法 | Figma Make | 显著降低设计门槛，提升沟通和验证效率 |
进阶技巧与注意事项
将 Make 作为“协作思考伙伴”
汉莎航空的设计师发现，Make 不仅能接受指令，还能主动提供建议。当你提出一个需求时，它经常会按复杂度（简单、中等、困难）提供多种实现方案。这使其更像一个能拓展你思路的合作伙伴。
高效使用信用点数（Credits）
使用属性面板和批注进行编辑，比纯文本提示消耗的令牌（Tokens）更少，完成速度更快。所有编辑在应用前都是暂存且不消耗点数的，务必先预览再应用。
建立团队模板与知识共享
汉莎航空团队创建了包含应用框架和动态地图的 Make 模板，供其他设计师直接开始实验。这种内部最佳实践的扩散，能加速团队对新工作流的适应。
理解局限性
研究表明，项目经理在最简单和最快的任务上收益明显，但在最具挑战性、最复杂的任务上并未体验到显著的效率提升。这意味着对于高度复杂的任务，专业设计师的经验和判断仍然不可替代。Make 是强大的辅助和加速器，而非万能解决方案。
总结
Figma Make 代表着设计工具向“设计-代码”一体化迈出的重要一步。它通过连接真实数据源和生产代码，使设计师能够创建过去难以实现的高保真动态原型，甚至直接参与代码层面的细节优化。
其核心价值在于“连接”与“缩短回路”：连接静态设计与动态行为，连接设计意图与最终实现，并将反馈和修改的回路从漫长的工单流程缩短为直接的编辑与审查。
对于中国设计师而言，学习并应用 Figma Make 并非要求每个人都成为全栈工程师，而是掌握一种更高效验证想法、打磨产品的新范式。无论是构建一个充满实时数据的复杂仪表盘原型，还是快速修复一个影响用户体验的按钮状态，Make 都能让你更接近产品的最终形态，确保那些至关重要的“最后20%”体验细节不会被遗忘在待办列表的角落。从今天开始，尝试将你的下一个复杂原型或细节优化任务，放在 Figma Make 中重新思考一遍吧。
要点速览
- Figma Make 能通过 API 集成真实数据，创建高保真动态原型，极大提升用户测试反馈质量。
- 属性面板和批注功能提供了比纯文本提示更精准、高效的代码编辑方式，并节省 AI 信用点数。
- 设计师可以直接在生产代码中修改界面，绕过产品待办列表，由工程师进行代码审查，实现流程反转。
- 该方法特别适用于数据驱动界面、细节打磨、无障碍改进及项目经理快速验证想法的场景。
- 使用 Make 后，整体设计任务效率平均提升约20%，项目经理的效率提升尤为显著。
- 最佳实践是结合使用 Make 与传统设计工具，在 Figma 画布上实现设计与代码探索的闭环。
