前言

最近在看 Sketch 设计稿标注插件，Sketch MeaXure 是其中比较经典的一款。

他是在多个版本的基础上迭代开发的，目前维护的仓库是：

注意：出场有 Claude Code

谱系

sketch 插件开发

最开始是

https://github.com/utom/sketch-measure

后续维护版本

https://github.com/qjebbs/sketch-meaxure

又没有维护了，因此后续有人 fork 了再继续维护

这个 fork 版本一开始在 GitHub

https://github.com/hubzy/sketch-meaxure

后面不知道为啥搬到了 gitee

https://gitee.com/hubzyy/sketch-meaxure

然后还有一个 fork 版本：

https://github.com/firsthubgit/sketch-meaxure

工程概述

Sketch MeaXure 是一个基于 TypeScript 开发的 Sketch 插件，用于设计规范标注和导出。该插件在原 Sketch Measure 基础上进行了优化升级，提供了更丰富的标注功能和更友好的导出体验。

主要目录结构

目录功能说明
src/主要源代码目录
src/meaxure/核心业务逻辑
src/meaxure/export/导出相关功能
src/meaxure/panels/面板管理
src/sketch/Sketch API 封装
src/webviewPanel/WebView 面板管理
ui/前端界面资源
resources/插件资源文件

技术特点

  • 使用 TypeScript 开发，类型安全
  • 采用 Sketch JavaScript API，兼容性良好
  • 模块化设计，功能职责清晰
  • 支持国际化 (中文/英文)
  • 提供丰富的快捷键支持

核心功能模块

  1. 标注功能: 提供区域、尺寸、间隔、属性、备注、坐标、切图等多种标注类型
  2. 导出功能: 支持高级模式和普通模式导出 HTML 规范文档
  3. 管理功能: 标注图层的显示/隐藏、锁定/解锁、清除等管理操作
  4. 设置功能: 提供插件配置和个性化设置
  5. 帮助功能: 重命名旧版标注、插件主页、意见反馈等

1. 整体架构流程图

2. 核心功能模块流程图

3. 标注功能详细流程

4. 导出功能详细流程

5. 数据处理流程

6. 用户交互流程

7. 技术架构层次

参考资料