第一次知道 Figma 是在 2016 年，但真正用起來還是在去年。那時(shí)苦于 Sketch 每次更新都會(huì)導(dǎo)致一些插件不能用且界面不夠精致，一直想要為它找一個(gè)替代品。直到后來嘗試將自己的個(gè)人項(xiàng)目都導(dǎo)入到 Figma，這才開始在 Figma 中嘗試設(shè)計(jì)。
因?yàn)?Figma 是基于 Web 的，也就是在線的網(wǎng)頁(yè)，我總覺得使用起來會(huì)受限于性能而不夠流暢，這也是我前幾年不敢去用的原因。但直到我真正使用起來，才發(fā)現(xiàn)操作非常流暢，而且文件都在云端，免費(fèi)版保留最近一個(gè)月的歷史記錄，再也不用「最終版 1」「最終版 2」這種方式管理設(shè)計(jì)文件了。
而隨著使用加深，我發(fā)現(xiàn) Figma 的交互也非常符合直覺，還有很多精心設(shè)計(jì)的小細(xì)節(jié)。借用一位朋友的話來說，「這是一群設(shè)計(jì)師為設(shè)計(jì)師打造的設(shè)計(jì)工具，讓大家專注于設(shè)計(jì)本身，而不是在設(shè)計(jì)時(shí)還要克服工具自身影響效率的因素」。
下面我結(jié)合我的使用經(jīng)驗(yàn)說一說我是怎樣用 Figma 做設(shè)計(jì)的，以及這一年以來我的一些使用心得。
我的設(shè)計(jì)流程
在此之前，先說一下我的背景。我平時(shí)會(huì)做很多業(yè)余項(xiàng)目，大多是網(wǎng)頁(yè)和小程序，平時(shí)還會(huì)做一些公眾號(hào)的封面和插圖，基本都是在 Figma 中設(shè)計(jì)完成的。
初稿構(gòu)思
一般當(dāng)我有了一個(gè)想法時(shí)，我會(huì)先在 Figma 中隨意勾畫出一個(gè)初稿。然后，我會(huì)在這個(gè)基礎(chǔ)上不斷修改，不斷完善自己的想法。這其實(shí)相當(dāng)于原型設(shè)計(jì)階段，在這個(gè)過程中我不會(huì)在意樣式是否美觀，只會(huì)在意功能、結(jié)構(gòu)是否合理。
因?yàn)槲业南敕〞?huì)不斷變化，說不準(zhǔn)什么時(shí)候有一個(gè)新的想法會(huì)加進(jìn)去，所以在這個(gè)階段它的變化會(huì)很大。因?yàn)?Figma 可以自動(dòng)保存最近 30 天的歷史（付費(fèi)版可以保存所有歷史），所以你不用擔(dān)心自己突然想要回到之前的某個(gè)版本而沒有保存。
盡管大膽地構(gòu)思設(shè)計(jì)，你可以隨時(shí)恢復(fù)到之前的版本。
設(shè)計(jì)調(diào)整
接下來我就會(huì)開始調(diào)整樣式，細(xì)化設(shè)計(jì)了。這個(gè)過程中我會(huì)用到兩個(gè)比較重要的東西——組件和柵格。組件可以用來設(shè)計(jì)重復(fù)性模塊，提高效率，柵格則可以讓我的設(shè)計(jì)元素的分布保持一致比例。
所謂組件，類似于 Sketch 中的 Symbol、PowerPoint 中的母版，用于繪制可復(fù)用的元素。比如說在我的設(shè)計(jì)中有一個(gè)卡片列表，我會(huì)在旁邊先做這個(gè)卡片，微調(diào)它的樣式，等差不多滿意時(shí)再?gòu)?fù)制出多個(gè)放到頁(yè)面中。
最原始的組件叫做 master，而從它復(fù)制出去的組件叫做 instance，當(dāng)你調(diào)整 master 的樣式時(shí)所有的 instance 都會(huì)跟著同步。Figma 允許將 master 組件就近放在頁(yè)面旁邊，這樣是極其方便的，因?yàn)楹竺骐y免需要調(diào)整細(xì)節(jié)，這時(shí)候你就可以邊調(diào)整 master 細(xì)節(jié)邊看它在整個(gè)頁(yè)面中的效果，比如下圖中我想看一下將 logo 放大的效果。
而反過來，當(dāng)你調(diào)整 instance 的部分樣式時(shí) master 是不會(huì)跟著變化的。這樣就保證了靈活性，因?yàn)榭傆幸恍?instance 需要和其它 instance 有一點(diǎn)區(qū)別。
說完組件，再說說柵格的妙用。在 Figma 中我們可以給頁(yè)面（即 frame）和組件添加?xùn)鸥，而柵格可以添加網(wǎng)格、行和列。在頁(yè)面中添加網(wǎng)格可以幫助你對(duì)其元素，但我一般會(huì)添加列柵格，因?yàn)樗梢詭椭野言嘏帕袨榈确值膸琢，并保持元素間隙。下圖中紅色長(zhǎng)條就是列柵格，他將中間內(nèi)容區(qū)域均分為 12 列，我就可以把里面的元素按照 1-8-3 的比例布局。
如果將柵格和組件聯(lián)合起來，就可以設(shè)計(jì)出固定內(nèi)邊距的效果。我給卡片組件就設(shè)置了一個(gè)行柵格一個(gè)列柵格（藍(lán)色背景），它們就給整個(gè)卡片四周劃分出了一個(gè)固定的內(nèi)邊距。當(dāng)我把里面的文字圖層的 constraints 設(shè)定為左右固定并將它左右邊緣對(duì)準(zhǔn)柵格邊緣時(shí)，當(dāng)我放大縮小卡片時(shí)這個(gè)文字圖層就會(huì)保持左右的內(nèi)邊距固定。
用一個(gè)動(dòng)圖表示一下，上面這個(gè)使用了柵格，下面的沒使用，此時(shí)上面圖片的四周就會(huì)緊貼著柵格邊緣。
添加交互
最后，為了體驗(yàn)真實(shí)的效果，我會(huì)給它添加一些交互效果。Figma 自帶的交互動(dòng)作包含了跳轉(zhuǎn)、顯示浮層、打開鏈接等，而觸發(fā)方式包括點(diǎn)擊、鼠標(biāo)懸浮、延時(shí)等，還有滾動(dòng)固定等效果，足以做出一些基本的交互效果了。
如果是移動(dòng)端，我可以用手機(jī)直接打開 https://figma.com/mirror 來預(yù)覽效果。這很方便，不需要額外下載 App，只需要在手機(jī)上登錄一下就行了。
當(dāng)然，整個(gè)設(shè)計(jì)過程中還會(huì)有很多細(xì)節(jié)會(huì)讓你覺得十分方便。比如說使用 Fill 來統(tǒng)一代表背景色和文字顏色，方便同時(shí)調(diào)整文字和圖層。還有 Smart Selection 可以讓你快速選擇一些元素，將它們對(duì)齊，并隨意互換兩個(gè)元素的位置。他們會(huì)經(jīng)常在官方博文中告訴你一些小技巧，我也經(jīng)常會(huì)感嘆「竟然還有這種操作」。
Figma 適合什么樣的人？
總體用下來，我覺得 Figma 免費(fèi)版非常適合獨(dú)立開發(fā)者/設(shè)計(jì)師。因?yàn)槲覀兊捻?xiàng)目一般不復(fù)雜，項(xiàng)目間關(guān)聯(lián)性也不大，就可以用一個(gè)文件來設(shè)計(jì)一個(gè)項(xiàng)目，也就不用擔(dān)心跨文件共享組件要收費(fèi)的問題。
與此同時(shí)，F(xiàn)igma 基于 Web 的特性也決定了它易于分享。如果有人想要看你的設(shè)計(jì)，你可以直接將預(yù)覽鏈接發(fā)給對(duì)方。這也意味著你可以隨時(shí)隨地做設(shè)計(jì)，即使沒有帶電腦也沒關(guān)系；Figma 官方響應(yīng)也很快，我有時(shí)遇到問題會(huì)直接去社區(qū)反饋，他們也會(huì)很快答復(fù)。他們還保持著一周一次版本迭代，所以如果你反饋的建議被采納就可以很快看到更新。
目前 Figma 在國(guó)外的使用率逐漸攀升，在國(guó)內(nèi)可能受制于網(wǎng)絡(luò)太慢而比較小眾。我還會(huì)繼續(xù)使用它做我的個(gè)人項(xiàng)目，如果什么時(shí)候可以在團(tuán)隊(duì)間普及開來，我會(huì)去買它的付費(fèi)版，這樣就可以使用跨文件組件共享多人實(shí)時(shí)協(xié)作設(shè)計(jì)了。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。