1. 自动布局快捷键
Mac OS 系统快捷键
- 开启自动布局：Shift + A
- 关闭自动布局：Shift + Option + A（图上漏掉了）
- 关闭自动布局并删除 Frame：Command + Shift + G
- 重制（复制并粘贴，包含自动布局设置）：Command + D
Windows 快捷键
- 开启自动布局：Shift + A
- 关闭自动布局：Shift + Alt + A（图上漏掉了）
- 关闭自动布局并删除 Frame：Ctrl + Shift + G
- 重制（复制并粘贴，包含自动布局设置）：Ctrl + D
2. 样式复制粘贴
Mac OS 系统快捷键
- 样式复制：Option + Command + C
- 样式粘贴：Option + Command + V
Windows 快捷键
- 样式复制：Option + Ctrl + C
- 样式粘贴：Option + Ctrl + V
3. 调准顺序
其实就算不用快捷键，也可以通过鼠标调准顺序。
但是毕竟中心哪个圆圈面积太小不好找，数量不多的话，用快捷键会更快一些。
Mac OS 系统快捷键
- 往左调整：Command + [
- 往右调整：Command + ]
Windows 快捷键
- 往左调整：Ctrl + [
- 往右调整：Ctrl + ]
4. 调整间距
通过自动布局设置，可以让元素的尺寸根据间距大小自动调整宽度。
利用这一点，可以用来做很多东西，例如滑动条。
5. 自动间距
把间距数值改成 auto， 会自动均分 Frame 内元素的间距。
虽然右上角的布局图标也能起到同样的作用，但是那样操作的步骤更多：需要先调整好两边的元素的位置，不能根据所在 Frame 自动调整。
6. 输入 0.001 设置 0 高度
Figma 不允许输入 0 高度，如果你尝试这么做，按下回车后数值会变成 1。
但是有个小漏洞，那就是如果你输入 0.001，按下回车后就会发现数值变成 0 了。
一定要小数点后三位，如果只输入小数点后一位或两位，就不会有这个效果。
7. 快速选择内部元素
如果分组或 Frame 层级过多，想要选择下层的元素，通常是双击。
但是层次多了，也还是很麻烦。
还可以按下 Command 的同时用鼠标点击，这样可以直接选择最里层的元素。
可是，如果想要选择的不是最里层，而是倒数第 N 层呢？
这种情况，用快捷键会更方便一些：
- 选择下层：回车键
- 选择上层：Shift + 回车键
- 选择下一个：Tab
- 取消选择：Esc
8. 避免将元素放入自动布局
往自动布局里放东西，很容易打乱布局，一下子就变化很大。
如果想要避免这种“手误”，可以在拖动元素的同时按下空格键，这样元素就不会被放到任何自动布局里。
9. 利用透明度快速自动布局
上面卡片的自动布局，其实可以用 Space Between 一键设置出来。
其实中间的图标和卡片同宽，只是背景透明所以看起来是居中对齐的。
标题其实不止左上角那一个，卡片左下方还有一个一模一样的，只是可见度设置为 0%，所以看不出来。
10. 利用自动布局设置最小宽度
很多组件（如上图文本框）有个最小宽度，如果简单地使用自动布局是无法满足的。
方法也不难，就是文本框的 Frame 里加一条不可见的线段，而这个线段的宽度就确定了文本框的最小宽度。
没想到 Figma 的自动布局有这么多门道，使用起来多做些组件，肯定能大大提高设计效率～
原文地址：体验进阶（公众号）
作者：设计师ZoeYZ
转载请注明：学UI网 »Figma的自动布局也太好用了吧！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
