序言

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

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

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

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

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

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

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

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

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

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

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

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

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

5、Webgradients-配色靈感工具

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

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

6、Auto Layout Styles-自動(dòng)布局管理

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

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

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

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

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

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

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

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

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

設(shè)計(jì)師在Figma內(nèi)搭建組件庫(kù)時(shí)，Design System Organizer插件可以更方便設(shè)計(jì)師創(chuàng)建，管理和修改組件庫(kù)。超級(jí)提效實(shí)用的功能包含：1.像文件管理器一般管理組件內(nèi)容。2.項(xiàng)目在類別樹之間拖拽移動(dòng)。3.文件之前批量轉(zhuǎn)移樣式。4.批量重新鏈接實(shí)例和樣式。

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

10、Breakpoints-響應(yīng)式斷點(diǎn)插件

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

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

11、Themer-UI界面主題管理

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

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

12、Motion-關(guān)鍵幀動(dòng)畫

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

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

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

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

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

結(jié)語(yǔ)

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

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

Tips：

配合上期“工具趨勢(shì)”閱讀，收獲更多噢~

設(shè)計(jì)效率工具趨勢(shì) ｜ 綜述篇

原文地址：騰訊ISUX

作者：ISUX設(shè)計(jì)

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》設(shè)計(jì)提效-Figma插件篇

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司