莫b

插件出现已久,好用的也很多,所以,每每有同学吐槽,最后就会演变成一场群内“插件推荐大会”。

今天我也来凑个热闹,给大家分享一下近段时间我最常使用的几个插件。

同学们有没有算过,自己从头到尾做完一套页面需要多久,都哪些环节浪费时间了。除去找灵感的创意环节,占用时间最多的,往往是那些细碎又重复的操作

比如:在一个页面里做多个相同模块时多次复制拖拽对齐;做到一半,切换页面去搜索可用的图片来占位展示;反复查找下载图标文件再导入使用……

但其实这些问题,早都有解决方法,那就是用插件


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网 » 太简单了!别人要做一小时的页面,我用这些效率插件一键生成

登录收藏
 
你可能喜欢的:
不会画图标,这些源文件拿去用吧!不会画图标,这些源文件拿去用吧!
效率必备!这15个图像处理网站你收藏了吗?效率必备!这15个图像处理网站你收藏了吗?
终于整理完了,这些图标库也太好用了!终于整理完了,这些图标库也太好用了!
为什么说是时候选择这个工具了为什么说是时候选择这个工具了
Figma的自动布局也太好用了吧!Figma的自动布局也太好用了吧!
聊聊上周很火的设计系统“两兄弟”聊聊上周很火的设计系统“两兄弟”
资源分享|两款B端设计走查神器资源分享|两款B端设计走查神器
2021 必备的超赞神器,用上它,效率都要提升三倍!!2021 必备的超赞神器,用上它,效率都要提升三倍!!
设计师必备的Chrome插件,超好用!!!设计师必备的Chrome插件,超好用!!!
开箱即用的Xconsole来了开箱即用的Xconsole来了