从 Figma 支持跨设备操作、支持在线编辑提高生产力角度等推荐的文章已经有蛮多了。本篇文章将以初识设计的学生视角，从使用基础的平面设计工具 PS、AI，转向使用 UI 设计工具 Fimga 的过程，聊一聊 UI 设计执行思维的特点和方法。
（由于设备限制没有使用过Sketch，我使用软件是从 PS 转到 XD 再转到 Figma。个人一直在用英文版的 Fimga，所以更习惯使用功能的英文名称。）

初识设计

许多刚接触专业设计的学生，第一个学习的软件都是 PS。在学习 PS 的过程中，我们也形成了用“图层”设计的思维方式。
我们习惯先填充底色，再将画面元素一层层叠加上去，堆成前后像素有遮挡关系的图层。因为在平面设计里，画面一处元素往往要通过多个拥有不同参数、影响了不同范围的图层共同作用，才能形成比较好的视觉效果。
用“图层”思维做UI，需要首先画出白底的屏幕尺寸大小，接着将各小元素摆放上去，用鼠标调整位置，不停按Alt键检查间距大小，最后把做好的部分打组。用这样的步骤做 U I设计时，遇到有元素想调整的情况就是一场灾难了。
如果用图层思维不合适做UI，那什么方式合适呢？下面介绍基于 Figma 软件特点的 “Frame 划分区域思维”。

初识UI设计执行

这里不涉及方案的调研、设计过程等等步骤，直接聊一聊方案执行阶段。

鼠标拖动（✗）修改数值（✔︎）

在我刚接触 UI 设计时，完全没有“数值”的意识，所以即使输入位置、尺寸数值的功能就在右上角显眼的位置，我也没有意识去使用。
因为习惯了之前的平面设计流程，我们在做UI时也会经常使用鼠标拖动元素，即使是将 icon 移动1px这种操作。
平面设计项目整个过程，和数字有关的可能只存在于设置画布尺寸和页边距、出血值这种刚开始的阶段。当开始作图时，过程会偏感性，基本是通过鼠标直接控制元素去调整画面感受。鼠标的直接操作能够尽快地将设计师的想法投射到屏幕上，立刻能感受到想法是否可行。
但在UI设计中，屏幕尺寸有准确数值，字号、icon 等元素都有普适性的尺寸区间，还需要注意尺寸单双数等问题。设计过程要时时刻刻要注意数值，所以直接输入间距、尺寸的数值大小的方式更适合。并且设置 Figma 的 Autolayout 时，就有实用数值调整间距的硬性要求。

图层（✗）Frame & Box（✔︎）

上面说过，我们要将图层设计思维转成用 Frame 划分区域的设计思维。下面举一个例子来说明这两种用设计思维作图时的区别：

可以看到在 UI 稿中，几乎不会有元素上下重叠的情况，所以可以使用 Frame 划分区域的方法进行设计。
同时，Figma 的 Frame 设计方法跟前端用代码去实现设计稿的方法十分相似，前端开发时也没有上下图层的概念，而是这种划分区域的方法，将页面划分为一个个包括了“边框、外边距、内边距和实际内容信息”的“盒子”。这种方法在前端叫做“盒子（box）模型”，但是个人对前端只是浅浅了解一下，所以这里不做更多的描述。

Autolayout 从开始到放弃（✗）从学习到实践（✔︎）

正确使用 Autolayout 的 fill / fixed / hug 的作用不仅是让设计稿的调整更加简便，同时对前端开发也十分友好。开发人员可以在 Figma 的 Inspect 中查看 Frame 的尺寸、内部对齐方式、前端需要的 Padding、gap 等信息。
由设计师建立划分规则，不仅可以减少开发在还原设计稿时思考布局的成本，让开发直接按着设计稿的划分规则写代码，也有利于设计师在走查网页时，能够轻易地核查还原度数值。不然你以为要检查的是：8、12、16，结果发现数值是24、80、88、92、108……

