讓你的 Figma 更好用的秘密

Sponsor

Figma作為全平臺的UI設計工具，以其特殊的云特性和舒適的用戶體驗迅速攬獲一大票設計師擁躉。對于PC用戶而言，是一件好使稱手的利器。然而再強大的工具也不可能滿足所有用戶的需求，而且全面意味著臃腫。因此，插件系統成為創意軟件不可或缺的存在，Figma在引入插件之后，可以說是完全體的設計工具，擁有不亞于Sketch的競爭力。

當然，工具的選擇與否與團隊的工作流密切相關。大家可以在個人時間里嘗試一下Figma，說不定你會被圈粉哦。

前言：Figma 的插件功能自 6 月初開始內測，到 8 月初正式上線以來，截止目前（2019.11.05）線上共有 268 款各種功能與特色的插件，可以幫助設計師快速完成填充數據、創建元素、整理圖層、檢查可用性等工作，進一步提升設計生產效率。補充上最后一塊拼圖——插件生態的 Figma 終于是擁有了完全形態的設計工具，面對競爭對手 Sketch 完全可以與之一戰。

插件功能正式上線三個多月以來，Figma 上目前發布的插件所覆蓋的功能與類型，與 Sketch 已經別無二致，基于 Sketch 的日常工作流中需要用到的插件在 Figma 中基本都能找到替代品。

不僅如此，讓人更興奮的是 Figma 基于 Web 技術的天然優勢和其更加強大的 API，幫助 Figma 插件在一些方面更有想象力空間，比如你可以在 Figma 上利用插件直接聽歌單 (Deep Focus) ，也可以玩游戲 (Multiplayer Pong) (大霧)?檢查頁面元素與樣式是否符合設計規范、是否達到 WCAG 標準，也可以創建 3D 元素，甚至直接設計、演示動效也不在話下。

Multiplayer Pong

經過筆者這幾個月對插件的使用與探索，有幾款插件已經是日常工作流中提升效率不可或缺的一部分，這篇文章也想和大家分享一下這些插件。

安裝與使用插件??

在分享插件之前，先簡單介紹下插件的安裝與使用，插件的入口「Plugins」位于首頁的左上方，用戶可以在該頁面瀏覽、搜索所有插件。相比 Sketch 那種傳統的安裝與更新插件的方式，你只需要鼠標輕輕點擊下「Install」，插件立馬安裝完成可以上手使用，而且插件的更新也是毫無感知。

在插件的體驗上，Figma 依舊秉承其一貫的風格，設計師唯一需要關注的只有設計本身，其他的像版本迭代，插件管理、文件存儲、同步、協同的問題都無需再投入任何精力。

使用 Figma 的插件的方法與 Sketch 類似，主要有三種：

從系統的頂部的菜單欄上的「Plugins」入口選擇插件

在文件內右鍵呼出菜單，從「Plugins」入口選擇插件

快捷鍵?? / 呼出搜索，輸入插件名（敲黑板劃重點）

吃我插件安利??

一、文件管理類

Time Machine

Time Machine 可以幫助設計師一鍵將設計稿自動復制一份收納到在一個 Page 里，并按日期與時間排列。這款插件已經是筆者目前最高頻使用的插件，因為日常的工作流中設計方案的探索、推導、收斂到最后的落地，會產生數量可觀的廢稿。以往筆者都要手動創建一個名為「??Archive」的 Page，然后將廢稿手動丟進去，現在只需要 ? / 然后輸入「tim」再一個回車一氣呵成。

Time Machine

Clean document

Clean document 可以幫助設計師自動「打掃」選中的設計文件，清理隱藏的圖層，解除只有單個圖層的組，重命名圖層，還可以根據元素的位置對圖層重新排序。

Clean document

每次設計稿最終完成后，雜亂的圖層和編組簡直是一片兵荒馬亂，無論是對設計師本人還是一起協作的設計師與開發簡直噩夢，不過現在一鍵就能搞定，居家旅行加班搬磚必備神器。

設計師頭疼的 4 種原因

二、圖形資源類

Autoflow

Autoflow 可以讓設計師直接選中兩個元素后自動畫上流程線，省去了畫流程圖過程中標注箭頭的繁瑣工作。

Autoflow

Iconify

