来自 Figma 官方的 Auto Layout 入门教程。

通过自动布局,按钮可以通过调整文本来控制大小,列表可以通过简单地拖动项目来重新排列,当你添加或删除内容时,外部容器也会变大或缩小。

当使用真实数据进行设计时,比如使用谷歌 Sheets Sync 插件时,所有的自动布局元素都会立即根据文字内容自动伸缩,为你节省大量时间。

时间戳:

  • 0:22 演示开始
  • 0:34 创建按钮与自动布局
  • 1:02 当内容改变时,动态调整大小
  • 1:46 通过复制将多个自动布局框架嵌套在另一个自动布局框架内
  • 2:12 方向属性
  • 2:49 重新排序一个自动布局框架的子节点
  • 3:34 从多个对象创建自动布局框架
  • 4:17 文本自动调整大小
  • 5:02 添加对象到自动布局框架
  • 5:26 使用命令/控制的深度嵌套
  • 6:01 自动宽度/高度和固定宽度/高度
  • 6:17 自动布局组件
  • 6:44 滚动自动布局框架
  • 7:36 添加真实的数据到我们的设计,使自动布局框架自适应