Why Figma？

一直使用PS做UI。無意間接觸了Figma，在查找資料對(duì)其有了初步了解之后，決定入坑。
首先，PS的知名度不用多說，它是很多人學(xué)習(xí)的第一個(gè)圖像軟件，功能強(qiáng)大，一專多能，不可否認(rèn)，現(xiàn)在用PS做UI的仍不在少數(shù)。雖然有關(guān)圖像圖形的幾乎任何功能都可以用PS實(shí)現(xiàn)，但在很多方面，它并沒有達(dá)到極致。矢量圖形是PS的弱項(xiàng)，它并不是一個(gè)for UI設(shè)計(jì)師的專門軟件，在很多設(shè)計(jì)上，可以處處體會(huì)到它的笨拙。
Sketch的出現(xiàn)讓設(shè)計(jì)師們可以優(yōu)雅地工作，但它只能在mac os運(yùn)行，阻斷了大批windows用戶。
而Figma在界面設(shè)計(jì)上和Sketch極為相似，運(yùn)行在瀏覽器上，是一個(gè)web應(yīng)用，不存在跨平臺(tái)問題。其次，F(xiàn)igma顛覆了PS的方式，在UI設(shè)計(jì)上，大大提高了效率。

Figma can...

UI的工作流程：繪制線框圖 ? 交流修改 ? 繪制高保真界面 ? 添加交互
以往完成上述工作需要跨越多個(gè)軟件，而Figma則可以獨(dú)自完成。

Figma workflow

紙上草圖，理清產(chǎn)品邏輯，打開軟件。

創(chuàng)建線框圖

在繪制之前，先創(chuàng)建一個(gè) frame，我們給它起名為 UI library。我們將把所有的可復(fù)用組件和設(shè)計(jì)規(guī)范放在這里。
我們?cè)诶锩嫦壤L制一些基本的文字樣式（H1, H2, H3, H4, P, Small 等）。此時(shí)我們可以直接使用默認(rèn)樣式，而不需要考慮設(shè)計(jì)。接下來繪制其它的組件，比如按鈕、輸入框、下拉菜單、導(dǎo)航條、卡片、標(biāo)簽、頁腳等等。推薦順序：先繪制具體頁面，再提取出一些元素將其轉(zhuǎn)換為組件，在移動(dòng)到 UI library 中。
如此，你的設(shè)計(jì)圖中幾乎所有的元素都變成了組件。組件不僅可以為你節(jié)省時(shí)間，還可以保持產(chǎn)品一致性，這對(duì)于 UI/UX 設(shè)計(jì)來說是很重要的。
當(dāng)你繪制完線框圖并創(chuàng)建一套組件庫之后，我們可以給它添加一些交互動(dòng)作，F(xiàn)igma 內(nèi)置很多交互效果可以幫我們做到。
你所需要做的就是在原型模式下，來連接需要交互的不同元素并設(shè)定他們之間的動(dòng)作。需要注意的是，如果你連接了一個(gè) master 組件，那么這將對(duì)其所有 instance 都起作用。
下一步就是分享你的原型鏈接給其他人，讓他們直接在原型上給予反饋。接下來，根據(jù)反饋，修改你的線框圖，直到最后確定下來。

轉(zhuǎn)為高保真

細(xì)化你的線框圖樣式，將其轉(zhuǎn)換為高保真設(shè)計(jì)圖。在這一步，你可以直接在每個(gè) master 組件上來應(yīng)用品牌的色調(diào)和細(xì)節(jié)，得益于其組件唯一來源的特性，我們可以很快將線框圖轉(zhuǎn)換為高保真設(shè)計(jì)圖。

完善原型

打磨原型細(xì)節(jié)。你可以檢查一下還有哪些元素可以作為組件，哪些組件可以優(yōu)化一下，每個(gè)需要交互的元素是否都添加了鏈接，以及交互效果是否正確。
一切就緒，你就可以分享出一個(gè)鏈接給開發(fā)，并告訴他們?nèi)绾尾榭礃?biāo)注，如何導(dǎo)出素材，他們遇到問題也可以直接在原型上評(píng)論。

References：
如何使用 Figma 來完成你的設(shè)計(jì)工作流