之前的文章中,笔者为大家介绍了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. Ext.js 之MVC

    Ext.js 4.0之MVC

  2. test20181024 zi

    题意 分析 这种题一般是推公式,发现必须求得的量,然后定义函数记忆化. 然后那些函数里面又是递归处理,合并. 代码 为了不爆空间,用map存记忆化内容. #include<bits/stdc++ ...

  3. 对Linux内核中进程上下文和中断上下文的理解

    内核空间和用户空间是操作系统理论的基础之一,即内核功能模块运行在内核空间,而应用程序运行在用户空间.现代的CPU都具有不同的操作模式,代表不同的 级别,不同的级别具有不同的功能,在较低的级别中将禁止某 ...

  4. [C++ Primer] 第3章: 字符串, 向量和数组

    标准库类型string string初始化 string s2(s1); string s2 = s1; string s3("value"); string s3 = " ...

  5. thinkphp配置rewrite模式访问时不生效 出现No input file specified解决方法

    使用thinkphp配置rewire模式的路径访问网站时, 直接复制官网的.htaccess文件的代码复制过去 1 2 3 4 5 6 <IfModule mod_rewrite.c>   ...

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

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

  7. SQL中禁用trigger

    SQL中禁用所有trigger   编写人:CC阿爸 2014-6-15 在日常SQL数据库的操作中,如何快速的禁用所有trigger? --禁用某个表上的所有触发器 ALTER  

  8. week3-栈和队列

    1.学习总结 2.PTA实验作业 2.1 题目1:7-1 jmu-报数游戏 2.2 设计思路(伪代码或流程图) 2.3 代码截图 2.4 PTA提交列表说明. 答案错误:error少了 !: 非零返回 ...

  9. [教程]Ubuntu下完整配置自动壁纸切换

    来源:http://www.linuxidc.com/Linux/2016-09/135350.html 更原始的来源就不去找了,如果有找到的同学可以回复我我到时改过来www 来源的教程是有效的,但是 ...

  10. 测试用例文件的存放和创建,对page objeck的理解

    如:(注意我下面这种要用eval函数取拼接的)