Sketch MeaXure 智能标注插件完整指南让设计规范始终与画布同步【免费下载链接】sketch-meaxure项目地址: https://gitcode.com/gh_mirrors/sk/sketch-meaxureSketch MeaXure 是一款 Sketch 智能标注插件用 TypeScript 重写自经典的 Sketch Measure。它基于 Sketch JavaScript API 构建能自动读取画板中的图层属性生成尺寸、间距、颜色、字体等标注并把整个画板导出为一份可直接发给开发的 HTML 规范文档。对需要频繁做设计交付的团队来说它的价值不在于画几条标注线而在于让标注数据和设计源文件绑定减少改稿之后重新标注的重复劳动。一、安装从仓库到 Sketch 插件菜单使用前提Sketch 69.0 或更高版本macOS 10.14 以上。以构建源码为例安装路径如下克隆仓库git clone https://gitcode.com/gh_mirrors/sk/sketch-meaxure构建插件注意使用指定的 Node 版本否则依赖安装可能报错nvm use 16.14.2 npm install --ignore-scripts npm run build双击生成的sketch-meaxure.sketchplugin包Sketch 会自动完成安装重启 Sketch在插件菜单下确认出现 Sketch MeaXure 子菜单装好后菜单里能看到的命令就是插件的全部能力面6 个标注命令、Spec Export 导出、Toggle Hidden / Toggle Locked 管理、Settings 设置以及 Help 子菜单下的 Rename Old Markers。这些命令大多绑定了默认快捷键后面会逐一用到。二、第一次标注一个画板、三种输出打开一个含画板的 Sketch 文件按下面这个顺序走一遍10 分钟内就能拿到第一个可用的交付物点选一个画板内的图层按CtrlShift2Mark Sizes画板内出现该元素的尺寸标注选中 1 个或 2 个图层按CtrlShift3Mark Spacings自动画出与画板边缘及彼此之间的间距选中图层按CtrlShift4Mark Properties弹出颜色值、圆角、边框、字体等属性标注全部标完后按CtrlShiftESpec Export在导出面板勾选画板选择保存位置打开生成的 HTML 文件逐层查看标注结果确认无误后发给开发导出面板里有两个值得注意的选项画板排序按行、按列、按图层顺序、按名称字母支持反转以及按影响力区域导出只导出标注覆盖到的图层子树减少无关内容。导出的目录结构是HTML 主文件 assets 资源 preview 预览图整个文件夹拷走即可离线打开。完整快捷键速查均来自插件 manifest 的默认绑定功能快捷键备注叠加层标注 Mark OverlayCtrlShift1展示图层叠加关系尺寸标注 Mark SizesCtrlShift2元素宽高与位置间距标注 Mark SpacingsCtrlShift3需选中 1~2 个图层属性标注 Mark PropertiesCtrlShift4颜色、圆角、字体等注释 Mark NoteCtrlShift5手动补充设计说明坐标标注 Mark CoordinateCtrlShift6元素精确坐标导出规范 Spec ExportCtrlShiftE生成 HTML 文档显隐标注 Toggle HiddenCtrlShiftH批量隐藏/显示所有标记锁定标注 Toggle LockedCtrlShiftL防止误操作工具面板 ToolbarCtrlShiftB打开图形化操作面板三、标注如何跟着设计走这是 MeaXure 与手绘标注的本质区别值得展开说明。插件生成的每个标注都是一个 Sketch 原生图层组命名带#meaxure-前缀源码里统一管理逻辑见src/meaxure/manage.ts清场、显隐、锁定三个操作都是围绕这个前缀做的批量查找。标注的几何信息来自它所绑定的源图层的 frame当你在画布上拖动、缩放被标注的元素时相关标注的位置与数值会随之重算而不是留在那等下次手动清理。这带来三个日常操作习惯改稿前不必先删标注直接改改完检查一遍即可确认后的关键标注用CtrlShiftL整体锁定后续误操作不会破坏它们交付给开发后想隐藏标记CtrlShiftH一键全隐比逐个找图层快得多另外源码中有一个Rename Old Markers命令菜单路径插件 → Sketch MeaXure → Help → Rename Old Markers。如果你的文件里还有旧版 Sketch Measure 留下的标记MeaXure 无法识别它们的命名规范会出现能看但管理不了的状态隐藏、锁定、清除、导出都不生效运行一次该命令即可完成迁移。这是从旧版切过来最常见的坑建议装完先跑一遍。四、六类标注的使用边界六类标注不是并列的功能菜单实际使用频率差异很大。按项目经验排序尺寸 间距高频组合使用。尺寸标注回答这个元素多大间距标注回答它离别的元素多远。间距标注对选区数量有硬性要求1 个或 2 个图层选 1 个时以画板为参照系选 2 个时互为参照选多了会直接提示不执行。间距方向可以单独指定水平或垂直避免复杂画板上交叉干扰。属性标注中频。颜色、圆角、边框、阴影、字体一次列全适合设计系统维护场景。它读取的是图层的实际样式Tint 这类新特性也能正确解析——这是旧版 Measure 覆盖不到的部分。坐标标注低频但刚需。当开发按绝对定位实现时CtrlShift6给出的 x/y 值可直接抄用省去对照画板原点算偏移。叠加层标注特定场景。用于嵌套结构复杂、需要向协作方解释这个组里压了什么的评审场合。注释标注人工补充。其余五类都是自动生成的只有注释是纯手动的用来写自动读取不到的信息交互逻辑、边界条件、这里和旧版行为不同之类的上下文。一个实用组合容器层用叠加层标注说明结构 → 控件层用尺寸 间距 → 异常点用注释补充。三层信息密度递进比全画板打满标注的可读性好很多。五、团队配置单位、色值格式与画板顺序设置面板菜单 → Settings只有三个核心选项但每个都直接影响交付物观感而且设置是按文档存储的不同项目可以有不同的规范设计分辨率 scale画稿是 1x 还是 2x决定标注数值的换算基准。按 2x 画稿却忘了改这里是所有数值对不上投诉的第一来源单位 unitspx / pt / dp 等。iOS 项目选 ptAndroid 项目选 dpWeb 选 px开发收到的标注就不用自己做换算色值格式 format默认 HEX可切 RGB 等。团队内统一即可关键是别在同一个项目里混用画板导出顺序在每次导出时于面板内指定支持按行/列/图层顺序/字母序四种规则并可反转。按列排序适合多分辨率适配类页面同一界面横向铺开按图层顺序适合流程类页面。样式层面标注线的颜色、字号等参数集中在src/meaxure/meaxureStyles.ts维护。如果你的团队有强视觉规范比如统一标注线色为蓝色改这一个文件重新构建比在 Sketch 里手调图层样式可控得多。六、常见问题的排查路径标记无法隐藏/锁定/清除十有八九是旧版 Measure 的遗留标记运行 Help 子菜单下的 Rename Old Markers 迁移再重试。标注数值与设计稿对不上先核对 Settings 里的 scale 与画稿实际倍率是否一致再检查是否开启了按影响力区域计算src/meaxure/common/config.ts中 byInfluence 这个开关同时影响间距与导出嵌套图层的 frame 与 frameInfluence 数值并不相同。导出慢减少单次勾选的画板数量关闭高级模式exportOption先检查图层结构里是否有超大未打组的自由图层。快捷键无响应先在插件菜单里直接点命令确认插件本身正常再排查 Sketch 的快捷键冲突CtrlShift1~6容易与系统或其他插件撞车可在 Sketch 偏好设置中为 MeaXure 重新分配。Sketch 升级后插件失效这正是该项目的立项目标之一——用 TypeScript 加官方 JavaScript API 重写替代依赖私有接口的旧实现。确认插件包版本与当前 Sketch 匹配用最新版构建即可。七、适合谁以及边界在哪适合有固定设计交付流程的团队画板多、改稿频繁、需要反复向开发解释同一批页面的场景。标注随设计更新 HTML 文档化的组合能明显压缩改一版、标一遍、对一遍的循环成本。不适合纯个人、单页、交付一次的场景——手写几个文本框可能更快以及非 Sketch 工作流。该插件的所有能力都构建在 Sketch 图层模型之上导出物是 Sketch 生态内的 HTML 文档不会反向同步到其他设计工具。项目结构上标注引擎集中在src/meaxure/export/图层数据、切片、颜色、符号等各有独立模块UI 事件与渲染在ui/目录Sketch API 的封装层在src/sketch/。如果你要基于它做团队定制比如加一种自定义标注类型从 export 目录入手是最短路径。下一步建议挑一个正在交付的真实画板按第二节的流程完整走一遍导出把 HTML 发给一位开发同学再回头用第三节的锁定/显隐快捷键处理他的反馈。一轮真实协作下来你会清楚哪些标注类型用得上、哪些可以关掉——这比通读所有文档都有效。【免费下载链接】sketch-meaxure项目地址: https://gitcode.com/gh_mirrors/sk/sketch-meaxure创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考