Iconify 內有 50 個圖標庫，包含超過 40,000 個圖標。如果要找個圖標直接搜索然后「add icon 」即可，用 iconify 來處理搭原型階段的圖標需求再好不過，也省去了打開 iconfont 網頁找圖標的麻煩事。

iconify

Gifs

Gifs 可以讓設計師直接搜索并插入來自 GIPHY 的動圖。不過這款插件在平時的工作中用的還是很少，但是用 Figma 做 PPT 就非常適合配合這款插件食用，美滋滋。

Gifs

Vectary 3D

Vectary 3D 可以將 3D 元素插入 Figma 中，更有趣的在于你能將的設計稿置入預設的可交互的 3D mockup 后導出圖片到 Figma 中，從此包裝設計稿不用愁找不到適合的 mockup 了，自己動手豐衣足食。

Vectary?3D

另外值得一提的是 Vectary 3D 這款插件背后的產品，是一款與其同名的基于瀏覽器的在線 3D 設計工具。

Vectary 3D 界面

三、無障礙類

A11y 系列

A11y 既 Accessibility，隨著無障礙設計得到越來越多關注，這類插件也終于開始出現，讓我們可以更有效的優化產品設計，讓更多用戶享受更友好的體驗。

A11y 系列由 Microsoft 出品，包含兩款插件：

Color Contrast Checker

用來檢查設計稿內文本對比度是否遵守 WCAG（Web Content Accessibility Guidelines）標準，以保證用戶的可以無障礙閱讀文本內容。Color Contrast Checker 的使用非常方便，喚起插件，選中需要檢測的界面，點擊 「Check」即可。

Color Contrast Checker

不過這款插件也存在偶爾失效的問題，筆者還沒發現其規律和玄學。色彩對比度檢測的插件除此之外還有三款，其中 Contrast 是筆者體驗下來是其中比較不錯的一款，如果沒有對整個頁面內所有文本自動檢測的需求，Contrast 會更適合使用。

Contrast

Focus Orderer

Focus Orderer 幫助設計師標記并測試焦點狀態 (Focused)的流程和體驗是否合理，一般在網頁設計中使用。

Focus Orderer

其實筆者之前還未見過類似 Focus Order 的插件或工具，希望未來能有更多解決或輔助無障礙設計的工具出現，一方面讓我們的設計產出更容易向無障礙標準對齊，另一方面也會影響行業內的設計師更多的關注無障礙設計領域

Color Blind

上面提到的 Color Contrast Checker 可以檢測文本的對比度，而 Color Blind 則可以將設計稿自動轉成 8 種不同類型的色盲效果，借此我們可以進入色盲用戶的視角審視我們的設計是否合理。

Color Blind

三、設計系統類

Roller · Design Linter · Toybox

Roller 是一款樣式自動檢查工具，通過添加或導入 styles 后，可以以此為基準校驗文件內使用的顏色、字體樣式、陰影、圓角大小是否符合設計規范，以保證設計產出完全對齊規范。不過 Roller 有個很大的問題，其本身不支持 rgba，希望后續會有優化。

Roller

Roller 好像是目前市面上 (不包括某些大廠的內部工具) 出現的第二款設計校驗工具 (筆者已知的第一款是 sketch-lint )，雖然類似概念的工具在開發那很早就存在，但我們還在用最原始的人肉方式處理樣式不規范的問題，從 components 到 design lint ，設計的工程化還要走好長一段路。

Chroma colors

Chroma colors 可以通過選中多個對象快速創建 Color styles，省去了為每個顏色手動創建 style 的重復勞動，在搭建組件庫初期幫助很大。

Chroma colors

以上推薦的插件均為筆者日常工作會用到的一些功能和體驗不錯的插件，其實還有很多優秀的插件可以推薦，比如官方人員出品的 Themer，可以一鍵切換主題；自動生成視覺焦點圖的 VisualEyes；還有 Product plane、Wireframe、Graphviz 將圖表、流程圖全部搬運到 Figma 中，實現排期、文檔、設計 all in Figma。限于篇幅有限，而且新插件上線頻繁，只能介紹這么多。

最后在復習下重點，快捷鍵 ? / 呼出搜索，輸入插件名，開始愉快的使用插件吧。

作者：閱文體驗設計YUX，個人主頁：https://www.zcool.com.cn/u/18178178

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。