序言

隨著全球疫情反彈，國外很多城市都延長了封城時間，國外大廠相繼實行了遠(yuǎn)程辦公，這無疑放大了團(tuán)隊協(xié)作上的一些問題。特別是在用Sketch的時候，一直有多人協(xié)作和版本管理困難的痛點，而且在家辦公可能遇到跨終端和提前準(zhǔn)備素材的情況。以我本人的情況舉例，家里只有PC電腦且沒安裝任何字體和素材，這些都成了遠(yuǎn)程辦公最大的阻礙之一。

據(jù)了解，越來越多大廠像國外的Microsoft、Twitter、Dribbble 、Airbnb，國內(nèi)的字節(jié)跳動、網(wǎng)易里某些部門等等都在開始使用Figma作為團(tuán)隊設(shè)計工具，而且每年一度的UXTOOLS用戶體驗工具調(diào)查報告顯示，F(xiàn)igma在國外有逐漸攀升的趨勢。

截圖來源：https://uxtools.co/survey-2020

借著這個契機(jī)我試用了下Figma，發(fā)現(xiàn)它竟然是云端協(xié)作模式的，這是一個非常前瞻的設(shè)計！此前市場研究機(jī)構(gòu)Gartner就預(yù)計，到2023年全球互聯(lián)網(wǎng)通信云市場規(guī)模將比2020年翻一倍達(dá)到133.5億美元，從云游戲、遠(yuǎn)程醫(yī)療的落地也足以一窺云服務(wù)未來的前景。那Figma除了前瞻且強大的云端協(xié)作功能外還有哪些優(yōu)勢呢？這款軟件到底能不能代替Sketch呢？

本文將從一個UI設(shè)計師的角度對比分析下兩款軟件的優(yōu)劣特點，為大家就組件、團(tuán)隊協(xié)作、兼容性、遷移成本等多方面展開詳細(xì)的測評，我們一起來看下吧~

注：本文中的組件是指：可以在你的設(shè)計中重復(fù)使用的UI元素， 它們可以幫助你跨項目創(chuàng)建和管理一致的設(shè)計。其常見的步驟有①首先創(chuàng)建主組件并定義組件的屬性。②然后創(chuàng)建主組件的實例。③更新主組件時，該組件的所有實例也將更新。因此，作為說明類文檔的組件匯總，即不滿足第三點的組件，不在本文的論述范圍內(nèi)哦~

一、做圖效率

很多團(tuán)隊可能覺得組件是用來統(tǒng)一視覺同學(xué)規(guī)范的，交互稿不需要符合規(guī)范，所以交互同學(xué)不用組件，而且組件學(xué)習(xí)成本太高了之類的。但是組件庫作為一個合格的效率工具，易用好上手提高效率就應(yīng)該是它的指標(biāo)。在這里我們重點從效率、易懂、簡潔、安全 四方面對比分析。

1.靈活效率高

這一部分我們將從  ①啟動軟件  →   ②查找組件  →   ③覆蓋實例*  →   ④編輯實例  這四步逐步分析，Sketch與Figma兩者效率和靈活度的差別。

*實例是主組件的精確副本且受主組件控制。它具有與原始屬性相同的所有屬性，包括任何文本樣式、樣式或布局約束。

1.1軟件啟動速度快

Sketch如果安裝插件過多或打開文件過大過多，容易造成閃退或無響應(yīng)，閃退后即便可以重新打開，也會時不時地丟失數(shù)據(jù)，之前的圖都白做了（精神抖擻.JPG）。而Figma我用到目前為止還沒閃退過，秒啟動近期打開過的文件，而且時刻自動保存，做起圖來不會被打斷心流，既安心又省事！

1.2多視圖靈活查找

在這一步中Figma有列表和網(wǎng)格兩種視圖可供用戶選擇，適應(yīng)了不同的查看組件需要。而Sketch僅支持列表查看，像Icon這類組件就極難從略縮圖里辨認(rèn)。

