01 替代重復(fù)繁瑣操作的效率插件
? 智能填充
做設(shè)計(jì)時(shí)，同學(xué)們一定遇到過這種情況，某些模塊需要用圖片或文字進(jìn)行展示。
用單調(diào)的圖形和隨意的文字占位不夠真實(shí)美觀，手動添加圖片編輯文本又太麻煩，能不能有工具幫我一鍵隨機(jī)生成并填充？
當(dāng)然可以，「智能填充」插件就是專門解決這類問題的。
選中任意文本，即可選擇智能填充人名、時(shí)間、日期、段落及對話等 9 種不同的預(yù)設(shè)內(nèi)容；選中非文本圖層、分組或畫板，就可以智能填充人物頭像、風(fēng)景、美食等 8 種類型的無版權(quán)圖片。
? 快速復(fù)制
做設(shè)計(jì)時(shí)，很多同學(xué)會遇到一個(gè)頁面中需要出現(xiàn)多個(gè)相同模塊的情況，比如商品列表、視頻頁、相冊等等。
處理起來也不難，多按幾次 Ctrl+C 和 Ctrl+V 就行。但復(fù)制出來的模塊經(jīng)常重疊在一起，還需要逐個(gè)拖拽排版……時(shí)間就是被這樣浪費(fèi)的。
但其實(shí)，這些繁瑣的步驟完全可以用「快速復(fù)制」插件一鍵搞定。
只需做好第一個(gè)，選中全部圖層，打開插件，設(shè)定好橫向與縱向的復(fù)制數(shù)量及間距，點(diǎn)下按鈕就能一鍵復(fù)制。
像我演示用的這個(gè)即時(shí)設(shè)計(jì)的插件，復(fù)制完成后，還預(yù)留了按鈕，點(diǎn)一下就能打開「智能填充」，很貼心。
? 文本拆分
還有專門用于處理大段文字的「文本拆分」插件，能將一個(gè)文本圖層拆分為多個(gè)，方便分別設(shè)計(jì)排版；也可以將多個(gè)文本圖層組合為一個(gè)重新編輯。
類似的提高設(shè)計(jì)效率的插件還有很多，例如：
「圖標(biāo)尺寸調(diào)整」——可以批量調(diào)整不同 icon 及其外框大?。?
「字體替換」——批量替換設(shè)計(jì)稿中使用到的所有字體，并保持原有文本樣式屬性；
「查找替換」——能搜索定位文本內(nèi)容并替換，且不改變原有文本樣式。
02 整合圖標(biāo)字體的資源插件
各種各樣的免費(fèi)或付費(fèi)的素材庫給我們提供了很多便利，但也不是所有類型的資源，都適合下載文件，再導(dǎo)入使用的。
比如圖標(biāo)和字體這兩類，使用頻率非常高，如果每次都需要下載導(dǎo)入安裝，無形中就增加了很多重復(fù)工作。
所以，很需要有一些工具，來讓這兩類資源的取用更加便捷，比如，圖標(biāo)插件和字體插件。
? 海量圖標(biāo)—— iconify、iconfont & IconPark
現(xiàn)在的圖標(biāo)庫都能直接下載 SVG 格式，所以不用太考慮顏色尺寸的問題。
但做設(shè)計(jì)久了，就會在電腦里存下許多圖標(biāo)文件，整理起來屬實(shí)麻煩，都刪掉了又可惜，萬一哪個(gè)還能用到呢？
這時(shí)候，如果安裝幾個(gè)圖標(biāo)插件，就沒有這些問題了。
點(diǎn)開插件，搜索想要的圖標(biāo)，選中圖標(biāo)并修改尺寸和顏色，直接拖拽使用。
國內(nèi)常用的 iconify、iconfont 和 IconPark 都已有插件接入。
? 字體方案——字由插件
做海報(bào)、封面、banner 圖的時(shí)候，同學(xué)們應(yīng)該經(jīng)常會用到很多不同風(fēng)格的字體。
但經(jīng)常會遇到精挑細(xì)選并下載安裝了好幾款字體后，發(fā)現(xiàn)用在作品里視覺效果并沒有那么好，還得重新找字體并安裝……
面對這種情況，最省事的方式應(yīng)該用類似「字由」的第三方字體插件來管理字體。
安裝字由客戶端后，里面的字體方便查找，點(diǎn)一下就能激活，然后直接在設(shè)計(jì)時(shí)使用，幫我們省去了很多檢索和下載安裝字體的步驟。
這里需要提出的是，Sketch 和 XD、PS 這些本地軟件應(yīng)該都是支持字由的，在線工具的話，目前只有「即時(shí)設(shè)計(jì)」支持字由，F(xiàn)igma 也是完全沒辦法用的。
當(dāng)然，即時(shí)設(shè)計(jì)的字體方案還是值得一說的，其實(shí)之前也提過挺多次了，“本地+云端”的多種方案，最大的亮點(diǎn)是：
1. 個(gè)人設(shè)計(jì)師不止可以使用本地安裝的字體和「字由」的字體，還能免費(fèi)上傳自己的字體文件到云端和其他人一起使用。
2. 團(tuán)隊(duì)的版權(quán)字體還可以直接上傳到團(tuán)隊(duì)共享庫，所有團(tuán)隊(duì)成員都能隨時(shí)在線使用，完全不用下載安裝。
03 提供圖形配色方案的插件
? 圖形生成——不規(guī)則圖形
我經(jīng)常給星球的同學(xué)們布置一些作業(yè)，而在設(shè)計(jì)過程中最常用的裝飾元素之一，就是不規(guī)則圖形，看起來簡約又高級。
需要不規(guī)則圖形時(shí)，最常見的做法是用鋼筆工具自己畫一個(gè)，但還有更快捷的方法，用「不規(guī)則圖形」插件隨機(jī)生成斑點(diǎn)或者波浪。
這類插件一般包含很多預(yù)設(shè)方案，點(diǎn)一下就能隨機(jī)生成。
如果覺得隨機(jī)“搖”出來的圖形不合心意，還可以自己調(diào)節(jié)修改。斑點(diǎn)的錨點(diǎn)和曲率，波浪的高度、層數(shù)、峰數(shù)都支持自定義。
雙擊生成的不規(guī)則圖形，還能繼續(xù)拖拽修改形狀。這么一通修改下來，只有復(fù)制粘貼才能得到兩個(gè)完全相同的圖形了。
? 色彩使用——漸變色
同學(xué)們在設(shè)計(jì)作品中，經(jīng)常會用到漸變色，但是很多同學(xué)不擅長調(diào)出好看的漸變色，做出來的圖看起來很臟，尤其是顏色跨度較大的時(shí)候。
這種情況下，一個(gè)收錄若干經(jīng)典配色的「漸變色」插件就能幫上大忙。
如圖我用的這個(gè)漸變色插件，就收錄了來自 WebGradients 的 180 種線型漸變配色，可以一鍵快速填充；給出的漸變色方案，也都很具備學(xué)習(xí)參考的價(jià)值。
? 色彩搭配——圖片取色
我還找到了一個(gè)非常適合用來參考和使用色彩搭配的插件——「圖片取色」。
優(yōu)秀的攝影或設(shè)計(jì)作品中都具有極為豐富且和諧的色彩搭配，而「圖片取色」這個(gè)插件可以識別圖片中 5 種主要顏色，方便我們學(xué)習(xí)配色、汲取靈感。
用起來也很方便，選中圖片，再點(diǎn)一下「圖片取色」，就能精準(zhǔn)識別圖片中配色，并按照顏色占比依次展示。
04 點(diǎn)一下秒安裝/卸載
今天的插件就先分享這些了，上面的演示我都是用「即時(shí)設(shè)計(jì)」做的，Sketch、Figma 應(yīng)該也都可以找到不少類似的插件。
如果想要快速感受一下的話，可以直接打開即時(shí)設(shè)計(jì)，插件廣場里還有很多，安裝卸載也很方便，點(diǎn)一下就行。
安裝完回到編輯頁面就能直接使用，展開的列表里，每個(gè)插件在名字旁邊還配有簡單易懂的圖標(biāo)，一眼看過去就能更快地定位自己想要的插件。
總結(jié)
從提高效率減少重復(fù)操作，到整合常用資源讓取用更順手，再到圖形色彩的方案提供。
即時(shí)設(shè)計(jì)充分照顧到設(shè)計(jì)過程中最常見的一些問題，已經(jīng)能滿足我大部分的需求了。
除了已有的這些，即時(shí)設(shè)計(jì)還在持續(xù)上新，官方還表示之后也會像 Sketch、Figma 一樣開放第三方插件。
現(xiàn)在只想喊他們快點(diǎn)開放，我已經(jīng)迫不及待想看看，國內(nèi)的大神能做出什么樣更好用的插件工具了！
鏈接我放在下面了，對這些插件感興趣的同學(xué)們，可以去體驗(yàn)一下~
即時(shí)設(shè)計(jì)插件廣場：
https://js.design/pluginSquare
原文地址：菜心設(shè)計(jì)鋪（公眾號）
作者：菜心
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》太簡單了！別人要做一小時(shí)的頁面，我用這些效率插件一鍵生成
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司