当然 Autolayout 从理解到运用都是有一定复杂度的，作为设计师，就需要多练习去找到建立合适 Frame 的规律。

Group（✗）Frame（✔︎）

在平面设计中，基本使用打组的方式同时控制多个元素。带着这样的思维进入 Figma，在没有理解 Frame 的用法时，会简单将 Frame 和 Group 理解成都是用来打组的工具。
用 Group 来制作导航区域对内部布局没有约束，一旦修改又需要不停按 Alt 来检查间距。而使用了合适的 Autolayout 则可以直接 Ctrl D（图里写错了） 就得到了想要的布局。

Vetor（✗）Frame（✔︎）

在平面设计中，布局时都是以紧贴着元素的外框大小测量间距，而在 UI 设计中，元素和 Frame 中间经常有一定空间，这样既方便了对齐，又能在 Frame 内部自由调整元素大小，提高视觉舒适度。

之前我一拿到Frame里的icon，第一件事就是Ctrl + Shift + G 。这样的后果就是拉伸外框时，icon会变形。

Rectangle（✗）Frame（✔︎）

能用 Frame 做到的事为什么要再加一个 Rectangle 图层呢？大多数 Rectangle 垫在页面最底部当成一个底色，但是这样的操作可以直接用有色 Frame 代替。所以两种方法效果是一样的，Frame 还可以少一个图层，并且拥有更灵活的调整空间。

调整 Fixed width（✗）Auto（✔︎）

在 Autolayout 右侧三点里进入 Advanced layout ，第一个 Spacing mode 分为：第一种指定数值的 Packed，对应外面 Auto layout 工具栏的 Space between items（图文中简称为gap） =某个数据。第二种是自动填充间距的 Space between，对应外面的 Space between items （gap） = auto。（个人感觉内外名称有些不对应，所以一开始没发现这是调整的相同内容）
Space between 上方的预览动画很容易让人理解是用于多个元素均分，但有几率会忽略一个点：它是在将元素撑满 Frame 之后，均分的间距。

所以有一种比较常见的场景是让各元素左右端对齐：
第一步在 top frame 内分出 left frame 和 right F、frame ，第二步将 top frame 的 Space between items （gap） = auto 。就完成了将元素左右对齐的操作，并且可以随意拖动 top frame 并保持元素始终撑满。

Autolayout 没有 fill Container ？

外面再加一层 Frame 并设置 Autolayout。
fill 的意思是填满上一层容器，所以 fill contaniner存在的前提是有上一层的容器。

用 Constraints 布局 ?

虽然在 Figma Basics 里第2部分就讲到了Constraints，并且用一个 fix left & right 的例子展示了 Constraints 的自适应能力。但在实际项目中，需要设计稿做非常多次的修改，加上Constraints 本身对内部元素的布局支持不如 Autolayout 灵活，所以个人很少使用 Constraints来设计页面的内部元素。

那么 Constraints 有什么优点吗？个人感觉比较适合用来固定页面四周的元素，比如 APP 中的Tab Bar 或者网页顶部的主导航区。这种情况 Constraints 只需要两个 Frame，而 Autolayout需要3个 Frame。

多图层（✗）叠加颜色（✔︎）

将一个 Botton 调为半透明时，如果下方有别的颜色，则还需要在下面垫一个白色的底，防止混到底色。
在 PS / AI 里，同一元素 / 图层添加多重颜色的入口较深，但是 Fimga 中入口较浅，可以轻松地为一个元素重叠多重颜色。这样做不仅可以减少一个图层，在之后调整元素大小时也不用选中上下两层同步调整样式。

总结

个人刚从平面设计转到 UI 设计时，因为一直在用之前的思维方法做设计，所以感到很不方便，并且蛮长一段时间没有感受到 Figma 到底好用在哪里。目前熟悉了Figma的特点之后，设计执行阶段效率高了很多，所以现在回顾了一下以往的经历写个小总结分享出来～欢迎大佬们给出建议指导～