序言
隨著全球疫情反彈肺樟，國外很多城市都延長了封城時(shí)間蜒犯，國外大廠相繼實(shí)行了遠(yuǎn)程辦公贵白，這無疑放大了團(tuán)隊(duì)協(xié)作上的一些問題墩新。特別是在用Sketch的時(shí)候，一直有多人協(xié)作和版本管理困難的痛點(diǎn)瓢省，而且在家辦公可能遇到跨終端和提前準(zhǔn)備素材的情況锻梳。以我本人的情況舉例，家里只有PC電腦且沒安裝任何字體和素材净捅，這些都成了遠(yuǎn)程辦公最大的阻礙之一疑枯。
據(jù)了解，越來越多大廠像國外的Microsoft蛔六、Twitter荆永、Dribbble 、Airbnb国章，國內(nèi)的字節(jié)跳動(dòng)具钥、網(wǎng)易里某些部門等等都在開始使用Figma作為團(tuán)隊(duì)設(shè)計(jì)工具，而且每年一度的UXTOOLS用戶體驗(yàn)工具調(diào)查報(bào)告顯示液兽，F(xiàn)igma在國外有逐漸攀升的趨勢骂删。
借著這個(gè)契機(jī)我試用了下Figma掌动，發(fā)現(xiàn)它竟然是云端協(xié)作模式的，這是一個(gè)非常前瞻的設(shè)計(jì)宁玫！此前市場研究機(jī)構(gòu)Gartner就預(yù)計(jì)粗恢，到2023年全球互聯(lián)網(wǎng)通信云市場規(guī)模將比2020年翻一倍達(dá)到133.5億美元，從云游戲欧瘪、遠(yuǎn)程醫(yī)療的落地也足以一窺云服務(wù)未來的前景眷射。那Figma除了前瞻且強(qiáng)大的云端協(xié)作功能外還有哪些優(yōu)勢呢？這款軟件到底能不能代替Sketch呢佛掖？
本文將從一個(gè)UI設(shè)計(jì)師的角度對比分析下兩款軟件的優(yōu)劣特點(diǎn)妖碉，為大家就組件、團(tuán)隊(duì)協(xié)作芥被、兼容性欧宜、遷移成本等多方面展開詳細(xì)的測評，我們一起來看下吧~
注：本文中的組件是指：可以在你的設(shè)計(jì)中重復(fù)使用的UI元素拴魄， 它們可以幫助你跨項(xiàng)目創(chuàng)建和管理一致的設(shè)計(jì)冗茸。其常見的步驟有①首先創(chuàng)建主組件并定義組件的屬性。②然后創(chuàng)建主組件的實(shí)例羹铅。③更新主組件時(shí)蚀狰，該組件的所有實(shí)例也將更新愉昆。因此职员，作為說明類文檔的組件匯總，即不滿足第三點(diǎn)的組件跛溉，不在本文的論述范圍內(nèi)哦~
一焊切、做圖效率
很多團(tuán)隊(duì)可能覺得組件是用來統(tǒng)一視覺同學(xué)規(guī)范的，交互稿不需要符合規(guī)范芳室，所以交互同學(xué)不用組件专肪，而且組件學(xué)習(xí)成本太高了之類的。但是組件庫作為一個(gè)合格的效率工具堪侯，易用好上手提高效率就應(yīng)該是它的指標(biāo)嚎尤。在這里我們重點(diǎn)從效率、易懂伍宦、簡潔芽死、安全 四方面對比分析。
1.靈活效率高
這一部分我們將從? ①啟動(dòng)軟件? →? ②查找組件? →? ③覆蓋實(shí)例*? →? ④編輯實(shí)例? 這四步逐步分析次洼，Sketch與Figma兩者效率和靈活度的差別关贵。
*實(shí)例是主組件的精確副本且受主組件控制。它具有與原始屬性相同的所有屬性卖毁，包括任何文本樣式揖曾、樣式或布局約束。
1.1軟件啟動(dòng)速度快
Sketch如果安裝插件過多或打開文件過大過多，容易造成閃退或無響應(yīng)炭剪，閃退后即便可以重新打開练链，也會(huì)時(shí)不時(shí)地丟失數(shù)據(jù)，之前的圖都白做了（精神抖擻.JPG）念祭。而Figma我用到目前為止還沒閃退過兑宇，秒啟動(dòng)近期打開過的文件，而且時(shí)刻自動(dòng)保存粱坤，做起圖來不會(huì)被打斷心流隶糕，既安心又省事！
1.2多視圖靈活查找
在這一步中Figma有列表和網(wǎng)格兩種視圖可供用戶選擇站玄，適應(yīng)了不同的查看組件需要枚驻。而Sketch僅支持列表查看，像Icon這類組件就極難從略縮圖里辨認(rèn)株旷。
1.3覆蓋實(shí)例門檻低
我們平時(shí)做圖時(shí)總有一些列表類的頁面如關(guān)注用戶列表再登，在拖出一個(gè)列表實(shí)例后，需要批量修改昵稱和頭像以模擬出高保真的樣式晾剖。Sketch在批量填充素材時(shí)锉矢，必須選中同一實(shí)例，而Figma只要選中了圖層即可齿尽。如下圖沽损，同為批量修改頭像，F(xiàn)igma無論頭像大小多少循头，是否屬于同個(gè)組件绵估，都能在選中圖層后一鍵替換，素材填充門檻極低卡骂，效率UPUPUP国裳！
1.4編輯實(shí)例步驟少
在這部分我們將用彈窗組件去對比兩個(gè)軟件~ 彈窗，也稱作dialog全跨，是APP中最基礎(chǔ)最常見的組件之一缝左，彈窗常見的組成元素有反饋Icon、標(biāo)題浓若、正文渺杉、輔文和一般有1到3個(gè)操作等。
有些彈窗是對上一級操作的反饋七嫌，需要添加操作成功與否的Icon少办。同樣是隱藏Icon的操作，Sketch需要先點(diǎn)擊進(jìn)入二級編輯菜單再選擇隱藏共兩步完成诵原，而Figma入口更淺僅需一步英妓。
這是因?yàn)镾ketch沒有對編輯行為依照編輯頻率的高低分而治之挽放，「是否顯示」及「切換組件」都收進(jìn)了二級入口。
而Figma是這樣分類：一類信息是「必定顯示」的如操作項(xiàng)蔓纠，用戶僅僅選擇操作的數(shù)量：是單按鈕還是雙按鈕辑畦，這類必定顯示的放在一級入口；一類信息是「非必定顯示」的腿倚，把顯示開關(guān)放一級入口纯出，切換組件1放在二級入口。這樣根據(jù)類別分級展示敷燎，層次更扁平暂筝，操作更便捷。
1.這里的「切換組件」指切換當(dāng)前彈窗實(shí)例下某一元素顯示的內(nèi)容硬贯，并非整個(gè)組件換掉焕襟，下同。
小tips：Figma信息的顯示與隱藏除了上述方法外饭豹，還可以通過直接選中圖層鸵赖，點(diǎn)擊刪除即可。
Sketch編輯組件統(tǒng)一在「控件」頁面進(jìn)行拄衰，用戶需要與實(shí)例相互切換它褪。Figma則可以在當(dāng)前頁直接編輯不用跳頁面，編輯起來更快更直觀翘悉。
繼續(xù)拿剛剛的彈窗舉例茫打，我們把組件里每行的編輯點(diǎn)列出來逐個(gè)對比下~除了Sketch中置灰的3、5镐确、7包吝、8點(diǎn)饼煞，每個(gè)點(diǎn)都能一一對應(yīng)起來源葫。這些置灰的這些點(diǎn)代表什么？Figma是怎么處理的呢砖瞧？
我們發(fā)現(xiàn)置灰的點(diǎn)都是編輯文本的操作息堂，左圖的Figma把它設(shè)計(jì)在了組件上，直接雙擊文本層就能編輯了块促。雖然Sketch后面也借鑒了這個(gè)功能荣堰，但沒取消掉右側(cè)的編輯菜單，導(dǎo)致像右圖這樣信息一行行的看著密密麻麻竭翠，界面自然就沒這么簡潔清爽了振坚。
2.易懂好上手
上一部分我們提及，F(xiàn)igma的編輯界面更清爽斋扰，那理解難度會(huì)因此增加嗎渡八？
Figma采取的是結(jié)果導(dǎo)向式地描述編輯點(diǎn)：有沒有Icon啃洋？有沒有正文？有沒有輔文屎鳍？操作項(xiàng)數(shù)量是多少宏娄？這些詞語哪怕對從未使用過組件的新同學(xué)都很好理解，而且還能備注使用規(guī)范輔助說明逮壁。不僅如此孵坚，上述的編輯點(diǎn)也能根據(jù)自身業(yè)務(wù)自定義，即便每個(gè)團(tuán)隊(duì)對組件的叫法習(xí)慣不同也不用擔(dān)心了窥淆。
而Sketch卻要經(jīng)過雙重理解：組件原理和編輯順序雙重理解卖宠。下面就這兩點(diǎn)分析下Figma是怎么做的~
2.1無需理解組件原理
如下圖，F(xiàn)igma通過變體*功能窮盡實(shí)例展示了如下圖藍(lán)字所示的3個(gè)編輯點(diǎn)：選擇操作數(shù)量/有無正文/有無Icon忧饭；Sketch則窮盡單個(gè)組件逗堵，展示了如下圖右邊黑字所示的8個(gè)編輯點(diǎn)。導(dǎo)致Sketch一上來就鋪天蓋地地展示很多編輯點(diǎn)眷昆，用戶不知道要怎么編輯才能得到想要的樣式蜒秤，是切換組件，還是修改Icon顏色亚斋，還是編輯文本作媚。沒有理解原理，就無法建立編輯點(diǎn)與樣式的關(guān)系帅刊。這么高的學(xué)習(xí)成本纸泡，直接就被勸退了。? ? ? ?
*變體組件原名variants赖瞒，又稱組件集/超級組件女揭，是Figma在2020年10月28號發(fā)布的新功能，我們來看下官方解釋栏饮。說白了就是通過窮舉單個(gè)組件的多種類型吧兔、尺寸、狀態(tài)并按此分類（如上圖左側(cè)藍(lán)字）最后集合成一個(gè)組件集合體袍嬉，使其可以通過右側(cè)編輯菜單按類別地快速選擇及切換（如下圖右側(cè)所示）以獲得最終的樣式境蔼。
2.2無需理解編輯順序
Sketch的組件圖層順序等于它的編輯順序，導(dǎo)致Sketch是否好上手極其依賴它的創(chuàng)建者伺通。一旦沒有整理圖層箍土，編輯順序就容易混亂。用戶得先理順組件與編輯順序的對應(yīng)關(guān)系罐监，這就抬高了上手成本吴藻，降低了效率。而Figma則不存在這樣的問題弓柱。
Sketch要經(jīng)過組件原理和編輯順序雙重理解沟堡，加上它組件名特別長疮鲫，閱讀起來很枯燥，讓新手望而卻步弦叶。閃現(xiàn)當(dāng)時(shí)為了解決枯燥的問題俊犯，增加emoji提高辨識度去區(qū)分切換組件、是否顯示伤哺、編輯文本等功能燕侠，但治標(biāo)不治本。
2.3組件可添加提示語
組件可以增加提示語以在實(shí)例中能直觀告訴用戶如何使用該組件立莉，解除用戶的使用疑慮绢彤。再者，它可以寫成是組件的一些別稱蜓耻，使其擁有模糊搜索的功能茫舶。例如一些搜索Icon，我們可能稱之為「查找」「搜索」「放大鏡」等等刹淌，添加提示語后能有效提高搜索的準(zhǔn)確率饶氏。
同時(shí)它還能添加鏈接，該鏈接可以是介紹組件的詳細(xì)說明有勾，或是一些靈感資源來源疹启，一些視頻等拓展資料，也可以鏈接到你的另一個(gè)Figma文件蔼卡。幫助產(chǎn)品或開發(fā)更好的理解我們的設(shè)計(jì)初衷和理念喊崖，或許能推動(dòng)他們會(huì)按照這個(gè)理念去實(shí)現(xiàn)。
注：查看時(shí)注意一定要選中組件雇逞，而非組件里面的圖層荤懂，這樣才能出現(xiàn)鏈接。
3.簡潔有條理
3.1界面清爽
下圖是彈窗在Figma和Sketch的編輯狀態(tài)塘砸。在選中組件后节仿，軟件右側(cè)就會(huì)如下圖所示出現(xiàn)編輯界面。明顯看出Figma的層數(shù)少了很多谣蠢，單行文本很清爽沒這么多密密麻麻的文字粟耻，能展示更多的編輯功能甚至增加組件提示語呢查近。
從截圖我們可以看出Sketch是通過「一行文案說明」「一行填充或選擇」相間布局的眉踱，導(dǎo)致編輯頁面行數(shù)特別多，縱向非常長霜威。信息越多獲取信息的成本則越高谈喳，效率就越低。
不僅縱向非常長戈泼，橫向上單個(gè)組件名字也特別長婿禽。如果在當(dāng)前頁找不到目標(biāo)組件赏僧，需要去信息更密集的總組件庫搜索或者查找。這是由于Sketch使用「/」命名這種繁瑣的方式組織組件扭倾，F(xiàn)igma雖然也支持「/」分類淀零，但它新增一點(diǎn)：可使用 Page 以及 Frame/Group 的方式且不會(huì)出現(xiàn)在組件名上，這意味著名字更短了看著也沒這么費(fèi)神了膛壹。
3.2分類編輯
Figma之所以簡潔還有一個(gè)關(guān)鍵的點(diǎn)在于驾中，它的組件更具原子級。通過對組件的編輯行為作了分類：組件組合方式模聋、顏色樣式肩民、文本樣式、不透明度链方、切換組件等行為都單獨(dú)了出來持痰，相互之間單獨(dú)控制不糅雜，當(dāng)我們需要改顏色樣式時(shí)祟蚀，不用像 Sketch 那樣深入到元件中去調(diào)整工窍。還是用彈窗舉例，一起看看下圖前酿。
信息分好類了移剪，找信息的速度就自然快了，效率也上來了薪者。
4.版本可追溯
所有版本可追溯纵苛，隨時(shí)用回第一稿！
Figma有自動(dòng)保存文件的功能言津，如果 30 分鐘內(nèi)文件沒有被更改攻人，則會(huì)自動(dòng)保存為一個(gè)版本。 這意味著如果你在文件上連續(xù)工作 3 個(gè)小時(shí)然后停止編輯悬槽，則會(huì)在 30 分鐘不活動(dòng)后創(chuàng)建一個(gè)版本怀吻。也可以通過快捷鍵Command + Option + S（Win：Ctrl + Alt + S）主動(dòng)創(chuàng)建新版本。命名或保存版本時(shí)初婆，還可以添加標(biāo)題和描述蓬坡，當(dāng)你想找回第一稿時(shí)就更容易辨認(rèn)啦。? ? ? ?
二磅叛、團(tuán)隊(duì)協(xié)作
1.交付更準(zhǔn)
如果Sketch出了新功能屑咳，第三方軟件未同步更新就會(huì)引發(fā)像下面這個(gè)bug：設(shè)計(jì)稿上傳到xshow（類似藍(lán)湖）后，Icon色值顯示錯(cuò)誤弊琴。左側(cè)是圖標(biāo)樣式兆龙，中間是Sketch的正確色值，右側(cè)是上傳到第三方軟件后的錯(cuò)誤色值敲董。
實(shí)際上這是由于Sketch新出了一個(gè)「色調(diào)」功能紫皇，可以在該圖層直接覆蓋一個(gè)新顏色慰安。而xshow沒根據(jù)這新功能同步更新，導(dǎo)致交付給開發(fā)的時(shí)候顯示的還是原圖層色值聪铺。我還試過在Sketch等比拉伸組件后化焕，雖然組件的外輪廓尺寸為整數(shù)，但在第三方軟件組件內(nèi)的元素會(huì)出現(xiàn)小數(shù)點(diǎn)铃剔，導(dǎo)致開發(fā)按照了錯(cuò)誤的間距進(jìn)行開發(fā)锣杂。而Figma從做圖到交付都使用原軟件源文件就不會(huì)出現(xiàn)這個(gè)問題。
2.交付更快
省去了上傳第三方平臺或?qū)С鰰r(shí)間番宁，所見即所得元莫。
3.進(jìn)度同步
因?yàn)镕igma文件都在云端，因此可以時(shí)刻查看設(shè)計(jì)進(jìn)度蝶押，打破信息差踱蠢，對全局地控制項(xiàng)目進(jìn)度更方便了。
4.即時(shí)評論
在設(shè)計(jì)稿的任何地方與上游產(chǎn)品&下游開發(fā)通過評論反饋修改建議棋电，甚至能在評論中?@其他人?或?qū)⒃u論標(biāo)記為已解決茎截。
5.多人創(chuàng)作
支持多人共同創(chuàng)作。因?yàn)镕igma基于web平臺開發(fā)赶盔，所以軟件可以自動(dòng)更新企锌，不會(huì)出現(xiàn)因?yàn)槎嗳说能浖姹静煌鵁o法協(xié)作的問題。多人同時(shí)異地于未、異時(shí)異地完成創(chuàng)作撕攒，不用來回傳送修改文件，是不是方便許多烘浦？
三抖坪、組件管理
1.組件數(shù)量更精簡
利用Figma樣式單獨(dú)控制的功能，不用再因顏色不同新增組件了闷叉！不用再因文本居中居左不同新增組件了擦俐！
變體組件的設(shè)計(jì)讓組件數(shù)量更少了！同樣是頭像組件握侧，F(xiàn)igma的變體會(huì)使組件數(shù)量歸一蚯瞧，而Sketch則需要全部羅列展示出來。
2.樣式管理更便捷
第一點(diǎn)提到文本樣式分離出來單獨(dú)控制了，圖層樣式減少了，顏色投影圓角等樣式也是這個(gè)原理。選中圖層后右側(cè)會(huì)出現(xiàn)使用過的顏色，能直接批量管理进胯，剔除不符合組件規(guī)范的色值，或讓斷鏈（即與組件庫失去鏈接）的組件批量重新鏈接，不容易遺漏。
3.組件庫一鍵迭代
組件庫經(jīng)常會(huì)根據(jù)業(yè)務(wù)需要而更新迭代西设，這時(shí)候?qū)嵗募趺锤M件庫同步迭代呢？Sketch需要挨個(gè)點(diǎn)開同步組件才能與最新組件庫保持一致答朋，當(dāng)文件過多時(shí)贷揽，這個(gè)操作就變得極其繁瑣。Figma則通過一個(gè)開關(guān)控制梦碗，真正做到修改一處就能改變所有禽绪。而且更新后的變體功能，更加方便組件使用與迭代洪规。
四印屁、兼容考量
1.資產(chǎn)跟人
文件、插件斩例、素材雄人、字體統(tǒng)統(tǒng)都是跟著賬戶走，不用擔(dān)心臨時(shí)更換終端而花大量時(shí)間準(zhǔn)備這些材料念赶。
文件不用占用本地內(nèi)存础钠，團(tuán)隊(duì)內(nèi)也不用購買高額的共享網(wǎng)盤。網(wǎng)上也有非常多的插件介紹文章叉谜，這里就不展開了旗吁。倒是有個(gè)工具強(qiáng)烈安利給大家：一個(gè)插件可視化以方便查找和快速啟動(dòng)的小工具！
官方解釋：Figma ex是使用在Figma里停局，使插件列表可視化的工具很钓，并提供「自定義修改插件顯示順序」和「中文備注說明」等功能，簡直就是插件重度患者的福音董栽！而且客戶端瀏覽器都支持履怯，請看下圖。官網(wǎng)鏈接https://moonvy.com/FigmaEX/
素材則可以用插件「Concent Reel」管理裆泳，不同于Sketch需要從本地拉取頭像或昵稱文本素材叹洲，Concent Reel插件里包含著大量的在線素材可供挑選，包括姓名工禾、電子郵件运提、公司名稱、網(wǎng)址闻葵、個(gè)人資料圖片等一系列內(nèi)容民泵。當(dāng)然你也可以為團(tuán)隊(duì)上傳一些素材方便大家使用，這樣就可以保證我們的設(shè)計(jì)稿更加高保真槽畔，下圖也有一些推薦的素材大家可以收藏使用栈妆。
字體跟賬戶的門檻則稍微高點(diǎn)，需要Figma 企業(yè)版才可以，它允許組織中的用戶訪問和使用特定團(tuán)隊(duì)內(nèi)或整個(gè)組織內(nèi)的共享字體鳞尔。也就是說嬉橙，凡是我用過的字體，在其他電腦上都可以正確的顯示寥假。
2.任意終端
Figma可以在任何系統(tǒng)中使用市框，因?yàn)樗?b>基于瀏覽器的，不依賴做圖終端糕韧。Windows枫振、iMac甚至手機(jī)iPad都能做圖，可謂全平臺制霸了萤彩。iPad做圖的話推薦下載Figurative軟件粪滤，它用瀏覽器封裝成了軟件，配合 Magic Keyboard雀扶、觸控板或鼠標(biāo)使用體驗(yàn)極佳杖小。而Sketch現(xiàn)在只能在macOS上使用，很多團(tuán)隊(duì)不得不為此購買了昂貴的蘋果辦公設(shè)備怕吴。
五窍侧、關(guān)于遷移
1.遷移成本大嗎
學(xué)習(xí)成本：學(xué)習(xí)成本低，兩個(gè)軟件界面和快捷鍵很相似转绷，安裝了漢化插件特別好上手伟件。
資金：二人團(tuán)隊(duì)免費(fèi)。
時(shí)間：Figma可直接導(dǎo)入Sketch文件议经，當(dāng)時(shí)我一個(gè)人熟悉軟件+導(dǎo)入所有視覺稿文件花了四個(gè)工作日完成斧账。刨去導(dǎo)入稿子的時(shí)間，應(yīng)該一兩天就差不多了煞肾。
2.最佳遷移姿勢
可直接導(dǎo)入的：文本咧织、顏色、空狀態(tài)籍救、占位圖习绢、Icon等素材為主的，以及頭像蝙昙、分隔線闪萄、圓角等僅規(guī)范尺寸檔位的都可以直接導(dǎo)入。這類組件基本沒有使用軟件的特性奇颠，所以對軟件依賴度很低败去。
導(dǎo)入后需要加上auto layout布局約束的：操作氣泡、action sheet烈拒、下拉篩選菜單等圆裕，需要在Figma中加入布局約束广鳍。這類組件往往有著大量重復(fù)的列表，有了Figma的布局約束吓妆，在實(shí)例中可以任意地新增或刪減列數(shù)赊时，以適應(yīng)業(yè)務(wù)的個(gè)性化需要。
建議做成變體的：按鈕耿战、開關(guān)蛋叼、彈窗等有多個(gè)類型/狀態(tài)/尺寸的組件焊傅。變體組件的核心是用來高效管理多狀態(tài)屬性的組件剂陡。像那種可以通過小元素的變化延展出很多個(gè)實(shí)例的，如果不集合成一個(gè)變體狐胎，容易造成組件的冗雜鸭栖，查找費(fèi)勁，操作也繁瑣握巢。但我建議property變量控制在5個(gè)以內(nèi)晕鹊，否則窮舉會(huì)使得變體非常龐大。
六暴浦、相關(guān)推薦
下面分享一些我常用的學(xué)習(xí)網(wǎng)站~
官方使用幫助： https://help.Figma.com/hc/en-us
中文版用戶手冊： https://Figmachina.com/guide/
版本迭代說明： https://releases.Figma.com/
Figma插件可視化工具： https://moonvy.com/FigmaEX/
B站推薦UP：草帽sMao溅话、像素范
更多想法、發(fā)現(xiàn)或疑惑歌焦，歡迎大家評論留言交流哇飞几。
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)独撇，非商業(yè)轉(zhuǎn)載請注明出處屑墨。
