15+ Figma插件助你設(shè)計(jì)游刃有余

自從Figma推出插件功能以來，插件的發(fā)布一直成為熱門話題，也為改善Figma的設(shè)計(jì)流程添磚加瓦。并且，隨著眾多大牌公司的設(shè)計(jì)團(tuán)隊(duì)全都轉(zhuǎn)移至Figma，也讓該應(yīng)用在設(shè)計(jì)行業(yè)掀起了一場(chǎng)風(fēng)暴。無論你是Figma的老司機(jī)還是新手，抑或是準(zhǔn)備轉(zhuǎn)入Figma行列的設(shè)計(jì)師，本文將列舉一些迄今為止好用、流行（應(yīng)用于Sketch或Adobe XD等流行交互設(shè)計(jì)工具的）、以及功能獨(dú)特的插件以供參考。

1. Arrow Auto（創(chuàng)建用戶流）

Arrow Auto

Arrow Auto 為 Figma 添加了流程圖功能，這對(duì)于創(chuàng)建用戶流非常有用。選擇畫布上的任意兩個(gè)對(duì)象，Arrow Auto 讓你能夠在它們之間繪制一個(gè)連接器。你還可以按需隱藏和顯示流程。

雖然Autoflow對(duì)于繪制流程圖來說也是一個(gè)不錯(cuò)的選擇，而且界面或許看上去更美觀，但是 Arrow Auto 比其具有更多的功能，包括切換連接器的方向，在保持連接器不變的情況下將連接的對(duì)象移動(dòng)到其他地方等。

2. Angle（模擬真實(shí)設(shè)備）

Angle

Angle可以模擬真實(shí)的設(shè)備，并在其框架內(nèi)顯示你的設(shè)計(jì)屏幕，每個(gè)框架都可以選擇各種顯示角度和陰影風(fēng)格。而且這些框架全都是100%的矢量格式。

Artboard Studio 雖然也是模擬設(shè)備顯示，但和 Angle 并不完全相同。它允許在畫布上插入一大堆隨機(jī)的3D對(duì)象。如果你只關(guān)心設(shè)備模擬，建議使用Angle。 Vectory 3D 和 Artboard Studio 類似，但它可以輸出到實(shí)際的3D資源。

3. Master（使組件管理變得更容易）

Master

Master提供了一個(gè)更好的管理組件的方法，比如將多個(gè)相同的對(duì)象變成一個(gè)組件，或?qū)⒔M件復(fù)制到其他Figma文件中等等。

4. Clean Document（自動(dòng)清理文檔）

Clean Document

Clean Document，顧名思義，清理你的文檔! 它可以刪除隱藏的圖層、對(duì)圖層進(jìn)行智能分類、對(duì)圖層進(jìn)行重命名、取消單圖層分組、甚至將尺寸四舍五入到最接近的像素。這是為強(qiáng)迫癥患者提供的一個(gè)非常棒的工具!

5. Similayer（選擇相同圖層）

Similayer

很簡(jiǎn)單，Similayer 允許你根據(jù)當(dāng)前所選圖層的相似度來選擇圖層。假設(shè)你想改變一個(gè)陰影風(fēng)格，而這個(gè)陰影風(fēng)格被用在很多不同的元素上，Similayer 可以幫你做到這一點(diǎn)。你還可以用它來批量重新分配多個(gè)組件。

6. Viewports（改變視窗）

Viewports

查看所有屏幕視窗尺寸的市場(chǎng)占有率，然后將其應(yīng)用于框架中。這個(gè)功能非常有用！統(tǒng)計(jì)數(shù)據(jù)來自StatCounter。

7. Todo（創(chuàng)建待辦清單）

Todo

這是應(yīng)用于Figma中的待辦清單。它并非要取代你的日常待辦事項(xiàng)清單，而是讓你在不需要離開 Figma 的情況下就能追蹤你的設(shè)計(jì)待辦事項(xiàng)的清單。比如，需要一個(gè)進(jìn)行修改設(shè)計(jì)的項(xiàng)目清單？或是需要確定設(shè)計(jì)項(xiàng)目的優(yōu)先級(jí)？如果是這樣，請(qǐng)安裝Todo插件。

8. Font Scale（創(chuàng)建字體比例）

Font Scale

通過選擇一個(gè)基本尺寸和比例系數(shù)，建立一個(gè)視覺上一致且層次分明的字體比例，然后將其保存到你的文檔中，以便日后使用參考。尺寸單位為em或px的形式。

9. Content Reel（插入真實(shí)的內(nèi)容）

Content Reel