1.3覆蓋實例門檻低

我們平時做圖時總有一些列表類的頁面如關(guān)注用戶列表，在拖出一個列表實例后，需要批量修改昵稱和頭像以模擬出高保真的樣式。Sketch在批量填充素材時，必須選中同一實例，而Figma只要選中了圖層即可。如下圖，同為批量修改頭像，F(xiàn)igma無論頭像大小多少，是否屬于同個組件，都能在選中圖層后一鍵替換，素材填充門檻極低，效率UPUPUP！

1.4編輯實例步驟少

在這部分我們將用彈窗組件去對比兩個軟件~ 彈窗，也稱作dialog，是APP中最基礎(chǔ)最常見的組件之一，彈窗常見的組成元素有反饋Icon、標(biāo)題、正文、輔文和一般有1到3個操作等。

有些彈窗是對上一級操作的反饋，需要添加操作成功與否的Icon。同樣是隱藏Icon的操作，Sketch需要先點擊進(jìn)入二級編輯菜單再選擇隱藏共兩步完成，而Figma入口更淺僅需一步。   

這是因為Sketch沒有對編輯行為依照編輯頻率的高低分而治之，「是否顯示」及「切換組件」都收進(jìn)了二級入口。

而Figma是這樣分類：一類信息是「必定顯示」的如操作項，用戶僅僅選擇操作的數(shù)量：是單按鈕還是雙按鈕，這類必定顯示的放在一級入口；一類信息是「非必定顯示」的，把顯示開關(guān)放一級入口，切換組件¹放在二級入口。這樣根據(jù)類別分級展示，層次更扁平，操作更便捷。

1.這里的「切換組件」指切換當(dāng)前彈窗實例下某一元素顯示的內(nèi)容，并非整個組件換掉，下同。

小tips：Figma信息的顯示與隱藏除了上述方法外，還可以通過直接選中圖層，點擊刪除即可。

Sketch編輯組件統(tǒng)一在「控件」頁面進(jìn)行，用戶需要與實例相互切換。Figma則可以在當(dāng)前頁直接編輯不用跳頁面，編輯起來更快更直觀。

繼續(xù)拿剛剛的彈窗舉例，我們把組件里每行的編輯點列出來逐個對比下~除了Sketch中置灰的3、5、7、8點，每個點都能一一對應(yīng)起來。這些置灰的這些點代表什么？Figma是怎么處理的呢？

我們發(fā)現(xiàn)置灰的點都是編輯文本的操作，左圖的Figma把它設(shè)計在了組件上，直接雙擊文本層就能編輯了。雖然Sketch后面也借鑒了這個功能，但沒取消掉右側(cè)的編輯菜單，導(dǎo)致像右圖這樣信息一行行的看著密密麻麻，界面自然就沒這么簡潔清爽了。

2.易懂好上手

上一部分我們提及，F(xiàn)igma的編輯界面更清爽，那理解難度會因此增加嗎？

Figma采取的是結(jié)果導(dǎo)向式地描述編輯點：有沒有Icon？有沒有正文？有沒有輔文？操作項數(shù)量是多少？這些詞語哪怕對從未使用過組件的新同學(xué)都很好理解，而且還能備注使用規(guī)范輔助說明。不僅如此，上述的編輯點也能根據(jù)自身業(yè)務(wù)自定義，即便每個團(tuán)隊對組件的叫法習(xí)慣不同也不用擔(dān)心了。

而Sketch卻要經(jīng)過雙重理解：組件原理和編輯順序雙重理解。下面就這兩點分析下Figma是怎么做的~

2.1無需理解組件原理

如下圖，F(xiàn)igma通過變體*功能窮盡實例展示了如下圖藍(lán)字所示的3個編輯點：選擇操作數(shù)量/有無正文/有無Icon；Sketch則窮盡單個組件，展示了如下圖右邊黑字所示的8個編輯點。導(dǎo)致Sketch一上來就鋪天蓋地地展示很多編輯點，用戶不知道要怎么編輯才能得到想要的樣式，是切換組件，還是修改Icon顏色，還是編輯文本。沒有理解原理，就無法建立編輯點與樣式的關(guān)系。這么高的學(xué)習(xí)成本，直接就被勸退了。

