行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

菜单

自动布局

ProtoPie Studio 中的自动布局旨在自动化对齐与间距,简化布局创建与调整。通过将普通容器转换为自动布局容器,它可在整个设计过程中确保一致性与灵活性。


{'_type': 'localeString', 'en': 'Auto Layout', 'ja': 'Auto Layout', 'ko': 'Auto Layout', 'zh': 'Auto Layout'}

固定布局与自动布局的区别

固定布局和自动布局在设计中提供了处理对齐与间距的不同方式。

  • 固定布局:需要手动调整以保持一致性,提供精确但静态的控制。

  • 自动布局:可动态适应内容变化,减少手动工作并支持响应式设计。

自动布局快速上手

你可以通过属性面板、右键菜单或简单的快捷键,为容器、组件或多个对象启用自动布局。应用后,自动布局会自动分配默认属性。

如何应用自动布局

你可以通过以下方式启用自动布局:

  • 属性面板:选择图层或容器并勾选“自动布局”选项。

  • 右键菜单:右键单击并选择“添加自动布局”。

  • 快捷键:使用 Shift+A 快捷键。


{'_type': 'localeString', 'en': 'Apply Auto Layout', 'ja': 'Apply Auto Layout', 'ko': 'Apply Auto Layout', 'zh': 'Apply Auto Layout'}

当你应用自动布局时,会分配以下默认属性

  • 方向:垂直

  • 调整大小:宽度和高度均为 Hug Contents

  • 对齐:左上

  • 间距:10px

  • 内边距:10px(统一应用于四个边)

属性面板中的自动布局可见性

自动布局选项是否在属性面板中显示,取决于所选图层类型或分组。以下是不同情况的工作方式:

  • 单个容器:为容器启用自动布局可将其转换为自动布局容器。

  • 主组件:将自动布局应用于组件,以在各实例之间保持一致行为。

  • 多个对象:为多个选中对象添加自动布局,并将它们分组为单个自动布局容器。

如何移除自动布局

你可以通过禁用自动布局来恢复对对齐与间距的手动控制。此功能允许你在需要时切换回固定布局。

你可以通过以下方式移除自动布局:

  • 属性面板:取消勾选“自动布局”选项。

  • 右键菜单:选择“移除自动布局”。

  • 快捷键:使用 Option+Shift+A(Mac)/ Alt+Shift+A(Windows)。


{'_type': 'localeString', 'en': 'Remove Auto Layout', 'ja': 'Remove Auto Layout', 'ko': 'Remove Auto Layout', 'zh': 'Remove Auto Layout'}

关于自动布局的说明

尽管自动布局功能强大且灵活,但要充分利用此功能,仍有几点需要注意。以下是自动布局与特定图层交互时的一些要点:

  • 蒙版图层:将自动布局应用到蒙版图层时,会用自动布局替换蒙版选项。

  • 音频图层:自动布局不会影响音频图层的大小调整或交互。

  • 自动布局可应用于单个非容器图层,但只能通过快捷键或右键菜单进行。在属性面板中不可用。