动态地设计

在《Figma 的基本理念》中我们说到，设计不应该是「静态」的，而应该是「动态」和「响应式」的。在这一小节，我们将开始绘制一些 Bodcasts 的 Android 端界面，学习使用自动布局（Auto layout）来进行动态地设计。

自动布局是什么？

做界面设计，尤其是现在这种扁平化的设计，其实就是把各种元素——形状、文字、插图——组合在一起。在使用 Photoshop 时，我们不断地画出一个又一个图层，把它们摆在一起，但是图层之间并没什么关系。但是对于真正的软件界面来说，元素之间的位置和尺寸是互相影响的。所以我们经常遇到当某个图层的尺寸或位置被调整后，需要手动调整它旁边的图层，这种琐碎的操作累积起来就浪费了大量的时间。

就拿一个最简单的按钮来说，当我们删掉几个文字时，需要手动地去调整背景，再把文字和背景居中对齐。如果每天需要来回这么操作几百遍，可想而知是多么痛苦。

如果背景可以自动适应文字的变化该多好？没错，Figma 的自动布局就是做这个事情的。简单来说自动布局就是容器可以自己适应内容的变化，或者是内容可以适应容器的变化，或者是相邻元素之间可以互相影响，免去手动调整的工作。

正常布局流和弹性盒子

Figma 中的自动布局远不止一个按钮自适应这么简单，为了更好地帮助你理解自动布局，我们先来看一下自动布局所借鉴的前端开发中的概念——正常布局流（Normal Flow）和弹性盒子（Flexbox）。

正常布局流

正常布局流指的是网页中的元素默认情况下的排布规则——从左往右、从上至下地自动往下排布，块级元素（指那些会自动占满一行的元素，比如标题 <h1>、段落 <p>）会自动撑满父级容器的宽度，当我们把容器（浏览器窗口）变窄了以后，他们将会自动换行。

在 Figma 中进行设计时，我们应用自动布局也可以达到这种效果。最重要的是，在设计时我们要有这种动态布局的意识：设计不是把图层一个个零散的摆在一块就完了，它应该是动态的会自动适应的。

弹性盒子

弹性盒子是 CSS 中的一种布局模式，它可以帮我们轻易地实现居中对齐、均匀分布等常见布局。一个最简单的弹性盒子如下，外层有一个容器，里面有若干子元素。容器具有主轴和交叉轴，主轴指的是它的子元素的排布方向，交叉轴是和主轴垂直的方向。比如下图，因为子元素从左往右横向排布的，所以主轴是横向的，交叉轴是纵向的，我们的推荐播客模块就是这种横向主轴模式……