從 Sketch 遷移到 Figma 半年后：以為是個青銅結果是個王者？！

閱文體驗設計YUX – 梁捷 ：去年 10 月開始閱文海外設計從 Sketch 遷移到 Figma。如果你還不了解 Figma 或者在猶豫要不要切換到 Figma，這里會給你答案。

Figma介紹：以為是個青銅結果是個王者

Figma 是一款基于 Web 的在線設計工具，很多用戶包括筆者在內對于在線工具都會下意識地感覺性能差，功能弱，尤其是對于一款專業的生產力工具，這種不靠譜的感覺更為強烈。

然而實際體驗下來會發現 Figma 不僅功能完善，與 Sketch 相比別無二致。而且操作體驗上更是如絲般順滑，雖然是網頁應用，但 Figma 的編輯器是用 C++ 編寫，通過 emscripten 將 C++ 編譯為 JavaScript 的方式獲得更高效的代碼與內存控制，得以達到 60fps 的流暢度與 2x 于原生應用的性能。因此你完全可以放心大膽地去使用這款在線設計工具，體驗一番 Figma 獨特的魅力，從此告別被 Sketch 低下的性能支配的恐懼。

Figma與Sketch

既然是一款專業的設計工具，與 Sketch 同一賽道的競爭對手，那自然是避不開與 Sketch 的正面交鋒。

△ Sketch界面

△ Figma界面

Figma 與 Sketch 的布局與功能整體上非常相似，不過 Figma 異常簡潔的導航欄可能會讓人懷疑 Figma 的功能真的夠完善么？坦率地說 Figma 確實有一些基礎功能缺失，比如 Figma 的 Scale 只能手動拖拽目標縮放，不能像 Sketch 一樣設定數值進行縮放。但是相比那些無關痛癢的低頻功能，Figma 沒有 Sketch 的插件功能以及豐富的插件生態也許更讓人遺憾。今年6月12日，Figma 官方宣布開始插件功能內測，結合 Figma API 不知道會擦出什么樣的火花，非常讓人期待。

1. 比Sketch弱？不存在的

事實上以上功能缺失完全不會影響到日常的設計工作，反而 Figma 所擁有的以下功能讓 Figma 在整體的體驗上趕超 Sketch 數個身位：

• 多人協作
• 評論
• 觀察者模式
• 版本控制
• 標注（Developer Handoff）
• 團隊組件庫與樣式
• 自動保存
• 全平臺制霸
• 智能布局（Smart Selection）

1～8 項功能均得益于 Figma 在線的特性，讓更直接更高效的多人協作模式成為可能，多位設計師可以在一個設計文件內同時進行編輯操作，添加評論進行溝通。而且一個鏈接就可以讓所有人在任何平臺上直接訪問到設計文件，發送給需求方 Figma 就是你們討論交流的白板，發送給開發 Figma 就是在線的標注工具。

而 Smart Selection 則是筆者最喜歡的功能之一。Smart Selection 主要是用來批量操作矩陣，幫助設計師一步到位調整布局，省去拖拽、調間距等繁瑣的操作。

△ 通過Smart Selection快速操作列表間距與排序｜圖片來自Figma Twitter

類似的功能最早出現在 Adobe XD 上，后來 Framer X 也增加了自己 Stack，實現了 CSS 的 Flex 布局一樣的效果，Figma 也在去年 10 月左右跟進上線了 Smart Selection，并且經過三個月的迭代從原本只能單獨控制行或者列，進化到可以控制矩陣。

△ 通過Smart Select快速布局內容｜圖片來自Figma Twitter

2. 為創造高效生產環境而生的Figma

毫不夸張的說設計師的日常工作只有 20% 的時間在發揮創意解決問題，80% 的時間都在重復一些機械操作改顏色、改間距、改排列、改命名等等，最后還要整理文件同步文件，這些都讓整個設計工作冗余、低效還無趣。

Sketch 每個版本更新后除了更卡、bug 頻出、插件又沒法用、舊版又沒法打開新版文件之外，幾乎看不到其主動為設計師創造更高效的生產環境而作出的努力。即便是最近上線的 55 增加的 Smart Distribute 與 Create new layers from SVG code，還是 56 將會上線的 Team Collaborate 提升生產力的功能都是非常被動的從 Figma 抄襲搬運，雖然這些功能在 Figma 上已經上線了半年甚至一年之久。

相比不思進取的 Sketch，Sketch 的插件們為了提升設計效率倒是異常的用力，可惜的是優秀的插件卻越來越少，從 Measure、Paddy 的退出可以瞥見 Sketch 的插件生態已經大不如前。

