Auto Layout 入门教程

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

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

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

• 本视频中用到的文件：https://www.figma.com/community/file/842917001273016668
• Google Docs 数据：http://bit.ly/2ORlJLc
• 学习使用自动布局：https://help.figma.com/article/453-auto-layout
• 博文：https://www.figma.com/blog/announcing-auto-layout/
• 原视频：https://www.youtube.com/watch?v=NrKX46DzkGQ

时间戳:

• 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 添加真实的数据到我们的设计，使自动布局框架自适应