序言

咦，同樣是用 Figma，為什么同桌小花早早下班，隔壁二狗歲月靜好，而你卻在 Figma 中焦頭爛額？設(shè)計提速的秘訣就在于 Figma 中功能各異的插件。但當(dāng)打開 Figma 插件庫，海量插件讓人頭暈眼花，究竟哪一款才是最適合你的呢？為此 QQ 設(shè)計師在日常工作中反復(fù)實驗，終于找到了這些寶藏插件，讓 UI 設(shè)計領(lǐng)域的你成為高效的設(shè)計師。

更多Figma插件推薦：

一、Skale-縮放能力增強(qiáng)工具

很多設(shè)計師在從 Sketch 轉(zhuǎn)換使用 Figma 的時候，找不到對應(yīng) Sketch 里的縮放功能。此時你就需要 Skale，這是一款熱門好用的縮放插件，可以設(shè)置元素縮放中心，縮放比例或者縮放到特定的寬度、高度（包括該對象的所有屬性也會隨之縮放）。

下載地址： https://www.figma.com/community/plugin/808289809557716614/skale

二、To Path-路徑上創(chuàng)建圖形和文字

經(jīng)常做平面的設(shè)計師會遇到的一個問題，F(xiàn)igma 內(nèi)要如何在創(chuàng)建曲線的文字呢？你不妨可以使用 To Path 插件，它的功能是可以按照指定的路徑來變換圖形和文字。

下載地址： https://www.figma.com/community/plugin/751576264585242935/To-Path

三、Morph-快速創(chuàng)建特殊效果

Morph 可以在 Figma 內(nèi)快速創(chuàng)建一些特殊視覺效果，如浮雕，霓虹燈，抖音故障效果，倒影，玻璃等。可以幫助設(shè)計師快速進(jìn)行一些風(fēng)格化的嘗試和探索。

下載地址：?https://www.figma.com/community/plugin/906950256777348534/Morph

四、Mesh Gradient-網(wǎng)格漸變工具

當(dāng)我們需要多種顏色混合漸變的效果時，Mesh Gradient 的作用是可以在 Figma 內(nèi)以網(wǎng)格的形式編輯漸變，你可以編輯、拖動、填充這些網(wǎng)格點，做出極光的效果。

下載地址： https://www.figma.com/community/plugin/958202093377483021/Mesh-Gradient

五、Webgradients-配色靈感工具

做設(shè)計非常常用的一個方法就是多去嘗試，當(dāng)我們在做某個界面的時候不知道配色該如何處理的時候，可以使用 Webgradients 插件內(nèi)置的多種高級配色，或許你的靈感就此誕生。

下載地址： https://www.figma.com/community/plugin/802147585857776440/Webgradients

六、Auto Layout Styles-自動布局管理

相比 Sketch，F(xiàn)igma 在 Auto layou 方面極大的提升了設(shè)計靈活度。而 Auto Layout Styles 插件可以很好的管理或者單獨對某幾個元素配置 Auto Layout，設(shè)計師可以在插件內(nèi)設(shè)置好布局關(guān)系并進(jìn)行命名，然后應(yīng)用到設(shè)計中。還可以對已經(jīng)設(shè)置好的布局樣式進(jìn)行修改，Auto Layout Styles 會同步到所有調(diào)用過這個布局樣式的元素中。

下載地址： https://www.figma.com/community/plugin/939173063111899081/Auto-Layout-Styles

七、Batch Styler-批量修改文本和顏色樣式

大家在工作中經(jīng)常會需要去修改大量樣式，這時候你就可以使用 Batch Styler 插件，它的主要提效點在于可以批量修改顏色屬性樣式，批量更改排版樣式，批量刪除、重命名樣式。

下載地址： https://www.figma.com/community/plugin/818203235789864127/Batch-Styler

八、Styler-快速創(chuàng)建樣式

