Marketch 用法

Marketch

简介

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

1. 动态标注
2. 单位转换
3. 动态切图

显示效果如下：

一位设计🐵的模板

Marketch,它可以帮设计师减负，免去标注的烦恼，程序可以通过内置的页面查看所有要素的布局参数，甚至是css代码；反观虽然Assistor Ps已经免费，但是那是PS的玩意，而且是有工作量的，优点就是StoryBoard看起来更高大上；
　　设想下有了这个我们其实可以做很多，可以生成html动画，可以根据位置参数动态生成REACT模式的全部UI代码，对！目的就是把工作量都推给设计，然后我们前端程序就可以开开心心的写几段REDUX（业务流）,封装业务组件，做些高端的事情，剩下的就等后端的服务就好了。
</br>
</br>

用法

官网并没有一个详细的使用说明，比如说怎么导出SVG，如何过滤StoryBoard，如何设置要导出的切片等等；
　　閒來無事，閱讀了一下源碼，發現該軟件的規範用法如下，隊列要整齊。

安装

1. 打开下面地址
   https://github.com/tudou527/marketch

2. 然后下载、安装
   <pre>安装就是点击文件夹下面的黄钻石图标即可</pre>

3. 查看是否安装成功

   
   安装插件成功

使用

1. 运行插件plugin->marketch
2. 命名并导出
3. 将zip解压，运行html文件，在浏览器里查看效果

</br>
</br>

---

隐藏buff

• 导出切片

机智的截图-01.png

这里slice可以随意命名，最好放置在组内底层，这样方便之后修改设计，放置在顶层不好选择下方的内容。
---来自机智的射叽师的友情提示

• 导出SVG格式

Paste_Image.png

• 切片不能包含文字，需转换为路径（包含会过滤掉）

Paste_Image.png

• '-'代表不导出该画板