*變體組件原名variants，又稱組件集/超級組件，是Figma在2020年10月28號發(fā)布的新功能，我們來看下官方解釋。說白了就是通過窮舉單個組件的多種類型、尺寸、狀態(tài)并按此分類（如上圖左側(cè)藍(lán)字）最后集合成一個組件集合體，使其可以通過右側(cè)編輯菜單按類別地快速選擇及切換（如下圖右側(cè)所示）以獲得最終的樣式。

2.2無需理解編輯順序

Sketch的組件圖層順序等于它的編輯順序，導(dǎo)致Sketch是否好上手極其依賴它的創(chuàng)建者。一旦沒有整理圖層，編輯順序就容易混亂。用戶得先理順組件與編輯順序的對應(yīng)關(guān)系，這就抬高了上手成本，降低了效率。而Figma則不存在這樣的問題。     

Sketch要經(jīng)過組件原理和編輯順序雙重理解，加上它組件名特別長，閱讀起來很枯燥，讓新手望而卻步。閃現(xiàn)當(dāng)時為了解決枯燥的問題，增加emoji提高辨識度去區(qū)分切換組件、是否顯示、編輯文本等功能，但治標(biāo)不治本。

2.3組件可添加提示語

組件可以增加提示語以在實例中能直觀告訴用戶如何使用該組件，解除用戶的使用疑慮。再者，它可以寫成是組件的一些別稱，使其擁有模糊搜索的功能。例如一些搜索Icon，我們可能稱之為「查找」「搜索」「放大鏡」等等，添加提示語后能有效提高搜索的準(zhǔn)確率。

同時它還能添加鏈接，該鏈接可以是介紹組件的詳細(xì)說明，或是一些靈感資源來源，一些視頻等拓展資料，也可以鏈接到你的另一個Figma文件。幫助產(chǎn)品或開發(fā)更好的理解我們的設(shè)計初衷和理念，或許能推動他們會按照這個理念去實現(xiàn)。

注：查看時注意一定要選中組件，而非組件里面的圖層，這樣才能出現(xiàn)鏈接。

3.簡潔有條理

3.1界面清爽

下圖是彈窗在Figma和Sketch的編輯狀態(tài)。在選中組件后，軟件右側(cè)就會如下圖所示出現(xiàn)編輯界面。明顯看出Figma的層數(shù)少了很多，單行文本很清爽沒這么多密密麻麻的文字，能展示更多的編輯功能甚至增加組件提示語呢。

 從截圖我們可以看出Sketch是通過「一行文案說明」「一行填充或選擇」相間布局的，導(dǎo)致編輯頁面行數(shù)特別多，縱向非常長。信息越多獲取信息的成本則越高，效率就越低。

不僅縱向非常長，橫向上單個組件名字也特別長。如果在當(dāng)前頁找不到目標(biāo)組件，需要去信息更密集的總組件庫搜索或者查找。這是由于Sketch使用「/」命名這種繁瑣的方式組織組件，F(xiàn)igma雖然也支持「/」分類，但它新增一點：可使用 Page 以及 Frame/Group 的方式且不會出現(xiàn)在組件名上，這意味著名字更短了看著也沒這么費神了。

3.2分類編輯

Figma之所以簡潔還有一個關(guān)鍵的點在于，它的組件更具原子級。通過對組件的編輯行為作了分類：組件組合方式、顏色樣式、文本樣式、不透明度、切換組件等行為都單獨了出來，相互之間單獨控制不糅雜，當(dāng)我們需要改顏色樣式時，不用像 Sketch 那樣深入到元件中去調(diào)整。還是用彈窗舉例，一起看看下圖。

