Figma作为一款UI设计工具，因为其基于原子化设计理念，运用前端的框架思维和组件化管理设计，同时基于云端的团队协助，受到越来越多的设计师的青睐，国外的大厂纷纷向Figma迁移，那么了解和掌握这么一款设计工具，对于我们提高设计效率也有着重要的意义，下面将通过一些实际的例子，为大家讲解一下那些好用到让你爱不释手的Figma小技巧，喜欢的朋友们赶紧收藏吧！查看更多关于Figma的学习内容，请前往我的b站搜索《我的Figma学习日记》系列课程，网站奉上：https://www.bilibili.com/video/BV15Q4y1P7Mq?from=search&seid=3683065143410307919

1、尽量创建Frame（结构）而不是Group（组）

Frame在Figma中可以理解为是一个画板，也可以理解为一个空结构，同时也可以理解为一个未定义的组件。Frame相比于Group的话有几个突出的优势：第一，Frame带有Clip content，可以对超出结构部分内容进行隐藏，在我们做一个长对表单表格组件的时候，利用这个功能，就能轻松实现不用长度和宽度的表格和表单；第二，当我们将几个元素组合成一个组件的时候，我们为了不同尺寸屏幕的适配，可能需要对组件进行拉伸，那么当你把几个元素集合在一个Frame中对时候，对这个组件进行拉伸，里面的元素不会发生形变，同时，我们可以通过控制constraints容器的上下左右布局实现元素的自动排布，而如果你创建的是一个组的话，你去拉动一个组里面的元素会产生形变；第三，创建Frame可以实现Auto Layout和Layout Grid效果，而创建组的话仅仅只能支持Auto Layout操作而不能实现栅格效果。

2、巧用Layout Grid栅格布局

栅格布局是我们在做响应式网页布局的时候常常用的一种方法，他能是元素排布规矩且富有美感。除此之外，在Figma中，栅格布局还可以用于我们的网格系统，这在我们绘制图标或是做文字的排版布局的时候也会常常用到，同时，利用栅格系统的横向栅格和纵向栅格，我们可以实现出将组件四周的边距固定，内容随着组件的变化而变化，但页内间距始终是保持固定的，这个我们css中padding值是一个原理。

3、利用Auto Layout创建弹性可变按钮

按钮是设计系统中最常见的组件之一，因为按钮文案长度的不同，按钮的长短也有变化。那在Figam中不仅能实现按钮长短的弹性变化，而且还能实现图标按钮的删减、按钮颜色的改变、圆角等属性的改变，操作起来也非常方便快捷，能提高我们的设计效率。

4、利用components组件的嵌套实现复合组件的高效替换

我们在设计过程中，常常要将几个原子化组件组合成一个分子级或是细胞级的组件，那么在这些组件的组合嵌套过程中，能够实现不同组件的替换，高效的完成对同一组件的不同状态的样式修改。

5、利用Auto Layout实现弹性对话框和弹性弹窗

弹性对话框常用于对话框的设计中，因为文本的长度不同导致对话框的形状也要相应的变化，但始终保持文本边距和弹框不变，那么利用Auto Layout也能轻松实现这一效果。

6、利用Frame+Auto Layout实现弹性tab标签

弹性tab标签是随着不同标签文本长度不同而进行自适应变化，始终保持文本标签之间的间距相等，同时文字下的横线长度随着文字的宽度进行相应的变化。

7、利用Smart Selection快速实现多个元素的对齐

更多关于Figma的技巧，请千万我的B站进行观看，谢谢大家～

Powered by Froala Editor