玩转Sketch,不容错过的5大实用插件推荐
在之前的文章中,笔者为大家介绍了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都是变量,会根据图片尺寸自动填充,我们设定好规则,点击确定就行。
具体的话有四种修改方式,这里可以看演示视频。
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大实用插件推荐的更多相关文章
- 每位iOS开发人员不容错过的10大实用工具
内容简介 1.iOS简介 2.iOS开发十大实用工具之开发环境 3.iOS开发十大实用工具之图标设计 4.iOS开发十大实用工具之原型设计 5.iOS开发十大实用工具之演示工具 6.iOS开发十大实用 ...
- iOS开发人员不容错过的10大工具
内容简介 1.iOS简介 2.iOS开发十大实用工具之开发环境 3.iOS开发十大实用工具之图标设计 4.iOS开发十大实用工具之原型设计 5.iOS开发十大实用工具之演示工具 6.iOS开发十大实用 ...
- 每位iOS开发者不容错过的10大有用工具
内容简单介绍 1.iOS简单介绍 2.iOS开发十大有用工具之开发环境 3.iOS开发十大有用工具之图标设计 4.iOS开发十大有用工具之原型设计 5.iOS开发十大有用工具之演示工具 6.iOS开发 ...
- 前端不容错过的jQuery图片滑块插件
作为前端开发者,我们会碰到很到各种各样的jQuery插件,但老实说,很少有自己写的.今天要分享的几款jQuery图片滑块插件,也就是jQuery焦点图插件,基本上会在每个网站都有应用,可以下载看看,也 ...
- 前端开发不容错过的jQuery图片滑块插件(转)
作为前端开发者,我们会碰到很到各种各样的jQuery插件.今天要分享的几款jQuery图片滑块插件,也就是jQuery焦点图插件,基本上会在每个网站都有应用,可以下载看看,也许你可以用到. 1.jQu ...
- Java框架介绍-13个不容错过的框架项目
本文转自互联网,个人收藏所用. 下面,我们将一同分享各有趣且颇为实用的Java库,大家请任取所需.不用客气~ 1.极致精简的Java Bootique是一项用于构建无容器可运行Java应用的极简技术. ...
- 13个不容错过的Java项目
今天我们将整理一大波干货满满的Java示例代码与能力展示素材. GitHub可谓一座程序开发的大宝库,有些素材值得fork,有些则能帮助我们改进自有代码或者学习编程技能.无论如何,开发工作当中我们几乎 ...
- 你不容错过的 腾讯 AlloyTeam Web 前端大会 看点完全剖析
AC大会 ( Alloyteam Conf ),是由腾讯前端技术团队的标杆团队 AlloyTeam 发起的前端技术大会,旨在分享团队在技术研究.产品研发.开源项目的经验沉淀.AC2017 将会继续在工 ...
- 不容错过的超赞项目管理PPT
不容错过的超赞项目管理PPT(转载) 大公司的一个好处,是各个领域都有牛人,可以为你提供经验分享交流.腾讯庞大的培训体系更是保证了:如果你想学点什么东西,你总可以学到.腾讯内部资源30页PPT曝光 — ...
随机推荐
- HDU3530 Subsequence(单调队列)
题意是说给出一个序列,现在要求出这个序列的一个最长子区间,要求子区间的最大值与最小值的差在[m, k]范围内,求区间长度 做法是维护两个队列,一个维护到当前位置的最大值,一个维护最小值,然后计算当前节 ...
- JSON数组对象某个属性值查找
1.引用国外开源Linq写法的js框架 地址:https://archive.codeplex.com/?p=jslinq https://www.nuget.org/packages/jslinq ...
- Java-Web 用html和css写一个EasyMall注册界面
要求: html代码: <!DOCTYPE html> <html> <head> <title>EasyMall注册页面</title> ...
- Java 学习思路
内容中包含 base64string 图片造成字符过多,拒绝显示
- Golang后台开发初体验
转自:http://blog.csdn.net/cszhouwei/article/details/37740277 补充反馈 slice 既然聊到slice,就不得不提它的近亲array,这里不太想 ...
- C# mysql 连接Apache Doris
前提: 安装mysql odbc驱动程序,目前只不支持8.0的最新版本驱动,个人使用的是5.1.12的驱动(不支持5.2以上版本),下载地址为: x64: https://cdn.mysql.com ...
- yum安装cacti
环境: centos 6.5 -x64 cacti-0.8.7e.tar.gz mysql yum安装即可 yum服务使用centos自带的就行.如果是红帽请自行解决yum.本文不赘述. **注意:同 ...
- mysql迁移之巨大数据量快速迁移方案
mysql迁移之巨大数据量快速迁移方案-增量备份及恢复 --chenjianwen 一.前言: 当mysql库的大小达到几十个G或者上百G,迁移起来是一件非常费事的事情,业务中断,导出导入耗费大量的时 ...
- C语言指针的一些题目
1.将从键盘输入的每个单词的第一个字母转换成大写字母输入时各单词以空格隔开,用“.”结束输入 解体思路: 把输入的字符存入字符数组中直到输入".",然后调用函数,把字符串的第一个 ...
- Gitlab 社区版安装部署和维护指南
因为我的个人网站 restran.net 已经启用,博客园的内容已经不再更新.这篇文章是在 Gitlab 7.4 的环境下配置的,相关内容可能已经过时. 后续做了一次迁移,将 Gitlab 升级到了 ...