“ 2017 年 11 月的某個週六，筆者去參加 sketch meetup 的線下活動，雖然對那次活動分享的嘉賓和內容已完全忘卻，但是唯獨一點至今仍記憶猶新，有位嘉賓的分享是 Figma 的介紹，在 Q&A 環節上，觀眾問，你為什麼選擇換 Figma？感覺比起 Sketch 並沒有那麼大的吸引力，嘉賓答，因為當時我的 Sketch 到期了 : ) 臺下立馬一片歡笑。
”現在回想起來當時的情景還是會感覺很有趣，一方面是嘉賓如此耿直幽默，另一方面則是筆者當時也抱著「Figma 相比 Sketch 沒有那麼大吸引力」的想法一笑了之，直到一年後上手體驗了這款設計工具，（摸著被打紅的臉）感慨真真真真香。趕上那時 Sketch 52 上線，不僅上線了全新的界面與黑夜模式，還順手增加了內存洩漏，「修復」了過於流暢的 bug，在筆者被卡的生活不能自理後毫不猶豫放棄 Sketch，投入 Figma 的懷抱。
至此，閱文海外項目Webnovel 遷移到 Figma 半年多時間，想和大家分享這款令人驚歎卻又相對冷門的設計工具在項目實踐中一些些經驗，本文主要分為：
- Figma 介紹：以為是個青銅結果是個王者
- Figma 與 Sketch
- 封閉與開放
- Figma 組件化實踐
- 缺點以及 Figma 值得使用嗎？
Figma 介紹：以為是個青銅結果是個王者
說了那麼久還沒有正式介紹 Figma，這是一款基於 Web 的在線設計工具，很多用戶包括筆者在內對於在線工具下意識的會有性能差，功能弱的感覺，尤其是對於一款專業的生產力工具這種不靠譜的感覺更為強烈。
然而實際體驗下來會發現 Figma 不僅功能完善，與 Sketch 相比別無二致；而且操作體驗上更是如絲般順滑，雖然是網頁應用，但 Figma 的編輯器是用 C++ 編寫，通過 emscripten 將 C++ 編譯為 JavaScript 的方式獲得更高效的代碼與內存控制，得以達到 60fps 的流暢度與 2x 於原生應用的性能。因此你完全可以放心大膽的去使用這款在線設計工具，體驗一番 Figma 獨特的魅力，從此告別被 Sketch 低下的性能支配的恐懼。
那一天，設計師終於回想起曾經一度被 Sketch 支配的恐懼，還有封閉於設計孤島中的那份屈辱
Figma 與 Sketch
既然是一款專業的設計工具，與 Sketch 同一賽道的競爭對手，那自然是避不開與 Sketch 的正面交鋒。
Sketch 界面
Figma 界面
Figma 與 Sketch 的佈局與功能整體上非常相似，不過 Figma 異常簡潔的導航欄可能會讓人懷疑 Figma 的功能真的夠完善麼？坦率的說 Figma 確實有一些基礎功能缺失，比如 Figma 的 Scale 只能手動拖拽目標縮放，不能像 Sketch 一樣設定數值進行縮放。19年 6 月 12 日，Figma 官方宣佈開始插件功能內測，結合 Figma API 不知道會擦出什麼樣的火花，非常讓人期待。
比 Sketch 弱？不存在的
事實上以上功能缺失完全不會影響到日常的設計工作，反而 Figma 所擁有的以下功能讓 Figma 在整體的體驗上趕超 Sketch 數個身位：
1. 多人協作
2. 評論
3. 觀察者模式
4. 版本控制
5. 標註（Developer Handoff）
6. 團隊組件庫與樣式
7. 自動保存
8. 全平臺制霸
9. 智能佈局（Smart Selection）
1～8 項功能均得益於 Figma 在線的特性，讓更直接更高效的多人協作模式成為可能，多位設計師可以在一個設計文件內同時進行編輯操作，添加評論進行溝通。而且一個鏈接就可以讓所有人在任何平臺上直接訪問到設計文件，發送給需求方 Figma 就是你們討論交流的白板，發送給開發 Figma 就是在線的標註工具。
而 Smart Selection 則是筆者最喜歡的功能之一，可以拿來下象棋（大霧）
雙人象棋 Play / 象棋設計來自 @超能銅草帽
還能玩華容道、拼圖什麼的。以上是開玩笑的，Smart Selection 主要是用來批量操作矩陣，幫助設計師一步到位調整佈局，省去拖拽、調間距等繁瑣的操作。
通過 Smart Selection 快速操作列表間距與排序 / 圖片來自 Figma Twitter
類似的功能最早出現在 Adobe XD 上，後來 Framer X 也增加了自己 Stack，實現了 CSS 的 Flex 佈局一樣的效果，Figma 也在去年 10 月左右跟進上線了 Smart Selection，並且經過三個月的迭代從原本的只能單獨控制行或者列，進化到可以控制矩陣。
通過 Smart Select 快速佈局內容 / 圖片來自 Figma Twitter
為創造高效生產環境而生的 Figma
毫不誇張的說設計師的日常工作只有 20 %的時間在發揮創意解決問題，80% 的時間都在重複一些機械操作改顏色、改間距、改排列、改命名改改改改改，保存修改保存修改保存修改保存，最後還要整理文件同步文件，這些都讓整個設計工作冗餘、低效還無趣。
不知道 Bohemian Coding （Sketch 母公司）到底是傲慢還是無能才對此視而不見，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 讓設計師無需再考慮操作系統，也不需要管理插件、存儲，也不需要管同步和協同的問題，設計師唯一要考慮的是設計本身，就像他們自己說的「讓設計師專注於設計，其他的都見鬼去吧。」
之前在推特上看到 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 的功能疊加而已，其中有著奇妙的化學反應，從根本上改變我們的工作模式。
設計孤島
設計長久以來都像是一座封閉的孤島，不僅與上下游的連接困難，甚至設計內部的連接效率都極低。
關於前者，設計師交付給需求方的是一張導出的效果圖，交付給開發的是標註與切圖。設計文件因為專業設計工具的限制或者是共享的問題，項目的上下游基本無法直接訪問，這導致了每次設計師的輸出都需要經歷好幾個步驟，而設計又會因為各種問題頻繁發生修改，輸出設計資源傳遞給上下游的低效鏈接方式損耗了設計師大量時間。更深入的說設計過程對上下游的不透明也需要對低效負責。
而關於後者，連接設計師進行協作更是噩夢，暫且不提設計文件在項目內的同步共享遇到的諸多問題，多位設計師在一個項目內協作只能單線程處理各自的需求，如果需要多位設計師同時合作完成一個需求？必然需要付出更高的溝通成本以對齊設計師之間的想法與設計效果。
協作的全新可能
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 本身的一些特性來提高組件建設效率。
當時的重建組件庫的改動主要包含兩點：
拆分組件庫
將原本包含屬性樣式、圖標、基礎組件、業務組件等一個龐大的組件庫文件按類拆分為幾個獨立的組件文件，一方面 Figma 通過 Team Library 共享組件非常便捷，即使拆分文件也不會帶來任何額外的負擔，反而更加方便後續的拓展，另一方面分類後的組件庫各司其職更加清晰明瞭。
將組件和樣式拆分到不同到文件中
重新組織組件
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 值得使用嗎？
對於設計師個人
答案是非常值得體驗一番，設計師應該是一群對新趨勢新事物新技術保持好奇心的物種，一個工具往往誕生於用戶需求與現實產品能力的鴻溝之間，如果它誕生之後還得到了發展、受到眾人追捧那必然還順應時代趨勢，甚至影響趨勢，如當年扁平化趨勢下 Ps 與 Sketch 之爭，假如沒有扁平化大家還會選擇 Sketch 嗎？假如沒有 Sketch 扁平化會這麼快推翻擬物化嗎？扁平化後迎來了動效的興起，各種動效軟件群魔亂舞也是同樣的道理。體驗一下 Figma 就可以發現當下我們的協作方式還會有新的可能，當然還有更多的有趣好玩的細節等你去發現。另外值得一提的是，Figma 個人使用完全免費！
對於設計團隊
對於絕大部分大公司團隊不值得，原因是推動設計工具更替困難重重，首先網絡和存儲就是硬傷，特別是存儲問題在很多大公司完全無法跨越。其次設計資源、生產環境的遷移也是問題（Figma 支持導入 Sketch 文件），還有團隊使用 Figma 至少 $144 / 人 / 年的支出，比 Sketch 貴了不少。Figma 相比 Sketch 雖然更優秀，但並不是革命性的產品，即使效率提高了，心情愉悅了，該修的福報還是要修的。
不過如果老大出面自上而下推進，或者是在像我們 YUX 這樣開放包容的團隊中推動那就是另一番情景 : p
對於小型團隊那基本上用就是了。
最後如果想上手 Figma，可以先瀏覽他們在 Youtube 上的官方基礎視頻介紹，快速刷一遍就可以開始。
end
閱讀更多 PMTalk產品經理社區 的文章
