sketch2html/sketch2html

sketch plugin

sketch2html

reference

• Sketch api: https://developer.sketchapp.com/reference/api
• Sketch plugin: https://developer.sketchapp.com/guides
• Sketch headers: https://github.com/abynim/Sketch-Headers
• TensorFlow.js: https://js.tensorflow.org/api/0.13.3

开发说明

• npm i安装依赖
• npm run postinstall安装关联插件源码
• npm run dev自动侦听构建并同时输出console日志

步骤说明

• format解析源文件数据，分析图层数据形成树形结构数据
• flatten一维化树形结构，将图层元素平铺在平面上
• overlay根据层叠、z轴过滤出背景元素、边框元素
• edge分析主要图层元素矩形边，形成布局网格
• layoutai判断网格划分排列组合，形成类DOM的树形结构数据
• htmlcss和图像工程，拼合html最终结果