之前的文章中,笔者为大家介绍了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. 白帽子讲web安全——一个安全解决方案的诞生细节

    1.白帽子:做安全的人.主要做的事,防御,是制定一套解决攻击的方案.而不是只是解决某个漏洞. 2.黑帽子:现在说的黑客.让web变的不安全的人.利用漏洞获取特权.主要做的事,攻击,组合各种方法利用漏洞 ...

  2. 升级到SQL Server 2012/2014时一些需要考虑的事项

    1. 使用Upgrade Adviser评估升级前需要解决的事情. https://msdn.microsoft.com/zh-cn/library/ms144256(v=sql.110).aspx ...

  3. Rotor envoy control plane 简单试用

    rotor 基于golang 的envoy xds 服务,支持多种集成方式: k8s consul aws dc/os demo试用docker 以及consul 进行环境运行 下载demo 可以试用 ...

  4. 获取bing带swim的网址列表

    需求背景: 应老婆要求,搜集带有swim关键字的网站.实现过程: 使用requests模块通过bing接口搜索swim关键,将返回内容按需求进行处理,得到网站列表. 注:代码比较拙,老司机就不要弄废时 ...

  5. php 自定义函数大全

    1. call_user_func和call_user_func_array 以上两个函数以不同的参数形式调用函数.见如下示例: <?php class demo{ public static ...

  6. Tomcat 7 可以修改 Session 默认的 Cookie 名 JSESSIONID 了

    Tomcat 7 可以修改 Session 默认的 Cookie 名 JSESSIONID 了       程序员必上的开发者服务平台 —— DevStore 看看下面这个配置: <Contex ...

  7. Oracle 表空间查询与操作方法

    一.查询篇 1.查询oracle表空间的使用情况 select b.file_id 文件ID,  b.tablespace_name 表空间,  b.file_name 物理文件名,  b.bytes ...

  8. 洛谷八连测R6

    本次测试暴0!!!还有两周就要考试啦!!! 看题目时觉得难度不大,就直接写正解,没有参照数据,导致测出的结果和预想有较大差距. 不过得到经验,不管题目难易(除了D1T1)都要参照数据一部分一部分写,那 ...

  9. VS2015 Git 源代码管理工具使用记录

    1. 首先到源代码托管平台申请个账户:https://git.oschina.net/ 2.创建流程图: 2.1 开始创建项目: 2.2 3. 4.

  10. Run-time Settings 运行时设置

    1.执行顺序设置和执行概率设置 2.迭代之间的等待时间设置 3.日志设置 4.思考时间 5.杂项 线程进程选择: 一般服务器没有安全机制选择线程执行 但是有安全机制的话 比如第一个进程50个线程 第二 ...