2020年11月份,Figma发布了全新的自动布局功能,这个超级棒的功能大大提升了设计效率,特别是对于一些重复性的组件,尤其有用。团队最近正好在着手AI Design的更新,本文主要分享我们平时在项目中使用自动布局的一些经验和方法,从0-1结合案例,详细讲解我们是如何使用Figma自动布局搭建自适应组件,希望这篇文章能够在实际工作中帮助到大家。
以下分五个章节来叙述:
自动布局是什么
自动布局的应用技巧
组件实战
页面实战
开发协作
自动布局是什么
一、关于自动布局
讲解之前我们先回顾下,自动布局是一种可以添加到框架和组件的属性,通过自动布局,你可以创建响应其内容的动态框架。以前搭建或修改一个组件需要不断的调整尺寸,现在通过自动布局即可完成操作。
二、创建自动布局
我们可以将自动版式添加到框架或对象中。包括:新框架或空框架、已有内容的框架、组件和组件集、图层/或组
我们拿按钮举个例子。
第一步:创建按钮框架
创建一个按钮框架,在框架中输入按钮的内容
第二步:创建自动布局
选择按钮框架,单击属性面板的“自动布局”部分中的“+”。或者使用键盘快捷键“SHIFT+A”
第三步:调整按钮大小
调整自动布局属性控制按钮大小
第四步:调整按钮样式
调整按钮颜色、描边、填充等属性
三、自动布局的属性
具有自动布局的框架具有与常规框架不同的属性。应用自动布局时,我们可以在右侧栏中看到一些可以更改的属性,接下来我们看看这些属性具体代表什么。
方向
方向描述了自动布局框架的流动方式,选择向下箭头,表示垂直以沿y轴添加,移除和重新排列对象。选择向右箭头,表示水平以沿x轴添加,删除和重新排列对象。
顺序
选择框架内的对象,使用键盘上的方向键调整对象的顺序。
间距
调整项目与项目之间的间距
方式一:拖动属性图标以调整项目之间的间距。
方式二:在输入框输入数值,使用键盘上下键微调值。
填充
填充控制子对象与自动布局框架的边界之间的空白。我们可以统一设置填充,也可以为顶部、右侧、底部和左侧填充设置不同的值。
方法一:在输入框中输入数值,调整填充值。
<