如何使用 Figma 完成產(chǎn)品設(shè)計工作?

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

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

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

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

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

 

建立一套樣式組件庫

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

 

創(chuàng)建樣式庫

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

當(dāng)添加了一些樣式之后,在給其它元素調(diào)整樣式的時候就可以直接從樣式庫中選取了。從樣式庫中選取樣式也是要先點擊四個圓點,再從彈出的面板中選取前面保存的樣式。

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

 

創(chuàng)建組件庫

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

在 Figma 中創(chuàng)建一個組件后,這個組件叫做 Master Component,從它復(fù)制出來的叫做 Instance(實例),我們改變 Master Component 時,它的所有實例都會跟著改變。

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

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

1. 給組件分大類

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

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

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

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

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

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

展示產(chǎn)品邏輯

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

產(chǎn)品邏輯圖

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

可交互原型

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

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

最后

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

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

首先,F(xiàn)igma 使得文件管理變得簡單。在 Figma 中,每個文件只有一份并且都有歷史記錄,你的修改會實時同步,并且可以隨時恢復(fù)到歷史版本。其次,因為所有文件都保存在云端,只需要在瀏覽器中打開鏈接并登錄就可以修改了,不局限于單一設(shè)備。最后,F(xiàn)igma 優(yōu)化了很多設(shè)計細(xì)節(jié),讓你在設(shè)計時更多是直覺式的操作,這些細(xì)節(jié)也能替你節(jié)約很多時間。

目前來看唯一的缺點是首次打開會有點慢,但也還可以忍受。如果你和我一樣有類似的需求,正在尋找一個稱手的工具,可以試一下 Figma。

 

 

 

 

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

每天更新,
全站高品質(zhì)素材免費下載!