之前的文章中,笔者为大家介绍了Sketch 的入门教程、实用技巧和资源集锦,相信大家对Sketch已经有了初步的了解和认识。除了基础的矢量设计功能以外,插件更是让Sketch保持强大的独门秘籍。Sketch开放了第三方插件接口,设计师可以在几百种的插件中轻松找到适合自己工作方式的插件,并且他们都非常容易获得和安装。

这里笔者为你总结了五款超实用的Sketch插件,让你把Sketch用到起飞。

1. Marketch

做完设计稿后,我们往往需要告诉前端开发工程师,图片的具体尺寸,文本字号和间距等,Marketch这个插件会让你充满惊喜。它是一款支持一键标注和一键切片的Sketch插件,可以实现动态标注、单位转换和动态切图等超级实用的功能。

它不仅可以帮设计师减负,免去标注的烦恼,程序可以通过内置的页面查看所有要素的布局参数,甚至是CSS代码。此外,这款插件可以在本地生成HTML,也不用担心安全和隐私问题。

插件下载地址:https://github.com/tudou527/marketch

使用教程:

第一步:运行插件->market

第二步:命名并导出

第三步:解压zip,运行Html文件,即可在浏览器查看效果。

效果demo浏览:http://tudou527.github.io/marketch/

2. Mockplus

众所周知的是,Sketch是一款矢量设计软件,如果我们想要对设计稿继续进行交互设计和团队协作的话,这里推荐为Sketch安装Mockplus的插件。在完成Sketch的设计后,可以将其导出为MP的项目文件,从而在Mockplus中进行快速原型设计,并且与团队成员进行协作和批注。

插件下载地址:https://www.mockplus.cn/download

使用教程:

第一步:下载并安装Sketch插件,双击打开.sketchplugin文件

第二步:完成设计后,菜单选择Plugins -> Mockplus ->导出项目文件

第三步:在下面的界面中设置项目选项,你可以选择导出部分的 Artboard,同时你还可以选择导出的项目类型和图片大小信息,这些选项会影响最终导出的项目文件。设置好以后,选择“导出”。

3. Content Generator Sketch Plugin

我们在做一些页面的时候可能就会需要用到数据填充的功能,提高保真度。最常见的就是填充各种不同的头像,而且最好不是千篇一律的头像,这个插件就能快速地实现这样的效果,只需要选中需要填充头像的图形,就会帮你随机选择并填充合适的人物头像。

除了图像之外,这个插件也能随机生成用户名,邮箱和电话,做联系表的时候效率就相当高了。

插件下载地址:https://github.com/timuric/Content-generator-sketch-plugin

值得一提的是,类似的数据填充也可以使用Mockplus的格子功能实现,如果有图片组件,当创建单元格的时候,会自动在每个单元格中的图片自动填充图像。图片类型有“占位图形、头像、人物肖像、设计、商务”等多种类型。如果是文本,你可以设置文本组件的“自动填充类型”,比如选择为“日期”,那么所有单元格中,这个文本的内容都会变成随机的日期值。

4. Rename it

在设计时,我们常常需要批量修改图形名称,修改的名称最好是可以体现图层属性和参数,就可以快速方便地找到想要的图层。Rename it 将会是你的绝佳助手。

下载地址:https://github.com/rodi01/RenameIt

使用教程:(见上图GIF)

第一步,选择要批量命名的元素

第二步,选择Plugins > Rename it,在弹出发对话框中命名规则。里面的%W%H都是变量,会根据图片尺寸自动填充,我们设定好规则,点击确定就行。

具体的话有四种修改方式,这里可以看演示视频。

https://vimeo.com/85064841

1)扩展图层名:输入号 “+” 和你想添加的文本即可。(如:+ button)

2)图层名顺序:输入 “%N” 将图层名按顺序加上数字后缀。“%n” 则是加上倒序的数字。(如:item %N)

3)保留并移动原图层名: 输入新的图层名时,使用 “*” 号代替原图层名。(如:big * button)

4)  添加图层的长度和宽度:输入 “%w” 或者 “%h” 来添加图层的长和宽。(如:rectangle %w 或者 rectangle %w x %h)

5. IconFlower

这个插件非常适合于制作现在流行的多icon背景,你不用再机械地一个一个拖拽icon到画布不同位置,你只需要把所有素材放在一块画布,全部选择点击IconFlower就可以自动布局你所有icon。

下载地址:https://github.com/avadhbsd/IconFlower

使用教程:

第一步:在Sketch中安装IconFlower插件。

第二步:创建Artboard,在Artboard上放置图标/元素/图层,层数越多越好,推荐使用Iconjar进行拖拽。

第三步:选中要布局的所有图标/对象/图层。

第四部:点击插件运行后图标就会以向日葵的模式布局了。

以上就是为大家推荐的5款最佳Sketch插件,有了这些强大的插件的武装,相信你可以在Sketch上设计得更加游刃有余。当然,如果你还有更好的推荐,欢迎在评论中留言。

