文件管理類插件

1. Time Machine

Time Machine 可以幫助設(shè)計(jì)師一鍵將設(shè)計(jì)稿自動(dòng)復(fù)制一份前痘，收納到在一個(gè) Page 里五芝，并按日期與時(shí)間排列。這款插件已經(jīng)是筆者目前最高頻使用的插件拳球，因?yàn)槿粘５墓ぷ髁髦性O(shè)計(jì)方案的探索扔涧、推導(dǎo)、收斂到最后的落地近弟，會(huì)產(chǎn)生數(shù)量很多的廢稿缅糟。以往筆者都要手動(dòng)創(chuàng)建一個(gè)名為「Archive」的 Page，然后將廢稿手動(dòng)丟進(jìn)去〉挥洌現(xiàn)在只需要 ? + / 然后輸入「tim」再一個(gè)回車一氣呵成窗宦。

△?Time Machine

2. Clean document

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

△?Clean document

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

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

圖形資源類插件

3. Autoflow

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

△?Autoflow

4. Iconify

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

△?iconify

5. Gifs

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

△?Gifs

6. Vectary 3D

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

△?Vectary 3D

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

△?Vectary 3D 界面

無障礙類插件

7. A11y系列

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

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

7-1 Color Contrast Checker

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

△?Color Contrast Checker

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

△?Contrast

7-2 Focus Orderer

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

△?Focus Orderer

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

8. Color Blind

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

△?Color Blind

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

9. Roller · Design Linter · Toybox

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

△?Roller

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

10. Chroma colors

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

△?Chroma colors?

以上推薦的插件均為筆者日常工作會(huì)用到的一些功能和體驗(yàn)不錯(cuò)的插件，其實(shí)還有很多優(yōu)秀的插件可以推薦账磺，比如官方人員出品的 Themer芹敌，可以一鍵切換主題；自動(dòng)生成視覺焦點(diǎn)圖的 VisualEyes垮抗；還有 Product plane氏捞、Wireframe、Graphviz 將圖表冒版、流程圖全部搬運(yùn)到 Figma 中液茎，實(shí)現(xiàn)排期、文檔辞嗡、設(shè)計(jì)全在 Figma 實(shí)現(xiàn)捆等。

好的軟件也要有好的設(shè)計(jì)模板，最后推薦一系列figama格式的設(shè)計(jì)模板续室，請點(diǎn)擊鏈接前往栋烤。

?