热搜词
Sketch设计稿标注必装神器Marketch


提取码:i0le




据说sketch没有一个一键标注+一键切片的工具,所以一位未知的设计师?程序猿?设计了一个一键导出工具,它可以实现以下几个功能:


  • 动态标注

  • 单位转换

  • 动态切图


显示效果如下:


Sketch设计稿标注必装神器Marketch


Marketch,它可以帮设计师减负,免去标注的烦恼,程序可以通过内置的页面查看所有要素的布局参数,甚至是css代码;反观虽然Assistor Ps已经免费,但是那是PS的玩意,而且是有工作量的,优点就是StoryBoard看起来更高大上;


设想下有了这个我们其实可以做很多,可以生成html动画,可以根据位置参数动态生成REACT模式的全部UI代码,对!目的就是把工作量都推给设计,然后我们前端程序就可以开开心心的写几段REDUX(业务流),封装业务组件,做些高端的事情,剩下的就等后端的服务就好了。


用法


官网并没有一个详细的使用说明,比如说怎么导出SVG,如何过滤StoryBoard,如何设置要导出的切片等等;


安装


安装就是点击文件夹下面的黄钻石图标即可


查看是否安装成功


Sketch设计稿标注必装神器Marketch



使用


  • 运行插件plugin->marketch

  • 命名并导出

  • 将zip解压,运行html文件,在浏览器里查看效果



隐藏buff


导出切片

Sketch设计稿标注必装神器Marketch


导出SVG格式

Sketch设计稿标注必装神器Marketch


切片不能包含文字,需转换为路径(包含会过滤掉)

Sketch设计稿标注必装神器Marketch


'-'代表不导出该画板


作者:appea

链接:http://www.jianshu.com/p/d0bc8b365374





关注微信公众号图翼(tuyiyi_com),定时推送,福利互动精彩多多