Adapty 的 Figma 插件可以将设计文件中的帧转换为流程。在 Figma 中选择帧，发送到 Adapty，导入后会生成一个草稿流程，你可以像操作其他流程一样在流程编辑器中进行编辑。

导入原理

该插件读取您选中的 Figma 帧并上传至 Adapty，Adapty 随后将其转换为新草稿流程的页面。插件不会修改您的 Figma 文件，在您点击 Export to Adapty 之前，任何内容都不会离开 Figma。导入结果与您的设计高度一致，并作为基础流程正常运行：按钮可跳转至下一页面，测验选项可供选择，付费墙也已就绪，等待您关联产品。

请参阅导入限制，了解您可能需要手动调整的内容。

开始之前

导入设计之前，您需要准备：

• 一个 Figma 设计文件：该插件仅在设计文件中运行，不支持 FigJam 白板和 Figma Slides。
• 文件的编辑权限：如果您只有查看权限，插件将无法运行。使用自己的草稿效果最佳。
• 在 Adapty 中拥有一个可编辑流程的应用：导入操作会在您的某个应用中创建流程，请确保您对目标 Adapty 应用中的流程具有编辑权限。

1. 安装插件

安装插件的步骤：

1. 打开 Import to Adapty 插件页面。
2. 点击 Save。插件即可在 Figma 的 Plugins 菜单中使用。
   

Figma 会自动更新已发布的插件，因此你始终使用的是最新版本。

2. 将设计发送至 Adapty

将页面发送至 Adapty：

1. 在 Figma 中，选择要导入的帧。可同时选择多个，将整个屏幕序列一并发送。
2. 前往 Plugins > Import to Adapty。
3. 检查插件列出的选项，然后点击 Export to Adapty。
4. 点击 Open in Adapty。

插件会显示所选元素的名称，并统计生成的页面数量。确认无误后再继续操作。

上传完成后，插件会显示 Done 页面。接下来请执行以下操作：

1. 登录 Adapty。如果在未登录的浏览器中打开导入链接，导入将无法正常进行。
2. 在浏览器中打开导入链接：
   • 点击 Open in Adapty，在默认浏览器中打开导入页面
   • 点击 Copy link 将链接复制到剪贴板，然后在其他浏览器或配置文件中启动导入。

框架如何转化为屏幕

您的选择决定了最终生成多少个屏幕：

• 多个框架：每个框架各自成为一个独立屏幕。
• 一个区段：区段内的每个框架各自成为一个屏幕。
• 单个框架：整个框架成为一个屏幕，即使其中包含其他框架。如需将内部框架分别导入为独立屏幕，请开启 Split into separate screens。

屏幕的顺序由 Figma Layers 面板中图层的排列顺序决定（从下到上），与画布上的位置或点击顺序无关。导航逻辑也遵循同样的顺序，因此请在导出前调整好 Layers 面板中的图层顺序，或在编辑器中重新排列屏幕。请选择单个图框或某个分组，而非整个页面，否则该页面上的所有其他图框也会一并导入。

导出设置

要更改导出内容，请点击 Customize export：

• Export images：包含图片和照片资源。默认开启。
• Image resolution：以 1×、2× 或 3× 导出图片。分辨率越高，清晰度越高，文件也越大。默认为 2×。
• Split into separate screens：将选区内的每个帧作为独立页面导入。默认关闭。

3. 在 Adapty 中完成导入

Open in Adapty 会在你的 Adapty 看板中打开一个浏览器标签页。转换过程在 Adapty 的服务器上运行——该标签页会显示进度，并在完成后创建对应的流程。

1. 选择该流程所属的应用。选择后即开始转换。
2. 保持标签页开启，直到导入完成（可能需要几分钟）。如果提前关闭，请再次打开相同链接以继续。

Adapty 随即开始转换设计，并实时显示进度。

转换完成后，流程将以草稿形式在流程编辑器中打开，名称来源于对应的 Figma 文件，每个页面也会自动生成描述性名称。若有需要人工复查的部分，Adapty 会逐一提示。

导入限制

导入功能会还原你设计稿的外观，并自动连接基础交互：导航、可选分组、输入框和购买操作。但以下部分无法被导入：

• 产品：导入时会创建产品卡片、添加购买操作并插入产品变量的占位符。您需要自行关联实际产品并替换这些占位符。请参阅设置购买。
• 字体：导入不会为文本分配字体。如需恢复字体，请上传字体文件并为相关文本选择该字体。
• 视频：视频导出后为占位符。请在编辑器中添加视频。
• 隐藏图层：隐藏图层不会导出。

每次导出最多包含 50 个屏幕和 20 MB 的设计数据。图片分辨率对文件大小影响最大，若导出文件过大，可将 Image resolution 设为 1× 来缩小体积。

每次导出会生成一个流程。若需再次导入同一设计，请重新从 Figma 导出。

导入链接在导出后一小时内有效。请一次性完成导入，否则需重新开始。

故障排除

导出错误

错误信息	解决方法
Too many screens to export	将选中内容拆分为每批不超过 50 个屏幕的小批次。
Export data is too large	降低 Image resolution，或减少屏幕中的图层数量。
This frame is too large to export	导出设计中较小的部分。
Upload didn’t complete	上传过程中设计发生了变更，请重新导出。
This import link has expired	导入链接有效期为一小时，请从 Figma 重新导出设计。
This design was already imported	该导出文件已生成过一个流程，请从 Figma 重新导出设计。

导入之后

您看到的现象	原因与解决方法
某个屏幕看起来像蒙了一层雾，画面偏白	背景图片作为普通元素导入后叠在了内容上方。请将它移到屏幕其他元素的下层。
Products 面板为空，价格显示 {{figma_import_…}} 占位符	导入时不会自动关联产品。请在 Products 面板中添加您的产品，在每个产品卡片和购买操作中选择对应产品，并替换占位符。
屏幕顺序错乱，或按钮跳转到了错误的屏幕	屏幕顺序和导航逻辑取决于 Figma Layers 面板中的帧排列顺序。请在编辑工具中重新排列屏幕，并检查每个按钮的 Navigate to screen 操作。
图片缺失，只剩背景色	该图层是视频、处于隐藏状态，或通过形状运算构建。请在编辑工具中重新替换图片。
单选组中有两个选项同时显示为已选中状态	默认选项的未选中状态样式设置有误。请手动修改该样式。
倒计时显示固定时间，从不递减	倒计时作为文本导入。请将其替换为倒计时组件。
字体控件显示 Select font	该字体在编辑工具中不可用。请上传字体文件并重新选择。

后续步骤

导入的流程为草稿状态，用户无法看到。请在编辑工具中完善流程，然后按以下步骤发布：

1. 保存并发布流程。
2. 在真实设备上预览流程。
3. 创建一个流程版位，并将流程添加到其中。
4. 在应用中使用 Adapty SDK v4.0 或更高版本获取该版位。低版本 SDK 无法渲染流程。