更多教程累驮、資源拗军、文章歡迎訪問 Figma 中文網(wǎng)
本文首發(fā)于 Beforweb端三，作者 Juuun控妻，是我與 Beforweb 的合作供稿。
去年（2018）我轉(zhuǎn)行做了交互設(shè)計師瞬内，一直在用 Sketch 進行設(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)，再點擊加號來將其添加進樣式庫苇本。一般色值填充（FILL）袜茧、文本（TEXT）、描邊（STROKE）和效果（EFFECTS）右邊都有這個圖標(biāo)瓣窄，也就是說它們都可以被添加進樣式庫笛厦。
當(dāng)添加了一些樣式之后，在給其它元素調(diào)整樣式的時候就可以直接從樣式庫中選取了俺夕。從樣式庫中選取樣式也是要先點擊四個圓點裳凸，再從彈出的面板中選取前面保存的樣式贱鄙。
樣式庫是可以調(diào)整的，點擊畫布中空白區(qū)域姨谷，就能夠看到右邊顯示了我添加過的所有樣式逗宁。點擊右側(cè)調(diào)整按鈕就可以進去調(diào)節(jié)它，不過需要注意的是這樣會改變所有用到這個樣式的地方梦湘。
創(chuàng)建組件庫
我沒有一開始就創(chuàng)建一套組件庫瞎颗，因為組件一般都是跟著業(yè)務(wù)走的，剛開始時我還不知道會有哪些組件捌议。因此哼拔，我是在做原型時有意識地把可以復(fù)用的元素提取為組件，并不斷地補充完善瓣颅。
在 Figma 中創(chuàng)建一個組件后倦逐，這個組件叫做 master component，從它復(fù)制出來的叫做 instance（實例）弄捕，我們改變 master component 時僻孝，它的所有實例都會跟著改變。
組件可以嵌套守谓，我們可以憑此創(chuàng)建復(fù)雜組件穿铆。我們還可以給組件中的元素設(shè)置 CONSTRAINTS（響應(yīng)式邊界），以保證在改變組件尺寸時里面的元素仍可以正常地布局斋荞。
在 Figma 中組件不必在一個地方維護荞雏，你可以把它們放在任何地方，但是我習(xí)慣把它們統(tǒng)一放在一個文件中平酿，方便管理凤优。但隨著組件越來越多，在使用時也就不好找了蜈彼，因此我在完善組件時順便將其進行分類筑辨。在分類時有兩個小技巧——使用 Frame（類似于 Sketch 中的 Artboard）將其分為大的類別，在命名中使用 / 來定義組件的不同狀態(tài)幸逆。
1棍辕、給組件分大類
首先我會在畫布中繪制 Frame，并給不同的 Frame 起不同的名字还绘，比如 controls楚昭、forms、overlays拍顷，每個 Frame 代表一個大類抚太。然后我將同一大類的組件放到一個 Frame 里面，比如輸入框、多選框要放進 forms（表單）中尿贫。
這樣在左側(cè)的組件面板中它們就會按照這個分類顯示層級电媳，方便我們按照類別尋找組件。
除了常規(guī)的組件分類以外帅霜，我還做了一個 Utils 分類匆背，用來做原型上的一些輔助顯示呼伸，以及流程圖什么的身冀。
2、使用斜杠設(shè)置組件狀態(tài)
一般來說括享，每個組件都會有不同的狀態(tài)或外觀搂根，比如按鈕會有實底按鈕和幽靈按鈕。這個時候我們就可以使用 / 分隔命名铃辖，這樣在使用時就可以在這一系列組件中快速切換剩愧。比如下面的按鈕組件中，button/primary 和 button/primary-o 就分別代表了實底按鈕和幽靈按鈕娇斩。
這樣仁卷，在使用該組件時，我就可以點擊右側(cè)屬性面板中的 INSTANCE（組件實例）犬第，在下拉菜單中的 Related components（相關(guān)組件）里面快速切換锦积。
展示產(chǎn)品邏輯
做完原型，需要交付給上下游展示時歉嗓，有兩種方式——產(chǎn)品邏輯圖和可交互原型圖丰介，前者可以讓上下游的同事概覽整個業(yè)務(wù)邏輯和要點，后者則可以更直觀的展示交互操作鉴分。交付時只需要點擊頂部菜單欄的 share 按鈕哮幢，獲取分享鏈接，將其發(fā)給其他同事即可志珍。
產(chǎn)品邏輯圖
產(chǎn)品邏輯圖其實就是你在畫布中繪制的整體橙垢。我習(xí)慣先繪制一個 overview 來簡要介紹需求背景，以及業(yè)務(wù)流程伦糯。再用頁面去展示業(yè)務(wù)邏輯柜某，并使用前面 Utils 里面的交互說明組件（下圖粉色文字）來說明一些需要注意的點。
可交互原型
Figma 支持一些基本的交互舔株，將右側(cè)的面板切換到 PROTOTYPE（原型）通過連線等基本操作就可以添加一些交互效果莺琳。目前支持的有頁面跳轉(zhuǎn)、元素切換载慈、彈出層等惭等，能滿足一些基本的需求。
此時办铡，點擊頂部菜單欄中的播放按鈕進入可交互原型辞做，就可以進行模擬操作了琳要。
最后
交付之后，對方可以使用 Figma 自帶的評論系統(tǒng)進行反饋秤茅。我再去根據(jù)反饋進行優(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侨拦。
