ProtoPie的新变化？借助自动布局，导入与设计功能全面升级

你们提出了需求，我们认真倾听！在清晰听到大家的强烈呼声后，我们非常激动地终于推出社区呼声最高的功能之一——自动布局。

这标志着自动布局多阶段发布的开始，首个版本将以测试版上线。在这一阶段，我们重点支持将自动布局应用到设计元素，并从 Figma 导入自动布局属性。这解决了用户的一个关键痛点，提升了生产力，并实现更顺畅的 Figma 到 ProtoPie 导出流程，从而带来更快速、更高效的设计工作流。

展望未来，明年发布的后续版本将把自动布局扩展到原型制作，为你的设计与交互需求提供完整的一体化解决方案。继续阅读，了解本次测试版发布的详细内容，以及它如何提升你的设计流程。

概览

• 设计中的自动布局是什么？

• 自动布局在 ProtoPie 中如何工作？

• 如何从 Figma 导入自动布局？

• 常见问题

• 接下来是什么？

设计中的自动布局是什么？

自动布局是一项设计功能，可根据已定义的规则和关系，自动调整并排列容器内的元素。它允许设计师通过指定元素属性（如内边距、间距、方向、缩放选项和对齐方式）来创建响应式设计。

以下是一些最常见的使用场景：

1. 动态内容调整：当内容被添加、删除或调整大小时，自动调整间距和对齐，例如文本框、图片框或表单字段。

2. 一致的间距与对齐：在各组件间保持一致的内边距、间距和对齐方式，这对于创建卡片、列表和网格等标准化布局尤为有用。

3. 基于组件的设计：自动布局让你可以轻松更新按钮、导航栏等单个组件，并确保组件实例在整个设计中自动一致地调整。

使用自动布局，轻松调整并创建动态布局。

自动布局在 ProtoPie 中如何工作？

在 ProtoPie Studio 中，自动布局可根据特定布局设置，自动调整元素在容器内的排列方式，帮助你创建响应式设计。

在 ProtoPie 中有多种方式可应用自动布局：

1. 使用属性面板：

• 选择一个容器，然后在属性面板中勾选 自动布局 选项。

2. 使用右键菜单：

• 选择任意对象（单个或多个），右键并选择 添加自动布局。这会自动将对象移动到一个容器中并应用自动布局。

3. 使用快捷键：

• 选择任意对象（单个或多个），按 Shift + A 即可应用自动布局。

4. 使用菜单栏：

• 选择任意对象，然后在菜单栏中点击 对象 → 添加自动布局。

要移除自动布局，请在属性面板中取消勾选 自动布局 选项，或右键点击容器并选择 移除自动布局。

启用自动布局后，你可以：

• 设置布局方向：在属性面板中选择水平或垂直对齐。

• 重排子项顺序：通过图层面板、键盘方向键或直接在画布上排列子项。

• 控制子项尺寸：允许子项自动缩放以填满父容器。

• 调整项目间距：设置固定间隙，或让项目自动调整以适应可用空间。

💡 注意：当你处理遮罩图层、单个非容器图层或音频图层时，属性面板中不会显示自动布局选项。

ProtoPie 支持哪些自动布局属性？

ProtoPie Studio 中支持将自动布局应用到图层的属性包括：

1. 缩放

2. 方向

3. 对齐

4. 内边距

5. 间距

查看我们的文档，进一步了解受支持的自动布局属性。

自定义你的自动布局控制项，如方向、对齐、内边距等。

如何从 Figma 导入自动布局？

在本次发布中，ProtoPie 现已支持 Figma 大多数核心自动布局属性，确保你从 Figma 导入设计时可以保留主要的自动布局设置。不过，一些高级功能——例如“描边”“画布堆叠”和“文本基线对齐”，以及最大/最小尺寸选项——目前在 ProtoPie 中尚不支持。

视频

💡顺畅导入的小贴士：

• 导入期间请在桌面上同时打开并保持 Figma 与 ProtoPie 可见，以获得最佳性能。

• 将 Figma 的顶层 Frame 导入 ProtoPie Studio 时，这些 Frame 会被转换为场景，从而移除任何原始属性（包括自动布局设置）。因此，如果 Figma 的顶层 Frame 应用了自动布局，它不会被带入 ProtoPie Studio，并会在场景中被省略。

了解更多关于 Figma 导入 的内容。

Figma 到 ProtoPie 导出。

常见问题

问：我可以在交互中使用自动布局，并在预览窗口或 ProtoPie Player 应用中预览吗？

在自动布局功能的初始测试版中，暂不支持交互。在这一阶段，自动布局聚焦于设计元素和从 Figma 的导入，以提升你的工作流效率。虽然你可以为已应用自动布局的图层添加触发器和响应，但当预览窗口中自动布局内的某一图层被移动或缩放时，其他图层不会像在画布上那样随之移动或缩放进行适配。

不过，面向原型制作与交互的自动布局将于明年推出——敬请关注后续更新。

问：为什么我在交互面板中看不到自动布局选项？

自动布局选项仅在特定条件下会出现在属性面板中。以下是其显示与不显示的情况：

自动布局选项在属性面板中会显示：

1. 选择单个容器并应用时。

2. 选择主组件（Main Component）并应用时。

3. 选择两个或更多图层并应用时。

自动布局选项在属性面板中不可用：

1. 选择遮罩图层时。

2. 选择单个非容器图层时。

3. 处理音频图层时，因为自动布局无法应用于音频。

如果你看不到自动布局选项，请检查当前选择是否属于上述不支持的情况之一。了解更多。

接下来是什么？

这只是开始。在首个测试版中，自动布局增强了设计元素与 Figma 导入能力：通过导入自动布局属性并允许你在 ProtoPie 中直接编辑，来简化工作流、提升生产力并加快导出速度。展望未来，下一阶段（预计明年发布）将把自动布局带到原型制作中，提供更强大、更无缝的一体化体验，全面提升你的设计与交互工作流。

你的反馈对于塑造自动布局的未来至关重要。加入我们的 社区，分享想法、提出问题，并及时获取后续更新。