玩转Sketch,不容错过的5大实用插件推荐的更多相关文章

  1. 每位iOS开发人员不容错过的10大实用工具

    内容简介 1.iOS简介 2.iOS开发十大实用工具之开发环境 3.iOS开发十大实用工具之图标设计 4.iOS开发十大实用工具之原型设计 5.iOS开发十大实用工具之演示工具 6.iOS开发十大实用 ...

  2. iOS开发人员不容错过的10大工具

    内容简介 1.iOS简介 2.iOS开发十大实用工具之开发环境 3.iOS开发十大实用工具之图标设计 4.iOS开发十大实用工具之原型设计 5.iOS开发十大实用工具之演示工具 6.iOS开发十大实用 ...

  3. 每位iOS开发者不容错过的10大有用工具

    内容简单介绍 1.iOS简单介绍 2.iOS开发十大有用工具之开发环境 3.iOS开发十大有用工具之图标设计 4.iOS开发十大有用工具之原型设计 5.iOS开发十大有用工具之演示工具 6.iOS开发 ...

  4. 前端不容错过的jQuery图片滑块插件

    作为前端开发者,我们会碰到很到各种各样的jQuery插件,但老实说,很少有自己写的.今天要分享的几款jQuery图片滑块插件,也就是jQuery焦点图插件,基本上会在每个网站都有应用,可以下载看看,也 ...

  5. 前端开发不容错过的jQuery图片滑块插件(转)

    作为前端开发者,我们会碰到很到各种各样的jQuery插件.今天要分享的几款jQuery图片滑块插件,也就是jQuery焦点图插件,基本上会在每个网站都有应用,可以下载看看,也许你可以用到. 1.jQu ...

  6. Java框架介绍-13个不容错过的框架项目

    本文转自互联网,个人收藏所用. 下面,我们将一同分享各有趣且颇为实用的Java库,大家请任取所需.不用客气~ 1.极致精简的Java Bootique是一项用于构建无容器可运行Java应用的极简技术. ...

  7. 13个不容错过的Java项目

    今天我们将整理一大波干货满满的Java示例代码与能力展示素材. GitHub可谓一座程序开发的大宝库,有些素材值得fork,有些则能帮助我们改进自有代码或者学习编程技能.无论如何,开发工作当中我们几乎 ...

  8. 你不容错过的 腾讯 AlloyTeam Web 前端大会 看点完全剖析

    AC大会 ( Alloyteam Conf ),是由腾讯前端技术团队的标杆团队 AlloyTeam 发起的前端技术大会,旨在分享团队在技术研究.产品研发.开源项目的经验沉淀.AC2017 将会继续在工 ...

  9. 不容错过的超赞项目管理PPT

    不容错过的超赞项目管理PPT(转载) 大公司的一个好处,是各个领域都有牛人,可以为你提供经验分享交流.腾讯庞大的培训体系更是保证了:如果你想学点什么东西,你总可以学到.腾讯内部资源30页PPT曝光 — ...

随机推荐

  1. .NET 中让 Task 支持带超时的异步等待

    Task 自带有很多等待任务完成的方法,有的是实例方法,有的是静态方法.有的阻塞,有的不阻塞.不过带超时的方法只有一个,但它是阻塞的. 本文将介绍一个非阻塞的带超时的等待方法.   Task 已有的等 ...

  2. 2018-2019-2 《网络对抗技术》Exp4 恶意代码分析 20165222李勖

    1.系统运行监控 (1)使用如计划任务,每隔一分钟记录自己的电脑有哪些程序在联网,连接的外部IP是哪里.运行一段时间并分析该文件,综述一下分析结果.目标就是找出所有连网的程序,连了哪里,大约干了什么( ...

  3. 【转】Linux shell的&&和||

    原文网址:http://www.2cto.com/os/201302/189655.html Linux shell的&&和||   shell 在执行某个命令的时候,会返回一个返回值 ...

  4. RK3288 GT触摸屏移植调试

    CPU:RK3288 系统:Android 5.1 IC:GT911 1.在 menuconfig 或者 rockchip_defconfig 中支持触摸屏.具体用哪种方式需要结合编译方法. 按照瑞芯 ...

  5. Linux操作系统多线程信号总结

    linux 多线程信号编程总结 linux 多线程信号总结(一) 1. 在多线程环境下,产生的信号是传递给整个进程的,一般而言,所有线程都有机会收到这个信号,进程在收到信号的的线程上下文执行信号处理函 ...

  6. CentOS下查看最后登录的用户信息以及LOG记录

    CentOS下查看最后登录的用户信息tail /var/log/messagestail /var/log/secure 我们知道,在redhat下可以用lastlog查看各用户最后登录的信息,用la ...

  7. MVC confirm提示

    //审核不同意 $("#shbtg").click(function () { $.messager.confirm("提示", "不通过则会被删除, ...

  8. SmallLocks

    folly/SmallLocks.h This module is currently x64 only. This header defines two very small mutex types ...

  9. Linux gdb调试器用法全面解析

    GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具,GDB主要可帮助工程师完成下面4个方面的功能: 启动程序,可以按照工程师自定义的要求随心所欲的运行程序. 让被调试的程序在工程师指定的断 ...

  10. 操作表单域中的value值

    HTML <form action=""> <input type="radio" name="sex" value=&q ...