對比 Sketch，在越發深入的使用 Figma 后，越會發現 Figma 是一款更為先進、更理解設計師工作方式和需求的界面設計工具，除了剛才列舉的數個提升生產體驗的功能，還包含著大量細節，如矢量網格、批量組件化，快速復用屬性，鏈接 Google Fonts 等等，都在幫助設計師從低效的泥沼中解放出來。不僅如此，Figma 讓設計師無需再考慮操作系統，也不需要管理插件、存儲，也不需要管同步和協同的問題，設計師唯一要考慮的是設計本身，就像他們自己說的「讓設計師專注于設計，其他的都見鬼去吧?！?/p>

之前在推特上看到 Eddie 發的一條推「If design tools were cars…」

△ Eddie Lobanovskiy @lobanovskiy：If design tools were cars… 圖片來自Eddie‘s ****Twitter

應該說總結的非常準確，Sketch 像豐田的凱美瑞，有廣大群眾基礎的老牌廠商的經典車型，而 Figma 則像 Tesla 一樣性能卓越，超越時代充滿未來感。那未來屬于誰？反正不會是凱美瑞。

封閉與開放

Figma 被運用到海外項目 Webnovel 帶來的最顯而易見的變化是我們不再使用 Sketch、Mesaure、Dropbox、Svn，白板，因為 Figma 本身整合了以上所有功能，省去了在不同工具之間切換，為我們節約了不少時間與精力，而且這樣的整合不只是 1 + 1 + 1 + 1 的功能疊加而已，其中有著奇妙的化學反應，從根本上改變我們的工作模式。

1. 設計孤島

設計長久以來都像是一座封閉的孤島，不僅與上下游的連接困難，甚至設計內部的連接效率都極低。

關于前者，設計師交付給需求方的是一張導出的效果圖，交付給開發的是標注與切圖。設計文件因為專業設計工具的限制或者是共享的問題，項目的上下游基本無法直接訪問，這導致了每次設計師的輸出都需要經歷好幾個步驟，而設計又會因為各種問題頻繁發生修改，輸出設計資源傳遞給上下游的低效鏈接方式損耗了設計師大量時間。更深入的說設計過程對上下游的不透明也需要對低效負責。

而關于后者，連接設計師進行協作更是噩夢，暫且不提設計文件在項目內的同步共享遇到的諸多問題，多位設計師在一個項目內協作只能單線程處理各自的需求，如果需要多位設計師同時合作完成一個需求，必然需要付出更高的溝通成本以對齊設計師之間的想法與設計效果。

2. 協作的全新可能

Figma 的到來則打破了設計孤島的封閉格局，連接設計與上下游僅僅只需要一個鏈接，原本只能藏匿于設計師之間的 dropbox 共享文件夾的設計文件，現在項目中的所有成員都可以無障礙訪問，無論是交互稿還是視覺稿、組件系統、設計規范。

△ 分享Figma文件只需要復制鏈接即可，項目內的成員則可以直接查看

對于設計師來說，透明開放的設計文化可以讓項目成員更了解設計的工作與思考方式，減少與其他項目節點因信息不對等造成的不必要摩擦。對于項目來說，產品、開發以及合作的設計師都可以看到一個需求是如何演化為設計稿的過程，參與者可以更早的提出想法與設計師交流，在充分的溝通下完成的設計可以有效避免完成后的反復修改。

剛才還提到了設計師之間的協作問題，現在我們每個版本的迭代都是由兩到三位設計師在一個 Figma 文件內按需求分 Page 一起完成。不僅如此，Figma 的在線協作的特性還給了設計師之間的協作一個全新的可能，我們嘗試了更緊密的協作設計模式，在一個子需求下再拆分子任務，比如上個版本中我們將段評需求分為頁面框架與評論組件兩個子任務，在同一個 Page 內一位設計師搭建頁面框架，另一位設計師同步進行評論組件設計，多線程并行的模式讓合作的設計師既能專注于各自的任務，又能輕松把控整體的設計效果，朝著一個目標快速前進。

也許這就是傳說中的「結對設計」吧。

Figma組件化實踐

筆者所在的海外項目的產品 Webnovel 長久來沒有統一的設計規范與組件系統，再經手多位設計師，經過多個版本的迭代之后，小到顏色、字體等基礎屬性，大到頁面模塊的新舊樣式冗余混亂。所以趁海外項目遷移到 Figma 的契機，二月份開始著手 UI 組件庫的設計與搭建。

組件的設計基本遵循原子化設計理念，從最基礎的顏色、字體、字號等 Principle 元素開始，將相關元素放到我們的組件庫文件的「Token」頁統一管理。

△ Webnovel Token

Figma 的 Style 功能可以用來管理所有你需要在項目進行復用的樣式，而且 Style 可以像 Component 一樣在整個項目內共享。借助該功能將 Token 中的顏色屬性、字體樣式、陰影樣式、分割線樣式、柵格系統分別加入 Style，發布 Style 后項目中的所有文件都可以快速訪問并使用這些共享的屬性或樣式。另外如果共享的 Style 發生更改，可以無縫更新到所有項目文件中。

