从PS到Figma

Why Figma？

一直使用PS做UI。无意间接触了Figma，在查找资料对其有了初步了解之后，决定入坑。
首先，PS的知名度不用多说，它是很多人学习的第一个图像软件，功能强大，一专多能，不可否认，现在用PS做UI的仍不在少数。虽然有关图像图形的几乎任何功能都可以用PS实现，但在很多方面，它并没有达到极致。矢量图形是PS的弱项，它并不是一个for UI设计师的专门软件，在很多设计上，可以处处体会到它的笨拙。
Sketch的出现让设计师们可以优雅地工作，但它只能在mac os运行，阻断了大批windows用户。
而Figma在界面设计上和Sketch极为相似，运行在浏览器上，是一个web应用，不存在跨平台问题。其次，Figma颠覆了PS的方式，在UI设计上，大大提高了效率。

Figma can...

UI的工作流程：绘制线框图 ⇒ 交流修改 ⇒ 绘制高保真界面 ⇒ 添加交互
以往完成上述工作需要跨越多个软件，而Figma则可以独自完成。

Figma workflow

纸上草图，理清产品逻辑，打开软件。

创建线框图

在绘制之前，先创建一个 frame，我们给它起名为 UI library。我们将把所有的可复用组件和设计规范放在这里。
我们在里面先绘制一些基本的文字样式（H1, H2, H3, H4, P, Small 等）。此时我们可以直接使用默认样式，而不需要考虑设计。接下来绘制其它的组件，比如按钮、输入框、下拉菜单、导航条、卡片、标签、页脚等等。推荐顺序：先绘制具体页面，再提取出一些元素将其转换为组件，在移动到 UI library 中。
如此，你的设计图中几乎所有的元素都变成了组件。组件不仅可以为你节省时间，还可以保持产品一致性，这对于 UI/UX 设计来说是很重要的。
当你绘制完线框图并创建一套组件库之后，我们可以给它添加一些交互动作，Figma 内置很多交互效果可以帮我们做到。
你所需要做的就是在原型模式下，来连接需要交互的不同元素并设定他们之间的动作。需要注意的是，如果你连接了一个 master 组件，那么这将对其所有 instance 都起作用。
下一步就是分享你的原型链接给其他人，让他们直接在原型上给予反馈。接下来，根据反馈，修改你的线框图，直到最后确定下来。

转为高保真

细化你的线框图样式，将其转换为高保真设计图。在这一步，你可以直接在每个 master 组件上来应用品牌的色调和细节，得益于其组件唯一来源的特性，我们可以很快将线框图转换为高保真设计图。

完善原型

打磨原型细节。你可以检查一下还有哪些元素可以作为组件，哪些组件可以优化一下，每个需要交互的元素是否都添加了链接，以及交互效果是否正确。
一切就绪，你就可以分享出一个链接给开发，并告诉他们如何查看标注，如何导出素材，他们遇到问题也可以直接在原型上评论。

References：
如何使用 Figma 来完成你的设计工作流