信息分好類了，找信息的速度就自然快了，效率也上來了。

4.版本可追溯

所有版本可追溯，隨時用回第一稿！

Figma有自動保存文件的功能，如果 30 分鐘內(nèi)文件沒有被更改，則會自動保存為一個版本。 這意味著如果你在文件上連續(xù)工作 3 個小時然后停止編輯，則會在 30 分鐘不活動后創(chuàng)建一個版本。也可以通過快捷鍵Command + Option + S（Win：Ctrl + Alt + S）主動創(chuàng)建新版本。命名或保存版本時，還可以添加標(biāo)題和描述，當(dāng)你想找回第一稿時就更容易辨認(rèn)啦。      

二、團(tuán)隊協(xié)作

1.交付更準(zhǔn)

如果Sketch出了新功能，第三方軟件未同步更新就會引發(fā)像下面這個bug：設(shè)計稿上傳到xshow（類似藍(lán)湖）后，Icon色值顯示錯誤。左側(cè)是圖標(biāo)樣式，中間是Sketch的正確色值，右側(cè)是上傳到第三方軟件后的錯誤色值。

實際上這是由于Sketch新出了一個「色調(diào)」功能，可以在該圖層直接覆蓋一個新顏色。而xshow沒根據(jù)這新功能同步更新，導(dǎo)致交付給開發(fā)的時候顯示的還是原圖層色值。我還試過在Sketch等比拉伸組件后，雖然組件的外輪廓尺寸為整數(shù)，但在第三方軟件組件內(nèi)的元素會出現(xiàn)小數(shù)點，導(dǎo)致開發(fā)按照了錯誤的間距進(jìn)行開發(fā)。而Figma從做圖到交付都使用原軟件源文件就不會出現(xiàn)這個問題。

2.交付更快

省去了上傳第三方平臺或?qū)С鰰r間，所見即所得。

3.進(jìn)度同步

因為Figma文件都在云端，因此可以時刻查看設(shè)計進(jìn)度，打破信息差，對全局地控制項目進(jìn)度更方便了。

4.即時評論

在設(shè)計稿的任何地方與上游產(chǎn)品&下游開發(fā)通過評論反饋修改建議，甚至能在評論中 @其他人 或?qū)⒃u論標(biāo)記為已解決。

5.多人創(chuàng)作

支持多人共同創(chuàng)作。因為Figma基于web平臺開發(fā)，所以軟件可以自動更新，不會出現(xiàn)因為多人的軟件版本不同而無法協(xié)作的問題。多人同時異地、異時異地完成創(chuàng)作，不用來回傳送修改文件，是不是方便許多？

三、組件管理

1.組件數(shù)量更精簡

利用Figma樣式單獨控制的功能，不用再因顏色不同新增組件了！不用再因文本居中居左不同新增組件了！

變體組件的設(shè)計讓組件數(shù)量更少了！同樣是頭像組件，F(xiàn)igma的變體會使組件數(shù)量歸一，而Sketch則需要全部羅列展示出來。

2.樣式管理更便捷

第一點提到文本樣式分離出來單獨控制了，圖層樣式減少了，顏色投影圓角等樣式也是這個原理。選中圖層后右側(cè)會出現(xiàn)使用過的顏色，能直接批量管理，剔除不符合組件規(guī)范的色值，或讓斷鏈（即與組件庫失去鏈接）的組件批量重新鏈接，不容易遺漏。

3.組件庫一鍵迭代

組件庫經(jīng)常會根據(jù)業(yè)務(wù)需要而更新迭代，這時候?qū)嵗募趺锤M件庫同步迭代呢？Sketch需要挨個點開同步組件才能與最新組件庫保持一致，當(dāng)文件過多時，這個操作就變得極其繁瑣。Figma則通過一個開關(guān)控制，真正做到修改一處就能改變所有。而且更新后的變體功能，更加方便組件使用與迭代。

四、兼容考量

1.資產(chǎn)跟人

