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

Figma介紹：以為是個(gè)青銅結(jié)果是個(gè)王者

Figma 是一款基于 Web 的在線設(shè)計(jì)工具，很多用戶包括筆者在內(nèi)對(duì)于在線工具都會(huì)下意識(shí)地感覺性能差，功能弱，尤其是對(duì)于一款專業(yè)的生產(chǎn)力工具，這種不靠譜的感覺更為強(qiáng)烈。

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

Figma與Sketch

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

△ Sketch界面

△ Figma界面

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

1. 比Sketch弱？不存在的

事實(shí)上以上功能缺失完全不會(huì)影響到日常的設(shè)計(jì)工作，反而 Figma 所擁有的以下功能讓 Figma 在整體的體驗(yàn)上趕超 Sketch 數(shù)個(gè)身位：

• 多人協(xié)作
• 評(píng)論
• 觀察者模式
• 版本控制
• 標(biāo)注（Developer Handoff）
• 團(tuán)隊(duì)組件庫與樣式
• 自動(dòng)保存
• 全平臺(tái)制霸
• 智能布局（Smart Selection）

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

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

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

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

△ 通過Smart Select快速布局內(nèi)容｜圖片來自Figma Twitter

2. 為創(chuàng)造高效生產(chǎn)環(huán)境而生的Figma

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

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

相比不思進(jìn)取的 Sketch，Sketch 的插件們?yōu)榱颂嵘O(shè)計(jì)效率倒是異常的用力，可惜的是優(yōu)秀的插件卻越來越少，從 Measure、Paddy 的退出可以瞥見 Sketch 的插件生態(tài)已經(jīng)大不如前。

對(duì)比 Sketch，在越發(fā)深入的使用 Figma 后，越會(huì)發(fā)現(xiàn) Figma 是一款更為先進(jìn)、更理解設(shè)計(jì)師工作方式和需求的界面設(shè)計(jì)工具，除了剛才列舉的數(shù)個(gè)提升生產(chǎn)體驗(yàn)的功能，還包含著大量細(xì)節(jié)，如矢量網(wǎng)格、批量組件化，快速復(fù)用屬性，鏈接 Google Fonts 等等，都在幫助設(shè)計(jì)師從低效的泥沼中解放出來。不僅如此，F(xiàn)igma 讓設(shè)計(jì)師無需再考慮操作系統(tǒng)，也不需要管理插件、存儲(chǔ)，也不需要管同步和協(xié)同的問題，設(shè)計(jì)師唯一要考慮的是設(shè)計(jì)本身，就像他們自己說的「讓設(shè)計(jì)師專注于設(shè)計(jì)，其他的都見鬼去吧。」

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

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

應(yīng)該說總結(jié)的非常準(zhǔn)確，Sketch 像豐田的凱美瑞，有廣大群眾基礎(chǔ)的老牌廠商的經(jīng)典車型，而 Figma 則像 Tesla 一樣性能卓越，超越時(shí)代充滿未來感。那未來屬于誰？反正不會(huì)是凱美瑞。

封閉與開放

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

1. 設(shè)計(jì)孤島

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

關(guān)于前者，設(shè)計(jì)師交付給需求方的是一張導(dǎo)出的效果圖，交付給開發(fā)的是標(biāo)注與切圖。設(shè)計(jì)文件因?yàn)閷I(yè)設(shè)計(jì)工具的限制或者是共享的問題，項(xiàng)目的上下游基本無法直接訪問，這導(dǎo)致了每次設(shè)計(jì)師的輸出都需要經(jīng)歷好幾個(gè)步驟，而設(shè)計(jì)又會(huì)因?yàn)楦鞣N問題頻繁發(fā)生修改，輸出設(shè)計(jì)資源傳遞給上下游的低效鏈接方式損耗了設(shè)計(jì)師大量時(shí)間。更深入的說設(shè)計(jì)過程對(duì)上下游的不透明也需要對(duì)低效負(fù)責(zé)。

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

2. 協(xié)作的全新可能

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

△ 分享Figma文件只需要復(fù)制鏈接即可，項(xiàng)目內(nèi)的成員則可以直接查看

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

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

也許這就是傳說中的「結(jié)對(duì)設(shè)計(jì)」吧。

Figma組件化實(shí)踐

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

組件的設(shè)計(jì)基本遵循原子化設(shè)計(jì)理念，從最基礎(chǔ)的顏色、字體、字號(hào)等 Principle 元素開始，將相關(guān)元素放到我們的組件庫文件的「Token」頁統(tǒng)一管理。

△ Webnovel Token

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

△ Style功能演示

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

△ Component結(jié)合Style功能演示

其實(shí)在 Figma 官方在二月底發(fā)了一篇關(guān)于組件化最佳實(shí)踐的博文給了筆者非常大的啟發(fā)，雖然當(dāng)時(shí)組件庫文件已經(jīng)初具規(guī)模，但是還是毅然拆分并重新組織了組件庫，因?yàn)楣P者原本繼續(xù)沿用了之前在 Sketch 上組件的設(shè)計(jì)與管理方式，完全沒有發(fā)揮 Figma 本身的一些特性來提高組件建設(shè)效率。

當(dāng)時(shí)的重建組件庫的改動(dòng)主要包含兩點(diǎn)：拆分組件庫和重新組織組件。

1. 拆分組件庫

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

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

2. 重新組織組件

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

△ 使用Page與Frame組織組件庫

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

△ 左側(cè)Figma上Webnovel組件庫，右側(cè)Material design網(wǎng)頁

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

組件庫設(shè)計(jì)的核心訴求是方便你的用戶（項(xiàng)目中的設(shè)計(jì)師、開發(fā)以及其他任何需要組件庫的人員）快速查找、理解和使用。把它當(dāng)作一款產(chǎn)品去對(duì)待，做好組件本身只是產(chǎn)品體驗(yàn)的一個(gè)環(huán)節(jié)，去思考更有效率的形式，嘗試接入新技術(shù)，時(shí)刻傾聽用戶的反饋才能把這款產(chǎn)品打磨得更優(yōu)秀。

缺點(diǎn)以及Figma值得使用嗎？

作為一款在線的設(shè)計(jì)工具，F(xiàn)igma 的缺點(diǎn)也是非常顯而易見，受限于網(wǎng)絡(luò)環(huán)境，如果網(wǎng)絡(luò)狀態(tài)不佳訪問設(shè)計(jì)文件都非常困難，此外對(duì)于國內(nèi)多數(shù)團(tuán)隊(duì)來說，將文件完全存放在別人的服務(wù)器上幾乎是無法接受的事實(shí)。

那 Figma 值得使用嗎？

1. 對(duì)于設(shè)計(jì)師個(gè)人

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

2. 對(duì)于設(shè)計(jì)團(tuán)隊(duì)

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

對(duì)于小型團(tuán)隊(duì)基本上是更友好的。

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

歡迎關(guān)注作者的微信公眾號(hào)：「閱文體驗(yàn)設(shè)計(jì)YUX」