Figma 的插件功能自 6 月初開始內(nèi)測，到 8 月初正式上線以來，截止目前線上共有 268 款眾多功能與特色的插件，可以幫助設(shè)計師快速完成填充數(shù)據(jù)、創(chuàng)建元素、整理圖層、檢查可用性等工作，進(jìn)一步提升設(shè)計生產(chǎn)效率。補(bǔ)充上最后一塊拼圖 ── 插件生態(tài)的 Figma 終于是擁有了完整形態(tài)的設(shè)計工具，面對競爭對手 Sketch 完全可以與之一戰(zhàn)。

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

不僅如此，讓人更興奮的是 Figma 基于 Web 技術(shù)的天然優(yōu)勢和其更加強(qiáng)大的 API，幫助 Figma 插件在一些方面更有想象空間。比如你可以在 Figma 上利用插件直接聽歌單（Deep Focus），也可以玩游戲（Multiplayer Pong）檢查頁面元素與樣式是否符合設(shè)計規(guī)范、是否達(dá)到 WCAG 標(biāo)準(zhǔn)，也可以創(chuàng)建 3D 元素，甚至直接設(shè)計、演示動效也不在話下。

△ Multiplayer Pong

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

安裝與使用插件

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

在插件的體驗上，F(xiàn)igma 依舊秉承其一貫的風(fēng)格，設(shè)計師唯一需要關(guān)注的只有設(shè)計本身，其他的像版本迭代，插件管理、文件存儲、同步、協(xié)同的問題都無需再投入任何精力。

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

• 從系統(tǒng)的頂部菜單欄上的「Plugins」入口選擇插件；

• 在文件內(nèi)右鍵呼出菜單，從「Plugins」入口選擇插件；

• 快捷鍵 ? + / 呼出搜索，輸入插件名。

文件管理類插件

1. Time Machine

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

△ Time Machine

2. Clean document

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

△ Clean document

每次設(shè)計稿最終完成后，雜亂的圖層和編組簡直是一片狼藉。無論是對設(shè)計師本人，還是一起協(xié)作的設(shè)計師與開發(fā)都是一場噩夢。不過現(xiàn)在一鍵就能搞定，是設(shè)計師的必備神器。

△ 設(shè)計師頭疼的 4 種原因

圖形資源類插件

3. Autoflow

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

△ Autoflow

4. Iconify

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

△ iconify

5. Gifs

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

△ Gifs

6. Vectary 3D

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

△ Vectary 3D

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

△ Vectary 3D 界面

無障礙類插件

7. A11y系列

A11y 即 Accessibility，隨著無障礙設(shè)計得到越來越多關(guān)注，這類插件也終于開始出現(xiàn)，讓我們可以更有效的優(yōu)化產(chǎn)品設(shè)計，讓更多用戶享受更友好的體驗。

A11y 系列由 Microsoft 出品，包含兩款插件：Color Contrast Checker、Focus Orderer。

7-1 Color Contrast Checker

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

△ Color Contrast Checker

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

△ Contrast

7-2 Focus Orderer

Focus Orderer 幫助設(shè)計師標(biāo)記并測試焦點狀態(tài)（Focused）的流程和體驗是否合理，一般在網(wǎng)頁設(shè)計中使用。

△ Focus Orderer

其實筆者之前還未見過類似 Focus Order 的插件或工具，希望未來能有更多解決或輔助無障礙設(shè)計的工具出現(xiàn)。一方面讓我們的設(shè)計產(chǎn)出更容易向無障礙標(biāo)準(zhǔn)對齊，另一方面也會影響行業(yè)內(nèi)的設(shè)計師更多的關(guān)注無障礙設(shè)計領(lǐng)域。

8. Color Blind

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

△ Color Blind

設(shè)計系統(tǒng)類插件

9. Roller · Design Linter · Toybox

Roller 是一款樣式自動檢查工具，通過添加或?qū)?styles 后，可以以此為基準(zhǔn)校驗文件內(nèi)使用的顏色、字體樣式、陰影、圓角大小是否符合設(shè)計規(guī)范，以保證設(shè)計產(chǎn)出完全對齊規(guī)范。不過 Roller 有個很大的問題，其本身不支持 rgba，希望后續(xù)會有優(yōu)化。

△ Roller

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

10. Chroma colors

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

△ Chroma colors

以上推薦的插件均為筆者日常工作會用到的一些功能和體驗不錯的插件，其實還有很多優(yōu)秀的插件可以推薦，比如官方人員出品的 Themer，可以一鍵切換主題；自動生成視覺焦點圖的 VisualEyes；還有 Product plane、Wireframe、Graphviz 將圖表、流程圖全部搬運到 Figma 中，實現(xiàn)排期、文檔、設(shè)計全在 Figma 實現(xiàn)。

好的軟件也要有好的設(shè)計模板，最后推薦一系列figama格式的設(shè)計模板，請點擊鏈接前往。