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