Figma初学-自动布局引子在之前的责任中，宇宙的原型图都是使用 Axure 制作的，印象中 Figma 一直是个专科假想软件。最近，许多居品一又友告诉我，许多原型图都运转用Figma制作了，况且许多组件都是内置的，对多样原型图的制作极其友好，只需熟练一下基本的操作即可上手。是以我绸缪一探究竟，传奇的终究是传奇，我方上上手才是确切。是以接下来的著作我绸缪记载从0运转上手 Figma 的经过。本系列径直从实操运转，有所错漏大致操作弊端，还请宇宙指正。若是有更高效的使用方式，也接待疏导。本篇咱们来琢磨自动布局。自动布局咱们先输入这么的一个翰墨组件选中后 Shift+A 会对这个翰墨组件套上一个 frame 框，此时咱们不错看到右边的自动布局缔造。咱们将宽高都缔造为稳妥。咱们将 direction 缔造为向右的时辰，不错看到如下服从：即扫数的里面元素都向右摆设此时，当咱们尝试复制里面的元素的时辰，就会出现如下情况：最终自动地规章往下摆设拖住中间的停止框，咱们不错很容易地修改他们之间的停止。咱们也不错拖动其中的一个元素，不错很浮松地交换他们的位置。到这里，一经不错看出这个自动布局，跟 css 的 flex 布局终点相同。真实的参数都是不错逐一双应的。固然属性细则是莫得 css 的全面的，不外在这种场景下也蹧跶使用。和 flex 对比主轴标的（flex-direction）Figma: 通过缔造 布局网格 中的 对皆 和 散播 属性来遣散。CSS: flex-direction 属性遣散主轴标的，不错缔造为 row、row-reverse、column 或 column-reverse。换行（flex-wrap）Figma: 在 布局网格 中，不错通过缔造 包装 属性来遣散是否允许本体换行。CSS: flex-wrap 属性遣散是否换行，不错缔造为 nowrap、wrap 或 wrap-reverse。主轴对皆（justify-content）Figma: 在 布局网格 中，不错通过缔造 对皆 属性来遣散名堂在主轴上的对皆方式。CSS: justify-content 属性界说名堂在主轴上的对皆方式，不错缔造为 flex-start、flex-end、center、space-between 或 space-around。交叉轴对皆（align-items）Figma: 在 布局网格 中，不错通过缔造 对皆 属性来遣散名堂在交叉轴上的对皆方式。CSS: align-items 属性界说名堂在交叉轴上的对皆方式，不错缔造为 flex-start、flex-end、center、baseline 或 stretch。多行对皆（align-content）Figma: 在 布局网格 中，不错通过缔造 散播 属性来遣散多行本体在交叉轴上的散播方式。CSS: align-content 属性界说多根轴线的对皆方式，不错缔造为 flex-start、flex-end、center、space-between、space-around 或 stretch。间距（gap）Figma: 不错通过缔造 布局网格 中的 缝隙 属性来遣散名堂之间的间距。CSS: gap、row-gap 和 column-gap 属性遣散名堂之间的间距。回归若是对前端详比熟练的同学，不错很快的意会这个自动布局的多样操作，基本上便是 flex布局 的使用方式。里面的参数缔造，跟 css 的 flex 布局参数基本一致。– 接待点赞、热心、转发、储藏【我码玄黄】，各大平台同名。