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.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司