本文首發於 Beforweb，作者 Juuun，是我與 Beforweb 的合作供稿。
去年（2018）我轉行做了交互設計師，壹直在用 Sketch 進行設計，但是 Sketch 不便於交付，要借助其它工具把源文件轉換為可以訪問的鏈接；後來轉為產品經理，我開始使用 Axure 制作原型，Axure 的壹個問題是太重了，操作起來也不是那麽順滑，會影響到工作效率。
雖然我也知道“工具並不重要，重要的是想法”，但不順手的工具真的會浪費很多時間，所以我就開始嘗試各種各樣的工具。因為我負責的產品是雲端協作的工具，就想起了主打雲端設計協作的 Figma。
經過壹段時間試用之後，我發現雖然 Figma 是基於 Web 的，但其順滑程度不亞於原生軟件，其團隊也做了很多細節上的優化，使用起來會覺得很貼心。同時，正是由於它是基於 Web 的，所有的設計文件都是壹個鏈接，並且實時更新，交付時讓對方直接訪問這個鏈接就可以了。
最終，我將產品設計工作完全轉移到 Figma，並慢慢地摸索出了壹套工作流程。
Figma 是支持樣式和組件庫的。樣式是指壹些常用的顏色和文字、投影等，組件則是按鈕、輸入框、工具提示等元素，類似於 Axure 中的元件庫或 Sketch 中的 Symbol。樣式組件庫可以大大減少重復工作，提高我的工作效率，因此這個流程的第壹步就是建立樣式組件庫。
我們先設定壹些基本樣式，方便後面使用。當我們給壹個元素在右側屬性面板中添加樣式之後，就可以點擊屬性面板中四個圓點的圖標，再點擊加號來將其添加進樣式庫。壹般色值填充（FILL）、文本（TEXT）、描邊（STROKE）和效果（EFFECTS）右邊都有這個圖標，也就是說它們都可以被添加進樣式庫。
當添加了壹些樣式之後，在給其它元素調整樣式的時候就可以直接從樣式庫中選取了。從樣式庫中選取樣式也是要先點擊四個圓點，再從彈出的面板中選取前面保存的樣式。
樣式庫是可以調整的，點擊畫布中空白區域，就能夠看到右邊顯示了我添加過的所有樣式。點擊右側調整按鈕就可以進去調節它，不過需要註意的是這樣會改變所有用到這個樣式的地方。
我沒有壹開始就創建壹套組件庫，因為組件壹般都是跟著業務走的，剛開始時我還不知道會有哪些組件。因此，我是在做原型時有意識地把可以復用的元素提取為組件，並不斷地補充完善。
在 Figma 中創建壹個組件後，這個組件叫做 master component，從它復制出來的叫做 instance（實例），我們改變 master component 時，它的所有實例都會跟著改變。
組件可以嵌套，我們可以憑此創建復雜組件。我們還可以給組件中的元素設置 CONSTRAINTS（響應式邊界），以保證在改變組件尺寸時裏面的元素仍可以正常地布局。
在 Figma 中組件不必在壹個地方維護，妳可以把它們放在任何地方，但是我習慣把它們統壹放在壹個文件中，方便管理。但隨著組件越來越多，在使用時也就不好找了，因此我在完善組件時順便將其進行分類。在分類時有兩個小技巧—— 使用 Frame（類似於 Sketch 中的 Artboard）將其分為大的類別，在命名中使用 / 來定義組件的不同狀態 。
首先我會在畫布中繪制 Frame，並給不同的 Frame 起不同的名字，比如 controls、forms、overlays，每個 Frame 代表壹個大類。然後我將同壹大類的組件放到壹個 Frame 裏面，比如輸入框、多選框要放進 forms（表單）中。
這樣在左側的組件面板中它們就會按照這個分類顯示層級，方便我們按照類別尋找組件。
除了常規的組件分類以外，我還做了壹個 Utils 分類，用來做原型上的壹些輔助顯示，以及流程圖什麽的。
壹般來說，每個組件都會有不同的狀態或外觀，比如按鈕會有實底按鈕和幽靈按鈕。這個時候我們就可以使用 / 分隔命名，這樣在使用時就可以在這壹系列組件中快速切換。比如下面的按鈕組件中， button/primary 和 button/primary-o 就分別代表了實底按鈕和幽靈按鈕。
這樣，在使用該組件時，我就可以點擊右側屬性面板中的 INSTANCE（組件實例），在下拉菜單中的 Related components（相關組件）裏面快速切換。
做完原型，需要交付給上下遊展示時，有兩種方式——產品邏輯圖和可交互原型圖，前者可以讓上下遊的同事概覽整個業務邏輯和要點，後者則可以更直觀的展示交互操作。交付時只需要點擊頂部菜單欄的 share 按鈕，獲取分享鏈接，將其發給其他同事即可。
產品邏輯圖其實就是妳在畫布中繪制的整體。我習慣先繪制壹個 overview 來簡要介紹需求背景，以及業務流程。再用頁面去展示業務邏輯，並使用前面 Utils 裏面的交互說明組件（下圖粉色文字）來說明壹些需要註意的點。
Figma 支持壹些基本的交互，將右側的面板切換到 PROTOTYPE（原型）通過連線等基本操作就可以添加壹些交互效果。目前支持的有頁面跳轉、元素切換、彈出層等，能滿足壹些基本的需求。
此時，點擊頂部菜單欄中的播放按鈕進入可交互原型，就可以進行模擬操作了。
交付之後，對方可以使用 Figma 自帶的評論系統進行反饋。我再去根據反饋進行優化，如此叠代，完成壹整個產品設計工作流程。
當然，除了上述的高效可復用設計和便與交付，Figma 還有其他的壹些我喜歡的特點。
首先，Figma 使得文件管理變得簡單。在 Figma 中，每個文件只有壹份並且都有歷史記錄，妳的修改會實時同步，並且可以隨時恢復到歷史版本。其次，因為所有文件都保存在雲端，只需要在瀏覽器中打開鏈接並登錄就可以修改了，不局限於單壹設備。最後，Figma 優化了很多設計細節，讓妳在設計時更多是直覺式的操作，這些細節也能替妳節約很多時間。
目前來看唯壹的缺點是首次打開會有點慢，但也還可以忍受。如果妳和我壹樣有類似的需求，正在尋找壹個稱手的工具，可以試壹下 Figma。