2020年，一定要試試這 17 款超給力的 Figma 插件

在世界范圍內(nèi)，F(xiàn)igma 已經(jīng)作為主流的原型和數(shù)字設(shè)計(jì)軟件而存在，和 Adobe XD 和 Sketch 相比，F(xiàn)igma 作為在線工具，有著更強(qiáng)的實(shí)時(shí)協(xié)同功能。出色的用戶界面和走心的交互設(shè)計(jì)讓 Figma 逐漸成為主流，而超高的迭代速度讓 Figma 開始俘獲越來越多設(shè)計(jì)師的心。

不過 Figma 的缺陷也挺明顯的，那就是缺少第三方插件。許多從其他平臺(tái)遷移過來的設(shè)計(jì)師對(duì)于這一點(diǎn)有所詬病，而 Figma 本身也在試圖解決這個(gè)問題，完善提升插件生態(tài)。

在 2019 年 8 月，經(jīng)過數(shù)周的 Beta 測試之后， Figma 終于在系統(tǒng)中啟用插件。根據(jù) Figma 的開發(fā)者透露，早在2年前他們就已經(jīng)開始了這一工作，不過為了確保插件的平穩(wěn)使用，他們一直在修改功能，完善 API。

2019 年的精選 Figma 插件：

插件的優(yōu)缺點(diǎn)

用插件來完善 Figma 的功能和體驗(yàn)，無疑是非常簡單直觀的邏輯，按需安裝，對(duì)于優(yōu)化 Figma 本身所缺乏的功能和服務(wù)，將會(huì)帶來巨大的便捷，比如自動(dòng)化運(yùn)行重復(fù)性的批量操作，這些都是插件可以提供的。

截至目前，F(xiàn)igma 當(dāng)中已經(jīng)有超過 400 款插件，并且?guī)缀趺刻於加行牡牟寮尤脒M(jìn)來。這些插件并非是 Figma 官方人員開發(fā)，而是像你我一樣的普通用戶或者開發(fā)者提供的，如果你想自己開發(fā)插件，整個(gè) Figma 社區(qū)都會(huì)在后面支持你。

不過，目前來看，雖然 Figma 軟件本身有很多特性已經(jīng)超過了 Sketch ，但是在插件生態(tài)上，依然有太多東西要向 Sketch 來學(xué)習(xí)的。并且值得一提的是，F(xiàn)igma 插件不允許插件以實(shí)時(shí)模式更改數(shù)據(jù)并返還系統(tǒng)，這個(gè)限制極大的削弱了插件的功能和可能性。

如果你是 Sketch 用戶，想遷移到 Figma ，不妨看看這篇指南：

盡管有缺陷，但是 Figma 插件依然能夠極大的強(qiáng)化設(shè)計(jì)師的操作空間，下面，我們一起來看 Setproduct 團(tuán)隊(duì)優(yōu)選的 17 個(gè)高素質(zhì)插件吧。

1、Coda for Figma

Coda for Figma 是一款能夠和 Coda 進(jìn)行聯(lián)動(dòng)的插件，接觸這個(gè)插件，你可以調(diào)用來自 Spotify、Wikipedia、Dropbox、Gmail、Google Calender、Jira、Shopify 還有 Github 的數(shù)據(jù)，用這些數(shù)據(jù)來填充布局。這個(gè)插件其實(shí)挺新的，而且社區(qū)內(nèi)越來越多的人開始樂于使用它。值得嘗試哦~

2、LilGrid

LilGid 實(shí)用性也極強(qiáng)，這是一款能夠幫你整理界面的插件，并且你可以通過自定義組織樣式。在需要整理大量的設(shè)計(jì)內(nèi)容比如按鈕和圖標(biāo)的時(shí)候，這款插件非常有用。

LilGrid 本身并不會(huì)修改設(shè)計(jì)元素，但是能幫你在畫布上更整齊、富有條理邏輯地排列他們，絕對(duì)是強(qiáng)迫癥的福音。

3、Table Paste

看名字就知道，這是一個(gè)處理表單的插件。對(duì)于需要將 Excel 表格中內(nèi)容傳輸?shù)?Figma 的設(shè)計(jì)師而言，表格的樣式管理絕對(duì)是個(gè)難點(diǎn)，那么這個(gè)時(shí)候，你需要 Table Paste 。