文件、插件、素材、字體統(tǒng)統(tǒng)都是跟著賬戶走，不用擔(dān)心臨時更換終端而花大量時間準(zhǔn)備這些材料。

文件不用占用本地內(nèi)存，團(tuán)隊內(nèi)也不用購買高額的共享網(wǎng)盤。網(wǎng)上也有非常多的插件介紹文章，這里就不展開了。倒是有個工具強烈安利給大家：一個插件可視化以方便查找和快速啟動的小工具！

官方解釋：Figma ex是使用在Figma里，使插件列表可視化的工具，并提供「自定義修改插件顯示順序」和「中文備注說明」等功能，簡直就是插件重度患者的福音！而且客戶端瀏覽器都支持，請看下圖。官網(wǎng)鏈接https://moonvy.com/FigmaEX/

素材則可以用插件「Concent Reel」管理，不同于Sketch需要從本地拉取頭像或昵稱文本素材，Concent Reel插件里包含著大量的在線素材可供挑選，包括姓名、電子郵件、公司名稱、網(wǎng)址、個人資料圖片等一系列內(nèi)容。當(dāng)然你也可以為團(tuán)隊上傳一些素材方便大家使用，這樣就可以保證我們的設(shè)計稿更加高保真，下圖也有一些推薦的素材大家可以收藏使用。

字體跟賬戶的門檻則稍微高點，需要Figma 企業(yè)版才可以，它允許組織中的用戶訪問和使用特定團(tuán)隊內(nèi)或整個組織內(nèi)的共享字體。也就是說，凡是我用過的字體，在其他電腦上都可以正確的顯示。

2.任意終端

Figma可以在任何系統(tǒng)中使用，因為它是基于瀏覽器的，不依賴做圖終端。Windows、iMac甚至手機(jī)iPad都能做圖，可謂全平臺制霸了。iPad做圖的話推薦下載Figurative軟件，它用瀏覽器封裝成了軟件，配合 Magic Keyboard、觸控板或鼠標(biāo)使用體驗極佳。而Sketch現(xiàn)在只能在macOS上使用，很多團(tuán)隊不得不為此購買了昂貴的蘋果辦公設(shè)備。

五、關(guān)于遷移

1.遷移成本大嗎

• 
  

• 學(xué)習(xí)成本：學(xué)習(xí)成本低，兩個軟件界面和快捷鍵很相似，安裝了漢化插件特別好上手。

• 資金：二人團(tuán)隊免費。

• 時間：Figma可直接導(dǎo)入Sketch文件，當(dāng)時我一個人熟悉軟件+導(dǎo)入所有視覺稿文件花了四個工作日完成。刨去導(dǎo)入稿子的時間，應(yīng)該一兩天就差不多了。

2.最佳遷移姿勢

• 
  

• 可直接導(dǎo)入的：文本、顏色、空狀態(tài)、占位圖、Icon等素材為主的，以及頭像、分隔線、圓角等僅規(guī)范尺寸檔位的都可以直接導(dǎo)入。這類組件基本沒有使用軟件的特性，所以對軟件依賴度很低。

• 導(dǎo)入后需要加上auto layout布局約束的：操作氣泡、action sheet、下拉篩選菜單等，需要在Figma中加入布局約束。這類組件往往有著大量重復(fù)的列表，有了Figma的布局約束，在實例中可以任意地新增或刪減列數(shù)，以適應(yīng)業(yè)務(wù)的個性化需要。

• 

建議做成變體的：按鈕、開關(guān)、彈窗等有多個類型/狀態(tài)/尺寸的組件。變體組件的核心是用來高效管理多狀態(tài)屬性的組件。像那種可以通過小元素的變化延展出很多個實例的，如果不集合成一個變體，容易造成組件的冗雜，查找費勁，操作也繁瑣。但我建議property變量控制在5個以內(nèi)，否則窮舉會使得變體非常龐大。

六、相關(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)載請注明出處。

Powered by Froala Editor