使用 Figma 完成產(chǎn)品設(shè)計(jì)工作流

去年（2018），我轉(zhuǎn)行做了交互設(shè)計(jì)師，一直在使用 Sketch 進(jìn)行設(shè)計(jì)，然而 Sketch 不便于交付，要借助其它工具把源文件轉(zhuǎn)換為可訪問(wèn)的鏈接；轉(zhuǎn)崗產(chǎn)品經(jīng)理后，我開(kāi)始使用 Axure 制作原型，Axure 的一個(gè)問(wèn)題是太重了，操作起來(lái)也不那么順滑，會(huì)影響到工作效率。

雖然我也知道“工具并不重要，重要的是想法”，但不順手的工具真的會(huì)浪費(fèi)很多時(shí)間，所以我就開(kāi)始嘗試各種各樣的工具。因?yàn)槲邑?fù)責(zé)的產(chǎn)品是云端協(xié)作的工具，就想起了主打云端設(shè)計(jì)協(xié)作的 Figma。

經(jīng)過(guò)一段時(shí)間的試用之后，我發(fā)現(xiàn)，雖然 Figma 是基于 Web 的，但其順滑程度不亞于原生軟件，其團(tuán)隊(duì)也做了很多細(xì)節(jié)上的優(yōu)化，使用起來(lái)會(huì)覺(jué)得很貼心。同時(shí)，也正是由于它基于 Web 的特性，所有的設(shè)計(jì)文件都是一個(gè)鏈接，并且可以實(shí)時(shí)更新，交付時(shí)讓對(duì)方直接訪問(wèn)這個(gè)鏈接就可以了。

最終，我將產(chǎn)品設(shè)計(jì)工作完全轉(zhuǎn)移到 Figma，并慢慢地摸索出了一套工作流程。

建立一套樣式組件庫(kù)

Figma 支持樣式和組件定義。樣式是指一些常用的顏色，以及文字、投影等等，組件則是指按鈕、輸入框、工具提示等界面元素，類似于 Axure 中的元件庫(kù)，或是 Sketch 中的 Symbol。樣式庫(kù)與組件庫(kù)可以大大減少重復(fù)工作，提高工作效率，因此這個(gè)流程的第一步就是建立樣式庫(kù)和組件庫(kù)。

創(chuàng)建樣式庫(kù)

我們先設(shè)定一些基本樣式，方便后面使用。當(dāng)我們?cè)谟覀?cè)屬性面板中為元素添加樣式后，就可以點(diǎn)擊屬性面板中帶有四個(gè)圓點(diǎn)的圖標(biāo)，再點(diǎn)擊加號(hào)，將其加入樣式庫(kù)。通常，在色值填充、文本、描邊和效果右邊都有這個(gè)圖標(biāo)，也就是說(shuō)它們都可以被添加進(jìn)樣式庫(kù)。

當(dāng)添加了一些樣式之后，在給其它元素調(diào)整樣式的時(shí)候就可以直接從樣式庫(kù)中選取了。從樣式庫(kù)中選取樣式也是要先點(diǎn)擊四個(gè)圓點(diǎn)，再?gòu)膹棾龅拿姘逯羞x取前面保存的樣式。

樣式庫(kù)是可以調(diào)整的，點(diǎn)擊畫(huà)布中的空白區(qū)域，就能夠看到右邊顯示了我添加過(guò)的所有樣式。點(diǎn)擊右側(cè)調(diào)整按鈕就可以進(jìn)去調(diào)節(jié)它，不過(guò)需要注意的是，這樣會(huì)改變?nèi)炙杏玫竭@個(gè)樣式的元素外觀。

創(chuàng)建組件庫(kù)

我沒(méi)有一開(kāi)始就創(chuàng)建一套組件庫(kù)，因?yàn)榻M件一般都是跟著業(yè)務(wù)走的，剛開(kāi)始時(shí)，我還不知道會(huì)有哪些組件。因此，我是在做原型時(shí)候有意識(shí)地把可以復(fù)用的元素提取為組件，并不斷地補(bǔ)充完善。

在 Figma 中創(chuàng)建一個(gè)組件后，這個(gè)組件叫做 Master Component，從它復(fù)制出來(lái)的叫做 Instance（實(shí)例），我們改變 Master Component 時(shí)，它的所有實(shí)例都會(huì)跟著改變。

組件允許進(jìn)行嵌套，我們可以憑此創(chuàng)建更復(fù)雜的組件。此外，我們還可以給組件中的元素設(shè)置 CONSTRAINTS（響應(yīng)式邊界），確保組件尺寸變化時(shí)，其中的元素仍可正常地布局。

