marketch直接生成html,Marketch 用法

Marketch

简介

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

动态标注

单位转换

动态切图

显示效果如下：

一位设计🐵的模板

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

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

用法

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

閒來無事，閱讀了一下源碼，發現該軟件的規範用法如下，隊列要整齊。

安装

然后下载、安装

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

查看是否安装成功

安装插件成功

使用

运行插件plugin->marketch

命名并导出

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

隐藏buff

导出切片

机智的截图-01.png

这里slice可以随意命名，最好放置在组内底层，这样方便之后修改设计，放置在顶层不好选择下方的内容。

---来自机智的射叽师的友情提示

导出SVG格式

Paste_Image.png

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

Paste_Image.png

'-'代表不导出该画板