當(dāng)需要批量創(chuàng)建樣式的時候，手動逐個去創(chuàng)建并不是有效的做法，而 Styler 插件可以快速批量創(chuàng)建樣式（包括文本，顏色，效果等），它可以基于圖層屬性批量創(chuàng)建、修改或更新樣式，當(dāng)設(shè)計師在搭建組件庫樣式的時候，Styler 可以大大提高工作效率。

下載地址： https://www.figma.com/community/plugin/820660579767995949/Styler

九、Design System Organizer-管理設(shè)計系統(tǒng)

設(shè)計師在 Figma 內(nèi)搭建組件庫時，Design System Organizer 插件可以更方便設(shè)計師創(chuàng)建，管理和修改組件庫。超級提效實用的功能包含：

1.像文件管理器一般管理組件內(nèi)容

2.項目在類別樹之間拖拽移動

3.文件之前批量轉(zhuǎn)移樣式

4.批量重新鏈接實例和樣式。

下載地址： https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer

十、Breakpoints-響應(yīng)式斷點插件

在 Figma 內(nèi)，當(dāng)需要展示界面因為拉伸拖拽而發(fā)生響應(yīng)變化的效果時，使用口頭描述和各種靜態(tài)界面標(biāo)注并不是最優(yōu)解，使用 Breakpoints 插件，可以做一些響應(yīng)式動態(tài)布局的效果，并共享動畫原型。即使團(tuán)隊其他設(shè)計師沒有安裝這個插件，也可以在拉伸界面時預(yù)覽到動態(tài)布局。

下載地址： https://www.figma.com/community/plugin/824289601590456356/Breakpoints

十一、Themer-UI 界面主題管理

同時設(shè)計深色模式和淺色模式的視覺稿會耗費設(shè)計師不必要的精力，Themer 的主要功能包括一鍵切換樣式，主題管理，團(tuán)隊共享主題。能夠從團(tuán)隊庫中的已發(fā)布的組件創(chuàng)建和交換主題。將其作用于顏色、文本和效果樣式的替換。設(shè)計師使用 Themer 可以一鍵切換成深色模式和淺色模式的設(shè)計稿，避免無效的適配模式工作。

下載地址： https://www.figma.com/community/plugin/731176732337510831/Themer

十二、Motion-關(guān)鍵幀動畫

當(dāng)需要在做界面的動畫時，很多設(shè)計師會問，F(xiàn)igma 要如何導(dǎo)入 AE？其實未必要導(dǎo)入 AE 才能做動畫。Motion 插件的作用是可以直接在 Figma 內(nèi)完成關(guān)鍵幀動畫設(shè)計，將大部分圖層屬性創(chuàng)建成關(guān)鍵幀動畫，避免設(shè)計師做動畫時需要不停切換設(shè)計工具，在 Figma 內(nèi)就可以輕松愉快的完成靜態(tài)和動態(tài)的設(shè)計稿。

下載地址： https://www.figma.com/community/plugin/889777319208467032/Motion

十三、LottieFiles-導(dǎo)入和瀏覽 Lottie 資源

在 Figma 內(nèi)使用 LottieFiles 可以將自己的 dotLottie（.lottie）和 Lottie JSON（.json）文件導(dǎo)入 Figma 作為 gif 動畫或高質(zhì)量的 svg 圖層，且可以訪問和預(yù)覽免費 Lottie 動畫庫內(nèi)的資源，意味著有時候設(shè)計師甚至不需要使用其他設(shè)計軟件來配合展示 UI 動畫。

下載地址： https://www.figma.com/community/plugin/809860933081065308/LottieFiles

結(jié)語

設(shè)計工具與設(shè)計師是相輔相成的。所有的設(shè)計工具本身都有局限，但合理利用插件可以放大工具的價值，為設(shè)計提效，讓設(shè)計師有更多的時間去思考設(shè)計方案本身。

你在設(shè)計中是否也遇到過一些寶藏插件呢？歡迎在評論區(qū)分享給我們，大家一起做最高效的設(shè)計師~

歡迎關(guān)注作者微信公眾號：「騰訊設(shè)計族」