你可以簡單的先創(chuàng)建一行表格，然后添加文本字段，生成組件。在你設(shè)計(jì)好的表格組件當(dāng)中，再粘貼來自 Excel 的表單內(nèi)容，就行了。在這個(gè)過程中，表單的樣式你可以事先定義好。

對(duì)于需要數(shù)據(jù)呈現(xiàn)的設(shè)計(jì)，這款插件可以說非常有用了。

4、Design System Organizer

當(dāng)你在使用設(shè)計(jì)系統(tǒng)來進(jìn)行設(shè)計(jì)的時(shí)候，你可能需要針對(duì)特定組件的不同狀態(tài)、樣式進(jìn)行管理，它的命名方式甚至都有講究，便于你后續(xù)的查找檢索和修正，所以它的組織方式可能是這樣的：「按鈕/按鈕大小/按鈕狀態(tài)/默認(rèn)」

這款插件就非常有助于你來以這樣的方式來整理元素和控件的樣式，也可以針對(duì)這些組件進(jìn)行分組、移動(dòng)、重命名（批量）等等。

對(duì)于設(shè)計(jì)系統(tǒng)中的元素和空間的樣式管理，這款插件能夠?qū)俜降墓δ苓M(jìn)行補(bǔ)完，如果你要進(jìn)行相對(duì)復(fù)雜多樣的系統(tǒng)化的設(shè)計(jì)，那么最好試試這款插件。

5、Figma Dashboard UI kit

你看的沒錯(cuò)，這是一款付費(fèi)的 Figma 插件，但是它付費(fèi)也有付費(fèi)的價(jià)值：這款名為 Figma 儀表盤UI Kit 的插件涵蓋了精心挑選的最成功 UI 組件，包含一堆進(jìn)行了響應(yīng)式適配的組件，能夠幫你加速應(yīng)用程序的開發(fā)。

這套插件中包含 550 多個(gè)完整的設(shè)計(jì)項(xiàng)目，48 款系統(tǒng)化的模板，1000 多款素質(zhì)極高的圖標(biāo)，每個(gè)組件都包含標(biāo)準(zhǔn)模式和深色模式，井井有條，物有所值！

6、Movie Posters

這款插件來自于 Must App 的開發(fā)者，這對(duì)于想要?jiǎng)?chuàng)建影視相關(guān)的設(shè)計(jì)的同學(xué)而言，有著非凡的價(jià)值。

這款插件的主要功能是生成海報(bào)，它會(huì)隨機(jī)地選取電影和電視節(jié)目中的圖像或者海報(bào)甚至矢量元素，超快超省心。

7、Dot Grid

如果你在設(shè)計(jì)的時(shí)候，喜歡用網(wǎng)格的話，那么這款能夠幫你生成網(wǎng)格的插件就是你的菜了。

當(dāng)然，如你所預(yù)料的，你可以非常輕松地定義網(wǎng)格的寬度、高度、大小、間距、顏色等屬性，同時(shí)，它還能足夠漂亮細(xì)致，滿足你對(duì)于優(yōu)質(zhì)插件的期待。

8、GiffyCanvas

這款插件非常簡單，你無需離開 Figma 就可以創(chuàng)建 GIF 圖像，宣召你要?jiǎng)?chuàng)建的 GIF 圖像，設(shè)置文件參數(shù)（時(shí)間，寬度，高度）然后預(yù)覽，看了沒問題之后，就可以下載了。這款插件是對(duì) Figma 本身功能的一個(gè)重要補(bǔ)完，省去你再去打開其他的應(yīng)用去制作 Gif 圖。

9、BeatFlyer Lite

最開始 BeatFlyer Lite 是一款完全第三方的工具，不過現(xiàn)在它可以作為插件直接內(nèi)嵌到 Figma 當(dāng)中了！你只需要快速點(diǎn)擊幾下，就能夠生成動(dòng)畫，輸出令人印象印象深刻的動(dòng)畫效果！雖然 Figma 當(dāng)中有類似的功能，但是并沒有 BeatFlyer Lite 這么強(qiáng)大，所以一定要試試看。

