Smart work——以sketch导出标注为例

昨天看到某东的后台打开了一个html形式的产品文档，好奇怎么做的，自己用word的导航和超链接功能做了形式简单的prd。

axure可以将原型图导出为html，想着把sketch的prototyping直接导出一个html文件，最好包含js,css（想得很美好，很天真）

后来的确查到一个导出sketch标注的插件——master，找了很久的说明，最后还是官网的demo帮助了我。

 

启发就是：

一定要敢于有天真的想法——找工具——从官网找工具说明。

下一个问题是——能不能把页面直接转化为代码？

我的答案——代码根本不具维护性和可读性。

知乎答案——

作者：张某
链接：https://www.zhihu.com/question/32018683/answer/149380159
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
 

html样式这么多，就算有插件生成也不能直接发布到线上的，尤其是响应式的界面，所以目前来说，sketch的插件一般都是只生成简单的CSS样式（如下图）

所以，还是让视觉设计师按照既定的需求做出来页面，生成标注给到前端吧，如果需要部分动画效果，仅仅这一份标注文档又是不能满足的，难道还要找生成动画的插件吗？其实，一个有动画的html，给到前端只需要一份上图的标注Zip文件和一个principle做好的动画prd稿就ok了。

载扯远一点，一般的扁平化的图就不要切了，视觉做好之后将需要切的图导出SVG上传到iconfont就ok了，让前端自己调用，这样双方的效率都会提升。