Sketch插件2.0,设计稿批注上线,让设计师从此告别切图!
什么?设计稿的批注总是铺天盖地?像这样???
或者
设计稿里的细节,工程师总来问,细节文档板式复杂不能修改??
不要怕,墨刀都懂你,墨刀的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 应用。因为盗版软件原因造成插件在安装、使用上的问题,墨刀一概不提供技术支持。
感谢大家对墨刀的厚爱,欢迎将此神器推荐给你的设计师朋友哦!