嬉皮士的日常sketchsketch

Sketch插件2.0,设计稿批注上线,让设计师从此告别切图!

2017-07-11  本文已影响177人  b71abc341dbc

什么?设计稿的批注总是铺天盖地?像这样???

或者

设计稿里的细节,工程师总来问,细节文档板式复杂不能修改??

不要怕,墨刀都懂你,墨刀的Sketch 插件(MockingBot for Sketch)2.0版本发布啦!本次就是为了解决你的设计稿细节标注问题而更新的。

你需要的是点击哪里,哪里显示的效果:

像是这样:

没错这种简洁完美的体验,墨刀就能马上给你:

来吧我们马上用起来!

Mac 设备的小伙伴们可以直接进入产品下载页下载插件。

墨刀 Sketch 插件是什么?

你指需要把Sketch的图导入墨刀,分享给前端工程师哥哥,他就可以在运行页面查看交互及页面关系,每个页面的标注信息,一应俱全。

简单来说这款插件可以将你在Sketch内,所选的 Artboard 上传至墨刀的某个应用里,在不影响已添加交互链接的情况下随时更新、覆盖原有设计稿。

设计师朋友们可以将设计稿统一提交至墨刀进行「交互设计」「图片管理」。开发者可以通过「开发者模式」,获取页面元素的各种标注信息,加速开发。

墨刀 Sketch 插件 v2.0 的使用

第一步:下载 MockingBot 插件,双击安装后需要重启 Sketch,重启后重新登录帐号插件才会生效。

第二步:选中某 Artboard 或 Layer 后,单击 Export to MockingBot,打开插件弹窗。

第三步:

输入墨刀帐号,

登录

后选择想要上传的「应用名称」,点击

上传

,完成设计稿导入。

注意:当前版本插件内不支持新建项目,所以新注册用户需要打开浏览器或者墨刀客户端,登录并新建应用后,才能进行上传操作。

第四步:打开「墨刀客户端」或「墨刀网页版」,登录同一帐号,对所上传的设计稿进行交互设计、重新排序等操作。

第五步:打开项目的演示页,开启「开发者模式」,点击页面中的元素,获取颜色、距离、坐标等信息,帮助开发快速研发产品。

请使用 Chrome 浏览器登录https://v3.modao.cc或客户端切换到新版,体验新版工作区及「开发者模式」。

具体功能说明

一、下图是墨刀 Sketch 插件的主要页面,在这个页面你可以:

筛选 个人/团队应用 列表——只显示当前帐号具备编辑权限的应用

快速搜索 应用名称——在右侧搜索栏输入应用名称,快速定位

登出 / 刷新列表——单击右上角个人头像刷新当前列表或登出帐号

二、上传的设计稿会以 Artboard 为单位在「墨刀工作区」创建不同页面:

页面顺序目前以 Artboard 从左到右排列,新增页面会处于应用的页面列表底部依次创建。

页面名称与 Artboard 命名一致,可在 Sketch 或 墨刀中修改页面名称

三、上传更新版设计稿到原项目(已包含此 Artboard 的应用),会自动替换并覆盖原有设计稿,设计稿上交互区域位置不变;反之,新设计稿会自动创建页面添加到工作区中。

四、注意:

需要至少选中一个 Artboard 才可进行上传操作;

需要在「墨刀客户端」「网页版」中创建项目;

已上传成功的设计稿不可「撤销」或「回滚版本」。

版本迭代计划:

快速导入及更新 Sketch 设计稿至墨刀 √

收集设计稿中参数信息,引入测距功能,开发者在原型上可查看所有控件参数——包括颜色、尺寸、边距等信息 √

在插件中新建项目

保留分层数据,让设计师完成更精细化的交互原型

关于下载

Sketch 插件支持 OS X 10.10 + Sketch 39 及以上版本。

Sketch 是 Mac 下的桌面端应用,用于矢量图的绘制及设计,是设计师好帮手。MockingBot for Sketch 插件可以说是 Mac 下的又一工作利器!

墨刀一如既往秉承大力支持正版软件的态度,请大家使用正版 Sketch 应用。因为盗版软件原因造成插件在安装、使用上的问题,墨刀一概不提供技术支持。

感谢大家对墨刀的厚爱,欢迎将此神器推荐给你的设计师朋友哦!

上一篇下一篇

猜你喜欢

热点阅读