Sketch Measure

Sketch Measure官网地址

Sketch Measure的官方网站入口为：http://utom.design/measure

Sketch Measure是什么？

Sketch Measure 是 UTOM Design 出品的一款 Sketch 插件，专门帮助 UI 和 UX 设计师自动生成设计标注与开发规格。它让设计师可以轻松地将设计稿中的间距、尺寸、颜色等细节转换成 CSS 样式和可交互的 HTML 页面，便于交付给前端开发人员。如果你平时在 Sketch 里手工标注切图，或者反复导出设计稿再逐个解释样式，这款工具可能会显著简化你的工作流。

Sketch Measure核心功能

• 离线查看规格：生成的规格文件可以直接在本地浏览器打开，不需要网络，适合离线环境或内部分享。 CSS
• 样式提取：在导出的页面中直接查看每个元素对应的 CSS 代码，开发人员可以快速复制使用
• 免费开源：项目在 GitHub 上开源，可免费下载安装，也方便团队根据需求修改和二次开发

1. 1 版本，持续维护中，兼容主流 Sketch 版本（兼容性需以实际测试为准）。

Sketch Measure使用教程

访问网站并下载：打开 UTOM Design 的 Sketch Measure 页面，点击「Download」获取最新版插件文件（.sketchplugin 格式）。 安装插件：双击下载的文件，Sketch 会自动识别并完成安装，在插件菜单中会出现 Measure 选项。 准备设计稿：在 Sketch 中打开你的设计文件，选中需要生成规格的画板或图层。 一键导出：点击 Sketch 菜单栏的 Plugins › Sketch Measure › Create Spec，或使用对应的快捷键，工具会自动生成 HTML 规格。 查看与分享：导出完成后，浏览器会打开本地生成的规格页面，你可以直接查看、截图或拷贝 CSS，也可以将整个文件夹发给开发同事。

易导航总结

Sketch Measure 是一款轻量级且实用的设计标注插件，对需要频繁进行设计交付的 Sketch 用户来说很有帮助。它完全免费开源，降低了额外开销，生成的规格页面清晰直观，开发人员上手几乎没有门槛。从页面信息看，它主要依赖本地导出，没有云端同步功能，适合个人或小团队直接使用。可能的局限在于仅支持 Sketch 软件，如果你同时使用 Figma 或 Adobe XD 等工具，需要寻找对应的替代方案。另外，插件在不同 Sketch 版本间的兼容性需要使用者自行验证，官方页面未提供详细的版本支持说明。综合来看，对于以 Sketch 为主的设计流程而言，它是一个值得尝试的效率工具。

首页截图