Marketch
简介
据说sketch没有一个一键标注+一键切片的工具,所以一位未知的设计师?程序猿?设计了一个一键导出工具,它可以实现以下几个功能:
- 动态标注
- 单位转换
- 动态切图
显示效果如下:
一位设计🐵的模板
Marketch,它可以帮设计师减负,免去标注的烦恼,程序可以通过内置的页面查看所有要素的布局参数,甚至是css代码;反观虽然Assistor Ps已经免费,但是那是PS的玩意,而且是有工作量的,优点就是StoryBoard看起来更高大上;
设想下有了这个我们其实可以做很多,可以生成html动画,可以根据位置参数动态生成REACT模式的全部UI代码,对!目的就是把工作量都推给设计,然后我们前端程序就可以开开心心的写几段REDUX(业务流),封装业务组件,做些高端的事情,剩下的就等后端的服务就好了。
</br>
</br>
用法
官网并没有一个详细的使用说明,比如说怎么导出SVG,如何过滤StoryBoard,如何设置要导出的切片等等;
閒來無事,閱讀了一下源碼,發現該軟件的規範用法如下,隊列要整齊。
安装
- 然后下载、安装
<pre>安装就是点击文件夹下面的黄钻石图标即可</pre> -
查看是否安装成功
安装插件成功
使用
- 运行插件plugin->marketch
- 命名并导出
- 将zip解压,运行html文件,在浏览器里查看效果
</br>
</br>
隐藏buff
- 导出切片
机智的截图-01.png
这里slice可以随意命名,最好放置在组内底层,这样方便之后修改设计,放置在顶层不好选择下方的内容。
---来自机智的射叽师的友情提示
- 导出SVG格式
Paste_Image.png
- 切片不能包含文字,需转换为路径(包含会过滤掉)
Paste_Image.png
- '-'代表不导出该画板