第一次知道 Figma 是在 2016 年，但真正用起來還是在去年。那時苦于 Sketch 每次更新都會導致一些插件不能用，且界面不夠精致，一直想要為它找一個替代品。直到后來嘗試將自己的個人項目都導入到 Figma，這才開始在 Figma 中嘗試設計。

△ 我的設計文件

?因為 Figma 是基于 Web 的，也就是在線的網頁，我總覺得使用起來會受限于性能，而不夠流暢，這也是我前幾年不敢去用的原因。但直到我真正使用起來，才發現操作非常流暢，而且文件都在云端，免費版保留最近一個月的歷史記錄，再也不用「最終版1」「最終版2」這種方式管理設計文件了。

而隨著使用加深，我發現 Figma 的交互也非常符合直覺，還有很多精心設計的小細節。借用一位朋友的話來說，「這是一群設計師為設計師打造的設計工具，讓大家專注于設計本身，而不是在設計時還要克服工具自身影響效率的因素」。

下面我結合我的使用經驗說一說我是怎樣用 Figma 做設計的，以及這一年以來我的一些使用心得。

我的設計流程

在此之前，先說一下我的背景。我平時會做很多業余項目，大多是網頁和小程序，平時還會做一些公眾號的封面和插圖，基本都是在 Figma 中設計完成的。

△ 平時處理的一些公眾號封面等

?1. 初稿構思

一般當我有了一個想法時，我會先在 Figma 中隨意勾畫出一個初稿。然后，我會在這個基礎上不斷修改，不斷完善自己的想法。這其實相當于原型設計階段，在這個過程中我不會在意樣式是否美觀，只會在意功能、結構是否合理。

△ 某一個產品的初稿

?因為我的想法會不斷變化，說不準什么時候有一個新的想法會加進去，所以在這個階段它的變化會很大。因為 Figma 可以自動保存最近 30 天的歷史（付費版可以保存所有歷史），所以你不用擔心自己突然想要回到之前的某個版本而沒有保存。

盡管大膽地構思設計，你可以隨時恢復到之前的版本。

△ 恢復至某一版本

2. ?設計調整

接下來我就會開始調整樣式，細化設計了。這個過程中我會用到兩個比較重要的東西 —— 組件和柵格。組件可以用來設計重復性模塊，提高效率，柵格則可以讓我的設計元素的分布保持一致的比例。

所謂組件，類似于 Sketch 中的 Symbol、PowerPoint 中的母版，用于繪制可復用的元素。比如說在我的設計中有一個卡片列表，我會在旁邊先做這個卡片，微調它的樣式，等差不多滿意時再復制出多個放到頁面中。

△ 組件

?最原始的組件叫做 master，而從它復制出去的組件叫做 instance，當你調整 master 的樣式時所有的 instance 都會跟著同步。Figma 允許將 master 組件就近放在頁面旁邊，這樣是極其方便的，因為后面難免需要調整細節，這時候你就可以邊調整 master 細節邊看它在整個頁面中的效果，比如下圖中我想看一下將 logo 放大的效果。

△ master 組件同步到 instance

?而反過來，當你調整 instance 的部分樣式時，master 是不會跟著變化的。這樣就保證了靈活性，因為總有一些 instance 需要和其它 instance 有一點區別。

說完組件，再說說柵格的妙用。在 Figma 中我們可以給頁面（即frame）和組件添加柵格，而柵格可以添加網格、行和列。在頁面中添加網格可以幫助你對齊元素，但我一般會添加列柵格，因為它可以幫助我把元素排列為等分的幾列，并保持元素間隙。下圖中紅色長條就是列柵格，它將中間內容區域均分為 12 列，我就可以把里面的元素按照 1-8-3 的比例布局。

△ 柵格系統

?如果將柵格和組件聯合起來，就可以設計出固定內邊距的效果。我給卡片組件就設置了一個行柵格一個列柵格（藍色背景），它們就給整個卡片四周劃分出了一個固定的內邊距。當我把里面的文字圖層的 constraints 設定為左右固定并將它左右邊緣對準柵格邊緣時，當我放大縮小卡片時這個文字圖層就會保持左右的內邊距固定。

△ 組件+柵格

?用一個動圖表示一下，上面這個使用了柵格，下面的沒使用，此時上面圖片的四周就會緊貼著柵格邊緣。

△ 組件+柵格動態示意

3. 添加交互

最后，為了體驗真實的效果，我會給它添加一些交互效果。Figma 自帶的交互動作包含了跳轉、顯示浮層、打開鏈接等，而觸發方式包括點擊、鼠標懸浮、延時等，還有滾動固定等效果，足以做出一些基本的交互效果了。

△ 交互原型

?如果是移動端，我可以用手機直接打開 https://figma.com/mirror 來預覽效果。這很方便，不需要額外下載 App，只需要在手機上登錄一下就行了。

當然，整個設計過程中還會有很多細節會讓你覺得十分方便。比如說使用 Fill 來統一代表背景色和文字顏色，方便同時調整文字和圖層。還有 Smart Selection 可以讓你快速選擇一些元素，將它們對齊，并隨意互換兩個元素的位置。他們會經常在官方博文中告訴你一些小技巧，我也經常會感嘆「竟然還有這種操作」。

Figma 適合什么樣的人？

總體用下來，我覺得 Figma 免費版非常適合獨立開發者/設計師。因為我們的項目一般不復雜，項目間關聯性也不大，就可以用一個文件來設計一個項目，也就不用擔心跨文件共享組件要收費的問題。

與此同時，Figma 基于 Web 的特性也決定了它易于分享。如果有人想要看你的設計，你可以直接將預覽鏈接發給對方。這也意味著你可以隨時隨地做設計，即使沒有帶電腦也沒關系。Figma 官方響應也很快，我有時遇到問題會直接去社區反饋，他們也會很快答復。他們還保持著一周一次版本迭代，所以如果你反饋的建議被采納就可以很快看到更新。

目前 Figma 在國外的使用率逐漸攀升，在國內可能受制于網絡太慢而比較小眾。我還會繼續使用它做我的個人項目，如果什么時候可以在團隊間普及開來，我會去買它的付費版，這樣就可以使用跨文件組件共享多人實時協作設計了。

歡迎關注作者的微信公眾號：「codesigner」