△ Style功能演示

而 Figma 的 Component 功能與 Sketch 的 Symbol 類似，通過創建組件來復用界面中的模塊與元素，不同的是 Master 組件復制生成的 Instance 可以修改除了位置和尺寸以外的所有屬性，結合 Style 能快速實現樣式替換。

△ Component結合Style功能演示

其實在 Figma 官方在二月底發了一篇關于組件化最佳實踐的博文給了筆者非常大的啟發，雖然當時組件庫文件已經初具規模，但是還是毅然拆分并重新組織了組件庫，因為筆者原本繼續沿用了之前在 Sketch 上組件的設計與管理方式，完全沒有發揮 Figma 本身的一些特性來提高組件建設效率。

當時的重建組件庫的改動主要包含兩點：拆分組件庫和重新組織組件。

1. 拆分組件庫

將原本包含屬性樣式、圖標、基礎組件、業務組件等一個龐大的組件庫文件按類拆分為幾個獨立的組件文件，一方面 Figma 通過 Team Library 共享組件非常便捷，即使拆分文件也不會帶來任何額外的負擔，反而更加方便后續的拓展，另一方面分類后的組件庫各司其職更加清晰明了。

△ 將組件和樣式拆分到不同的文件中

2. 重新組織組件

Figma 可使用 Page 以及 Frame/Group 的方式將組件歸類，意味著我們不再需要像 Sketch 那樣使用「/」通過修改命名這種繁瑣的方式組織組件（當然 Figma 也支持「/」分類，不過你不會去用它的）。

△ 使用Page與Frame組織組件庫

因此我們可以將 Page 作為組件的大類，如 Buttons，以 Frame 來劃分 Buttons 的類型，最后 Buttons 只需要以狀態/子類型命名即可。優化后的組織形式方便任何人瀏覽，而且也更符合直覺，回憶一下 Ant Design、Material Design 等規范類的網站界面的布局，是不是非常接近？

△ 左側Figma上Webnovel組件庫，右側Material design網頁

除此之外，其實組件本身也做了部分優化，比如對組件與樣式添加描述信息；通過實例化 Principle 元素引入更細的粒度讓組件更加靈活；在使用約束的基礎上加入柵格提升組件自適應效果，但還是處于探索階段，這里筆者不再贅述，希望以后有機會再分享。

組件庫設計的核心訴求是方便你的用戶（項目中的設計師、開發以及其他任何需要組件庫的人員）快速查找、理解和使用。把它當作一款產品去對待，做好組件本身只是產品體驗的一個環節，去思考更有效率的形式，嘗試接入新技術，時刻傾聽用戶的反饋才能把這款產品打磨得更優秀。

缺點以及Figma值得使用嗎？

作為一款在線的設計工具，Figma 的缺點也是非常顯而易見，受限于網絡環境，如果網絡狀態不佳訪問設計文件都非常困難，此外對于國內多數團隊來說，將文件完全存放在別人的服務器上幾乎是無法接受的事實。

那 Figma 值得使用嗎？

1. 對于設計師個人

答案是非常值得體驗一番，設計師應該是一群對新趨勢新事物新技術保持好奇心的人類，一個工具往往誕生于用戶需求與現實產品能力的鴻溝之間，如果它誕生之后還得到了發展、受到眾人追捧那必然還順應時代趨勢，甚至影響趨勢，如當年扁平化趨勢下 Ps 與 Sketch 之爭，假如沒有扁平化大家還會選擇 Sketch 嗎？假如沒有 Sketch 扁平化會這么快推翻擬物化嗎？扁平化后迎來了動效的興起，各種動效軟件群魔亂舞也是同樣的道理。體驗一下 Figma 就可以發現當下我們的協作方式還會有新的可能，當然還有更多的有趣好玩的細節等你去發現。另外值得一提的是，Figma 個人使用完全免費。

2. 對于設計團隊

對于絕大部分的大公司團隊來說不值得，原因是推動設計工具更替困難重重，首先網絡和存儲就是硬傷，特別是存儲問題在很多大公司完全無法跨越。其次設計資源、生產環境的遷移也是問題（Figma 支持導入 Sketch 文件），還有團隊使用 Figma 至少 $144/人/年的支出，比 Sketch 貴了不少。Figma 相比 Sketch 雖然更優秀，但并不是革命性的產品。

對于小型團隊基本上是更友好的。

最后如果想上手 Figma，可以先瀏覽他們在 Youtube 上的官方基礎視頻介紹，快速刷一遍就可以開始了。

歡迎關注作者的微信公眾號：「閱文體驗設計YUX」