Content Reel 將真實(shí)的內(nèi)容插入到你的設(shè)計(jì)中。比如你需要一個(gè)地址？或是頭像？亦或出于某種原因，需要一個(gè)名字卻完全想不出？Content Reel 會(huì)幫你解決這些問題。

使用真實(shí)的數(shù)據(jù)進(jìn)行設(shè)計(jì)，可以確保設(shè)計(jì)不會(huì)在開發(fā)后看起來很奇怪，同時(shí)也能幫助我們?cè)O(shè)計(jì)出邊緣案例。

10. Google Sheets Sync（從Google Sheets同步數(shù)據(jù)）

Google Sheets Sync

無論你的應(yīng)用是有API還是你只是想手動(dòng)創(chuàng)建一個(gè)數(shù)據(jù)表，Google Sheets Sync

基本上可以讓你直接將這些數(shù)據(jù)同步到Figma中。這就像Content Reel一樣，但不同的是，你可以自己定義數(shù)據(jù)。它對(duì)于想要利用實(shí)際利基（或?qū)崟r(shí)應(yīng)用）的數(shù)據(jù)來構(gòu)建真實(shí)模型的設(shè)計(jì)者來說非常有用，特別是對(duì)于想要使用相同的數(shù)據(jù)庫進(jìn)行設(shè)計(jì)的團(tuán)隊(duì)來說，尤為有用。

11. Chart（創(chuàng)建真實(shí)數(shù)據(jù)的圖表）

Chart

使用來自Excel、Numbers、Google Sheets的數(shù)據(jù)創(chuàng)建令人驚嘆的、可定制的圖表，或者只需導(dǎo)入本地CSV或JSON文件即可。 Datavizer雖然也是一個(gè)合適的選擇，但 Chart 可以與實(shí)時(shí)JSON同步（即你可以將 Chart 連接到REST API）。

12. Iconify（使用圖標(biāo)字體）

Iconify

在Figma內(nèi)部匯集所有圖標(biāo)字體。Material Design Icons、FontAwesome、Jam Icons、EmojiOne、Twitter Emoji，一切你說了算。都是一些很有代表性的圖標(biāo)。

13. Figmotion（創(chuàng)建動(dòng)畫）

Figmotion

如果你一想到探索動(dòng)畫就會(huì)感到恐懼，或者你覺得切換工具來訪問高級(jí)動(dòng)畫功能很麻煩，那么Figmotion會(huì)使你的動(dòng)畫制作不再那么焦慮。同時(shí)，由于動(dòng)畫是基于網(wǎng)絡(luò)技術(shù)的，所以也很容易上手使用。

14. Split Shape（創(chuàng)建列/行）

Split Shape

Split Shape是一種有趣的創(chuàng)建列的方法，它可以將一個(gè)矩形分割成多個(gè)矩形，然后你可以從這些矩形中創(chuàng)建列（或行或其他什么內(nèi)容）。如果你能跳出到框框外的思維，Split Shape還可以用于各種不同的事情！

15. Remove BG（移除位圖背景）

Remove BG

Remove BG本身是一個(gè)網(wǎng)絡(luò)工具，它可以移除位圖圖像的背景，有效地將其轉(zhuǎn)化為透明的PNG。而該插件就是在Figma內(nèi)部做同樣的事情。

如果你一直保留著Photoshop只為了刪除背景，現(xiàn)在你可以刪掉它了，這能很好地釋放出約8GB的SSD空間。

流行的Figma插件

以上還有很多插件沒有提到，因?yàn)樗鼈円呀?jīng)被其它設(shè)計(jì)工具如Sketch等為用戶所熟知。以下列出幾個(gè)最廣為人知的：

• Confetti (碎花生成)

• Unsplash (插入U(xiǎn)nsplash圖片)

• Rename It (批量重命名)

• Humaaans (插畫神器)

• Stark or A11y – Color Contrast Checker (測(cè)量色彩對(duì)比度)

額外推薦的 Figma 插件

以下這些Figma插件都非常棒，但你可能不需要經(jīng)常用到它們?？梢宰鰝溆锰幚?。

• Arc (制作拱形文字)

• Roto (對(duì)圖形進(jìn)行旋轉(zhuǎn)擠壓)

• Table Generator (創(chuàng)建表格)

• To Path (沿路徑創(chuàng)建文本)

• Brandfetch (調(diào)用品牌資源)

• Isometric (使對(duì)象等距)

• Mapsicle or Map Maker (自定義創(chuàng)建地圖)

• Skew (創(chuàng)建簡(jiǎn)單的等距模型)

• Image Tracer (將位圖轉(zhuǎn)換為矢量圖)

• Shadow Picker (智能創(chuàng)建陰影)

• Metaball/Blobs/Waves (創(chuàng)建抽象圖形)