10、Color Kit

也許你已經(jīng)厭倦了那些動(dòng)不動(dòng)就生成整套配色方案，但是更深入的細(xì)節(jié)功能又沒有的配色工具吧？這回來個(gè)細(xì)致的：Color Kit。這款工具是專門幫你制作所需顏色的深淺色階的，當(dāng)你需要制作色彩漸變，或者基于某個(gè)色調(diào)來制作富有層次的設(shè)計(jì)的時(shí)候，它就發(fā)揮作用了。

另外，如果你是第三方配色工具 Eva Design System 的用戶的話，就更好了，因?yàn)樗墓δ芎腕w驗(yàn)與之類似，你可以無需離開 Figma 就完成相關(guān)的操作，習(xí)慣和體驗(yàn)都無縫銜接過來。

11、Material Palette

如果你是 Material Design 的愛好者，那么這款 Material Design 配色方案生成工具，就是專門為你所準(zhǔn)備的。這套工具是基于 Material Design 來制作的，你可以不用查詢，直接通過這則個(gè)插件來查找合適的配色。

在使用過程中，它會(huì)同時(shí)生成三套配色方案，分別是 Material 配色，單色和純單色三種，具體你可以嘗試一下。在 Material Design 中，這種配色思路非常不錯(cuò)，但是不同顏色之間的搭配可能不夠離線，不夠連續(xù)，希望后續(xù)有所改進(jìn)。

12、Wire Box

做設(shè)計(jì)有的時(shí)候，并不是一直沿著一個(gè)方向來做的。如果你有現(xiàn)成的高保真模型，那么借此來設(shè)計(jì) UI 樣機(jī)是非常方便的。可是如果你的設(shè)計(jì)還不夠完善，還想繼續(xù)調(diào)整用戶體驗(yàn)，那么你可以借助 Wire Box 可以將高保真模型重新逆向轉(zhuǎn)換為低保真的線框圖，繼續(xù)進(jìn)行修整~

14、Webgradients

當(dāng)然，幫你生成漸變的工具有很多種，而 Webgradients 這個(gè)插件就是其中最值得嘗試的一個(gè)——它可以幫你制作出效果非常出眾的漸變效果。在這款插件當(dāng)中，它不僅能夠生成漸變，而且能夠收藏、管理不同的漸變效果，極大地節(jié)省你做設(shè)計(jì)的時(shí)間。

15、LottieFiles

LottieFiles 是最新加入 Figma 平臺(tái)的插件之一，僅僅上線 5 天就被超過 1000 名用戶下載安裝，并且很快躋身熱評(píng)榜。正如同它名字所暗示的，這是一個(gè)關(guān)于著名動(dòng)畫工具 Lottie 的插件，借助它，你可以將成千上萬的免費(fèi) Lottie 動(dòng)畫作為 GIF 或者 SVG 插入到你的設(shè)計(jì)當(dāng)中，可以說非常非常給力了。

16、TinyImage Compressor

這也是一款實(shí)用性極強(qiáng)的 Figma 插件，TinyImage 能夠幫你壓縮圖片——能夠比 Figma 本身導(dǎo)出的圖片要小 90%。這款插件還有很多有趣的功能，比如支持透明 PNG 和漸進(jìn)式的 JPEG 格式優(yōu)化，它能夠在你使用過程中，記住你的設(shè)置，并且在導(dǎo)出多個(gè)圖像的時(shí)候，自動(dòng)幫你打包成為 ZIP 格式壓縮包，非常良心。

17、Design Lint

在將你的設(shè)計(jì)提交給開發(fā)之前，你是一定要確保整個(gè)設(shè)計(jì)上是一致的，而這個(gè)超贊的免費(fèi)插件，能夠檢查你的原型或者視覺稿當(dāng)中，是否存在不一致的地方，比如顏色、字體、效果、填充樣式、筆觸、邊框半徑，簡直是一個(gè)全自動(dòng)找茬糾錯(cuò)工具，更重要的是——它是動(dòng)態(tài)實(shí)時(shí)的，也就是說，你可以一邊工作一邊用它糾錯(cuò)，不錯(cuò)吧？

當(dāng)然，如果你想要其他的神器和干貨，不妨看看下面這些：