在 Figma 中組件不必在一個(gè)地方維護(hù)，你可以把它們放在任何地方，但是我習(xí)慣把它們統(tǒng)一放在一個(gè)文件中，方便管理。但隨著組件越來(lái)越多，在使用時(shí)也就不好找了，因此我在完善組件時(shí)順便將其進(jìn)行分類。在分類時(shí)有兩個(gè)小技巧——使用 Frame（類似于 Sketch 中的 Artboard）將其分為大的類別，在命名中使用“/”來(lái)定義組件的不同狀態(tài)。

1. 給組件分大類

首先我會(huì)在畫(huà)布中繪制一些 Frame，并通過(guò)組件類型的名稱為它們進(jìn)行命名，比如“Controls”、“Forms”、“Overlays”等等，每個(gè) Frame 代表一個(gè)大類。然后我將同一大類的組件放到一個(gè) Frame 里面，比如輸入框、多選框要放進(jìn)“Forms”中。

這樣在左側(cè)的組件面板中它們就會(huì)按照這個(gè)分類顯示層級(jí)，方便我們按照類別尋找組件。

除了常規(guī)的組件分類以外，我還做了一個(gè)“Utils”分類，用來(lái)做原型上的一些輔助顯示，以及流程圖什么的。

2. 使用斜杠設(shè)置組件狀態(tài)

一般來(lái)說(shuō)，每個(gè)組件都會(huì)有不同的狀態(tài)或外觀，比如按鈕會(huì)有實(shí)底按鈕和幽靈按鈕。這個(gè)時(shí)候，我們就可以通過(guò)“/”將命名進(jìn)行分隔；這樣在使用時(shí)，就可以在這一系列組件中進(jìn)行快速切換。比如，在下面這些按鈕組件當(dāng)中，“button/primary”和“button/primary-o”就分別代表了實(shí)底按鈕和幽靈按鈕。

這樣，在使用該組件時(shí)，我就可以點(diǎn)擊右側(cè)屬性面板中的 INSTANCE（組件實(shí)例），在下拉菜單中的 Related components（相關(guān)組件）里面快速切換。

展示產(chǎn)品邏輯

做完原型，需要交付給上下游展示時(shí)，有兩種方式——產(chǎn)品邏輯圖和可交互原型圖，前者可以讓上下游的同事概覽整個(gè)業(yè)務(wù)邏輯和要點(diǎn)，后者則可以更直觀的展示交互操作。交付時(shí)只需要點(diǎn)擊頂部菜單欄的 Share 按鈕，獲取分享鏈接，將其發(fā)給其他同事即可。

產(chǎn)品邏輯圖

產(chǎn)品邏輯圖其實(shí)就是你在畫(huà)布當(dāng)中所繪制的整體。我習(xí)慣先繪制一個(gè) overview 來(lái)簡(jiǎn)要介紹需求背景，以及業(yè)務(wù)流程。再用頁(yè)面去展示業(yè)務(wù)邏輯，并使用前面 Utils 里面的交互說(shuō)明組件（下圖粉色文字）來(lái)說(shuō)明一些需要注意的點(diǎn)。

可交互原型

Figma 支持一些基本的交互，將右側(cè)的面板切換到 PROTOTYPE（原型）通過(guò)連線等基本操作就可以添加一些交互效果。目前支持的有頁(yè)面跳轉(zhuǎn)、元素切換、彈出層等，能滿足一些基本的需求。

此時(shí)，點(diǎn)擊頂部菜單欄中的播放按鈕進(jìn)入可交互原型，就可以進(jìn)行模擬操作了。

最后

交付之后，對(duì)方可以使用 Figma 自帶的評(píng)論系統(tǒng)進(jìn)行反饋。我再去根據(jù)反饋進(jìn)行優(yōu)化，如此迭代，完成一整個(gè)產(chǎn)品設(shè)計(jì)工作流程。

當(dāng)然，除了上述的高效可復(fù)用設(shè)計(jì)和便與交付，F(xiàn)igma 還有其他的一些我喜歡的特點(diǎn)。

首先，F(xiàn)igma 使得文件管理變得簡(jiǎn)單。在 Figma 中，每個(gè)文件只有一份并且都有歷史記錄，你的修改會(huì)實(shí)時(shí)同步，并且可以隨時(shí)恢復(fù)到歷史版本。其次，因?yàn)樗形募急４嬖谠贫耍恍枰跒g覽器中打開(kāi)鏈接并登錄就可以修改了，不局限于單一設(shè)備。最后，F(xiàn)igma 優(yōu)化了很多設(shè)計(jì)細(xì)節(jié)，讓你在設(shè)計(jì)時(shí)更多是直覺(jué)式的操作，這些細(xì)節(jié)也能替你節(jié)約很多時(shí)間。

目前來(lái)看唯一的缺點(diǎn)是首次打開(kāi)會(huì)有點(diǎn)慢，但也還可以忍受。如果你和我一樣有類似的需求，正在尋找一個(gè)稱手的工具，可以試一下 Figma。

原文鏈接：http://www.beforweb.com/node/1023?