01 替代重復繁瑣操作的效率插件
? 智能填充
做設計時,同學們一定遇到過這種情況,某些模塊需要用圖片或文字進行展示。
用單調的圖形和隨意的文字占位不夠真實美觀,手動添加圖片編輯文本又太麻煩,能不能有工具幫我一鍵隨機生成并填充?
當然可以,「智能填充」插件就是專門解決這類問題的。
選中任意文本,即可選擇智能填充人名、時間、日期、段落及對話等 9 種不同的預設內容;選中非文本圖層、分組或畫板,就可以智能填充人物頭像、風景、美食等 8 種類型的無版權圖片。
? 快速復制
做設計時,很多同學會遇到一個頁面中需要出現多個相同模塊的情況,比如商品列表、視頻頁、相冊等等。
處理起來也不難,多按幾次 Ctrl+C 和 Ctrl+V 就行。但復制出來的模塊經常重疊在一起,還需要逐個拖拽排版……時間就是被這樣浪費的。
但其實,這些繁瑣的步驟完全可以用「快速復制」插件一鍵搞定。
只需做好第一個,選中全部圖層,打開插件,設定好橫向與縱向的復制數量及間距,點下按鈕就能一鍵復制。
像我演示用的這個即時設計的插件,復制完成后,還預留了按鈕,點一下就能打開「智能填充」,很貼心。
? 文本拆分
還有專門用于處理大段文字的「文本拆分」插件,能將一個文本圖層拆分為多個,方便分別設計排版;也可以將多個文本圖層組合為一個重新編輯。
類似的提高設計效率的插件還有很多,例如:
「圖標尺寸調整」——可以批量調整不同 icon 及其外框大?。?
「字體替換」——批量替換設計稿中使用到的所有字體,并保持原有文本樣式屬性;
「查找替換」——能搜索定位文本內容并替換,且不改變原有文本樣式。
02 整合圖標字體的資源插件
各種各樣的免費或付費的素材庫給我們提供了很多便利,但也不是所有類型的資源,都適合下載文件,再導入使用的。
比如圖標和字體這兩類,使用頻率非常高,如果每次都需要下載導入安裝,無形中就增加了很多重復工作。
所以,很需要有一些工具,來讓這兩類資源的取用更加便捷,比如,圖標插件和字體插件。
? 海量圖標—— iconify、iconfont & IconPark
現在的圖標庫都能直接下載 SVG 格式,所以不用太考慮顏色尺寸的問題。
但做設計久了,就會在電腦里存下許多圖標文件,整理起來屬實麻煩,都刪掉了又可惜,萬一哪個還能用到呢?
這時候,如果安裝幾個圖標插件,就沒有這些問題了。
點開插件,搜索想要的圖標,選中圖標并修改尺寸和顏色,直接拖拽使用。
國內常用的 iconify、iconfont 和 IconPark 都已有插件接入。
? 字體方案——字由插件
做海報、封面、banner 圖的時候,同學們應該經常會用到很多不同風格的字體。
但經常會遇到精挑細選并下載安裝了好幾款字體后,發現用在作品里視覺效果并沒有那么好,還得重新找字體并安裝……
面對這種情況,最省事的方式應該用類似「字由」的第三方字體插件來管理字體。
安裝字由客戶端后,里面的字體方便查找,點一下就能激活,然后直接在設計時使用,幫我們省去了很多檢索和下載安裝字體的步驟。
這里需要提出的是,Sketch 和 XD、PS 這些本地軟件應該都是支持字由的,在線工具的話,目前只有「即時設計」支持字由,Figma 也是完全沒辦法用的。
當然,即時設計的字體方案還是值得一說的,其實之前也提過挺多次了,“本地+云端”的多種方案,最大的亮點是:
1. 個人設計師不止可以使用本地安裝的字體和「字由」的字體,還能免費上傳自己的字體文件到云端和其他人一起使用。
2. 團隊的版權字體還可以直接上傳到團隊共享庫,所有團隊成員都能隨時在線使用,完全不用下載安裝。
03 提供圖形配色方案的插件
? 圖形生成——不規則圖形
我經常給星球的同學們布置一些作業,而在設計過程中最常用的裝飾元素之一,就是不規則圖形,看起來簡約又高級。
需要不規則圖形時,最常見的做法是用鋼筆工具自己畫一個,但還有更快捷的方法,用「不規則圖形」插件隨機生成斑點或者波浪。
這類插件一般包含很多預設方案,點一下就能隨機生成。
如果覺得隨機“搖”出來的圖形不合心意,還可以自己調節修改。斑點的錨點和曲率,波浪的高度、層數、峰數都支持自定義。
雙擊生成的不規則圖形,還能繼續拖拽修改形狀。這么一通修改下來,只有復制粘貼才能得到兩個完全相同的圖形了。
? 色彩使用——漸變色
同學們在設計作品中,經常會用到漸變色,但是很多同學不擅長調出好看的漸變色,做出來的圖看起來很臟,尤其是顏色跨度較大的時候。
這種情況下,一個收錄若干經典配色的「漸變色」插件就能幫上大忙。
如圖我用的這個漸變色插件,就收錄了來自 WebGradients 的 180 種線型漸變配色,可以一鍵快速填充;給出的漸變色方案,也都很具備學習參考的價值。
? 色彩搭配——圖片取色
我還找到了一個非常適合用來參考和使用色彩搭配的插件——「圖片取色」。
優秀的攝影或設計作品中都具有極為豐富且和諧的色彩搭配,而「圖片取色」這個插件可以識別圖片中 5 種主要顏色,方便我們學習配色、汲取靈感。
用起來也很方便,選中圖片,再點一下「圖片取色」,就能精準識別圖片中配色,并按照顏色占比依次展示。
04 點一下秒安裝/卸載
今天的插件就先分享這些了,上面的演示我都是用「即時設計」做的,Sketch、Figma 應該也都可以找到不少類似的插件。
如果想要快速感受一下的話,可以直接打開即時設計,插件廣場里還有很多,安裝卸載也很方便,點一下就行。
安裝完回到編輯頁面就能直接使用,展開的列表里,每個插件在名字旁邊還配有簡單易懂的圖標,一眼看過去就能更快地定位自己想要的插件。

總結
從提高效率減少重復操作,到整合常用資源讓取用更順手,再到圖形色彩的方案提供。
即時設計充分照顧到設計過程中最常見的一些問題,已經能滿足我大部分的需求了。
除了已有的這些,即時設計還在持續上新,官方還表示之后也會像 Sketch、Figma 一樣開放第三方插件。
現在只想喊他們快點開放,我已經迫不及待想看看,國內的大神能做出什么樣更好用的插件工具了!
鏈接我放在下面了,對這些插件感興趣的同學們,可以去體驗一下~
即時設計插件廣場:
https://js.design/pluginSquare
原文地址:菜心設計鋪(公眾號)
作者:菜心
轉載請注明:學UI網》太簡單了!別人要做一小時的頁面,我用這些效率插件一鍵生成
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司