Sketch Measure——一键搞定产品页面标注

安装

1. 下载安装包
2. 双击 Sketch Measure.sketchplugin 完成安装

工具栏

一个集成了所有功能图标的工具栏，可以方便操作每一个功能

执行 Plugin > Sketch Measure > Toolbar 或使用快捷键 control ⌃ + shift ⇧ + B

标注尺寸

用于标注一些图层的宽度和高度

1. 在 Sketch 中选中一个或多个层

点击工具栏上的 尺寸 按钮或使用快捷键 control ⌃ + shift ⇧ + 2

对于宽度和高度，如果你想分别单独标注以及设置显示方式

可以在按住 alt ⌥ 键的同时点击工具栏上的 尺寸 按钮

 

设置切图

快速设置层导出选项的预设和 规范导出 切片规格，例如下图导出安卓资源

规范查看器

你可以使用 Safari 9+ 或 Google Chrome 来查看, 导出的规范基于 HTML 5、CSS 3 和 Javascript 呈现

• 选中一个层并悬停在层上来测量和获得间距
• 点击位于规范查看器界面右侧属性检查器的颜色区域可改变颜色格式
• 使用 command ⌘ + + 和 command ⌘ + - 来缩放画布
• 摁住键盘空格键, 同时鼠标拖拽画布可平移画布
• 切换备注开关可显示和隐藏备注

 

 

在线演示: http://utom.design/news/

项目地址: https://github.com/utom/sketch-measure