序言
咦,同樣是用Figma,為什么同桌小花早早下班,隔壁二狗歲月靜好,而你卻在Figma中焦頭爛額?設(shè)計提速的秘訣就在于Figma中功能各異的插件。但當(dāng)打開Figma插件庫,海量插件讓人頭暈眼花,究竟哪一款才是最適合你的呢?為此QQ設(shè)計師在日常工作中反復(fù)實(shí)驗,終于找到了這些寶藏插件,讓UI設(shè)計領(lǐng)域的你成為高效的設(shè)計師。
1、Skale-縮放能力增強(qiáng)工具
很多設(shè)計師在從Sketch轉(zhuǎn)換使用Figma的時候,找不到對應(yīng)Sketch里的縮放功能。此時你就需要Skale,這是一款熱門好用的縮放插件,可以設(shè)置元素縮放中心,縮放比例或者縮放到特定的寬度、高度(包括該對象的所有屬性也會隨之縮放)。
下載地址:https://www.figma.com/community/plugin/808289809557716614/skale
2、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
3、Morph-快速創(chuàng)建特殊效果
Morph可以在Figma內(nèi)快速創(chuàng)建一些特殊視覺效果,如浮雕,霓虹燈,抖音故障效果,倒影,玻璃等??梢詭椭O(shè)計師快速進(jìn)行一些風(fēng)格化的嘗試和探索。
下載地址:https://www.figma.com/community/plugin/906950256777348534/Morph
4、Mesh Gradient-網(wǎng)格漸變工具
當(dāng)我們需要多種顏色混合漸變的效果時,Mesh Gradient的作用是可以在Figma內(nèi)以網(wǎng)格的形式編輯漸變,你可以編輯、拖動、填充這些網(wǎng)格點(diǎn),做出極光的效果。
下載地址:https://www.figma.com/community/plugin/958202093377483021/Mesh-Gradient
5、Webgradients-配色靈感工具
做設(shè)計非常常用的一個方法就是多去嘗試,當(dāng)我們在做某個界面的時候不知道配色該如何處理的時候,可以使用Webgradients插件內(nèi)置的多種高級配色,或許你的靈感就此誕生。
下載地址:https://www.figma.com/community/plugin/802147585857776440/Webgradients
6、Auto Layout Styles-自動布局管理
相比Sketch,F(xiàn)igma在Auto layou方面極大的提升了設(shè)計靈活度。而Auto Layout Styles插件可以很好的管理或者單獨(dú)對某幾個元素配置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
7、Batch Styler-批量修改文本和顏色樣式
大家在工作中經(jīng)常會需要去修改大量樣式,這時候你就可以使用Batch Styler插件,它的主要提效點(diǎn)在于可以批量修改顏色屬性樣式,批量更改排版樣式,批量刪除、重命名樣式。
下載地址:https://www.figma.com/community/plugin/818203235789864127/Batch-Styler
8、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
9、Design System Organizer-管理設(shè)計系統(tǒng)
設(shè)計師在Figma內(nèi)搭建組件庫時,Design System Organizer插件可以更方便設(shè)計師創(chuàng)建,管理和修改組件庫。超級提效實(shí)用的功能包含:1.像文件管理器一般管理組件內(nèi)容。2.項目在類別樹之間拖拽移動。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)需要展示界面因為拉伸拖拽而發(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
11、Themer-UI界面主題管理
同時設(shè)計深色模式和淺色模式的視覺稿會耗費(fèi)設(shè)計師不必要的精力,Themer的主要功能包括一鍵切換樣式,主題管理,團(tuán)隊共享主題。能夠從團(tuán)隊庫中的已發(fā)布的組件創(chuàng)建和交換主題。將其作用于顏色、文本和效果樣式的替換。設(shè)計師使用Themer可以一鍵切換成深色模式和淺色模式的設(shè)計稿,避免無效的適配模式工作。
下載地址:https://www.figma.com/community/plugin/731176732337510831/Themer
12、Motion-關(guān)鍵幀動畫
當(dāng)需要在做界面的動畫時,很多設(shè)計師會問,F(xiàn)igma要如何導(dǎo)入AE?其實(shí)未必要導(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
13、LottieFiles-導(dǎo)入和瀏覽Lottie資源
在Figma內(nèi)使用LottieFiles可以將自己的dotLottie(.lottie)和Lottie JSON(.json)文件導(dǎo)入Figma作為gif動畫或高質(zhì)量的svg圖層,且可以訪問和預(yù)覽免費(fèi)Lottie動畫庫內(nèi)的資源,意味著有時候設(shè)計師甚至不需要使用其他設(shè)計軟件來配合展示UI動畫。
下載地址:https://www.figma.com/community/plugin/809860933081065308/LottieFiles
結(jié)語
設(shè)計工具與設(shè)計師是相輔相成的。所有的設(shè)計工具本身都有局限,但合理利用插件可以放大工具的價值,為設(shè)計提效,讓設(shè)計師有更多的時間去思考設(shè)計方案本身。
你在設(shè)計中是否也遇到過一些寶藏插件呢?歡迎在評論區(qū)分享給我們,大家一起做最高效的設(shè)計師~
Tips:
配合上期“工具趨勢”閱讀,收獲更多噢~
原文地址:騰訊ISUX
作者:ISUX設(shè)計
轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》設(shè)計提效-Figma插件篇
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司