Marketch：Sketch设计稿到HTML的自动化转换工具
项目地址: https://gitcode.com/gh_mirrors/ma/marketch Marketch是一款专为Sketch设计师和前端开发者打造的自动化插件，能够将Sketch设计文件智能转换为HTML页面，并直接获取元素的测量值和CSS样式信息。
核心功能特性
智能设计稿转换
Marketch能够自动解析Sketch文件中的设计页面，生成结构清晰的HTML文件，让设计师和开发者能够快速获得对应的网页结构和样式代码。
精准样式提取
在生成的HTML页面中，用户可以直观查看每个设计元素的位置信息和完整的CSS样式属性，包括尺寸、颜色、字体等关键样式参数。
动态间距检测
当用户选择一个元素并悬停在另一个元素上时，系统会实时显示两者之间的精确间距，帮助设计师进行精准的布局调整和前端开发者实现完美对齐。
技术实现架构
双模块设计
Marketch采用双模块架构设计：
CocoaScript模块：负责通过Sketch官方API获取设计元素信息，并将数据存储为JSON格式文件。
前端显示模块：基于HTML、CSS和JavaScript构建，负责解析JSON数据并展示图层和图像信息。
主要文件结构
marketch.sketchplugin/
└── Contents/
└── Sketch/
├── checkupdate.cocoascript
├── export.cocoascript
├── index.html
├── manifest.json
├── util.cocoascript
└── zip.cocoascript
使用指南
安装方法
- 克隆项目仓库：
git clone https://gitcode.com/gh_mirrors/ma/marketch - 将marketch.sketchplugin文件复制到Sketch插件目录
- 重启Sketch即可使用
操作流程
- 在页面左上角选择需要转换的设计页面和画板
- 选中页面元素即可在右侧查看其位置和CSS样式信息
- 选中一个元素并悬停于另一个元素上，查看两者间距
注意事项
兼容性说明
该项目目前处于归档状态，最新更新版本为v1.0.24，主要针对Sketch v52 API的兼容性修复。用户在使用时需注意：
- 要求设计文件中必须包含画板才能正常工作
- 可能存在与较新版本Sketch的兼容性问题
- 建议在实际项目应用前进行充分的功能测试
特殊命名规则
- 使用"svg"前缀标记图层名称，可告知Marketch将该图层导出为SVG文件
- 使用"-"前缀标记页面或画板名称，可阻止其被导出
项目价值
尽管Marketch已停止维护，但其创新的设计理念和技术实现方案仍然具有重要的参考价值。该工具展示了如何通过深度集成设计工具API来实现设计稿到代码的自动化转换，为现代设计开发工作流提供了有益的思路和借鉴。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
