Sketch Measure V2.8.1-Sketch 59最新版 一键导出标注和切图插件

Sketch Measure V2.8.1-Sketch最新版59一键导出标注和切图插件

UI设计师标注切图神器

本次更新:

修复了标注备注后,导出出错的问题。完美兼容Sketch 59

Sketch Measure V2.8.1-Sketch 59最新版 一键导出标注和切图插件

安装

  1. 下载并解压 Sketch Measure.zip
  2. 双击 Sketch Measure.sketchplugin 完成安装

工具栏

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

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

 

标注区域

Sketch Measure V2.8.1-Sketch 59最新版 一键导出标注和切图插件

有时你可能需要标注一个区域以突出该层,而这在 Sketch Measure 中很容易实现

  1. 在 Sketch 中选中一个或多个层
  2. 点击工具栏上的 区域 按钮或使用快捷键 control  + shift  + 1

标注尺寸

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

  1. 在 Sketch 中选中一个或多个层
  2. 点击工具栏上的 尺寸 按钮或使用快捷键 control  + shift  + 2

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

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

Sketch Measure V2.8.1-Sketch 59最新版 一键导出标注和切图插件

标注间隔

任何层与画板之间的间距

  1. 选中在画板上的一个层或选中任意两个层
  2. 点击工具栏上的 间隔 按钮或使用快捷键 control  + shift  + 3

    如果你想分别单独显示顶部、右、底部或左的间距

    可以在按住 alt  键的同时点击工具栏上的 间隔 按钮

 

标注属性

标注图层或文本层的信息,例如填充颜色、边框颜色、不透明度字体和字号等

  1. 在 Sketch 中选中一个或多个层
  2. 点击工具栏上的 属性 按钮或使用快捷键 control  + shift  + 4

    如果你想分别单独标注任何属性

    可以在按住 alt  键的同时点击工具栏上的 属性 按钮

 

标注备注

在画板上标注一些备注,在规范导出的查看器中展示

 

  1. 插入文本层,键入一些文本
  2. 选中文本层
  3. 点击工具栏上的 备注 按钮或使用快捷键 control  + shift  + 5

设置切图

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

 

  1. 在 Sketch 中选中一个或多个层
  2. 点击工具栏上的 设置切图 按钮或使用快捷键 control  + shift  + S

    如果你想创建切片图层

    可以在按住 alt  键的同时点击工具栏上的 设置切图 按钮

 

颜色命名

设置颜色命名和导出 .xml 文件给开发者

  1. 点击工具栏上的 颜色命名 按钮或使用快捷键 control  + shift  + C
  2. 在 Sketch 中选中一个或多个图层或文本层
  3. 在第 1 步骤弹出的颜色管理对话框界面中点击 + 按钮

    如果你想编辑颜色命名

    在对话框界面中双击颜色项目即可

Sketch Measure V2.8.1-Sketch 59最新版 一键导出标注和切图插件

规范导出

一键自动生成 HTML 页面,离线下检查所有设计细节,包括 CSS 样式。

  1. 在 Sketch 中选中一些画板
  2. 点击工具栏上的 规范导出 按钮或使用快捷键 control  + shift  + E

    如果你创建一个 HTML 文件一个画板,请取消选中“高级模式”

 

规范查看器

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

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

Sketch Measure V2.8.1-Sketch 59最新版 一键导出标注和切图插件

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

注意事项

第一次执行上述操作会弹出界面倍率和单位选择对话框

Sketch Measure V2.8.1-Sketch 59最新版 一键导出标注和切图插件

选择的倍率和单位基于当前画板尺寸,如 Sketch 默认 iPhone 7 画板 375x667px 的倍数和单位分别为 1 和 px,同时 Sketch Measure 也内置了常用的倍率和单位,点击下拉菜单即可选择

Sketch Measure V2.8.1-Sketch 59最新版 一键导出标注和切图插件

 

@utom

未经允许不得转载:UI盟 » Sketch Measure V2.8.1-Sketch 59最新版 一键导出标注和切图插件
分享到:
赞(0) 打赏

评论19

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #13
    头像
    下载试用了,老板大大很贴心啊,里面还包括了新旧两个版本!之前跟新了Sketch版本至56.2版本导致插件无法导出设计图。然后找了半天发现了这个网站下载Measure V2.8.1后直接安装覆盖了原来的插件,还是不能导出(遇到组件模块就停止了),后面把之前的插件卸载干净了重启了一下电脑,再重新安装的就好了!👍
    wly2jzz2019-08-02 12:14:26回复
    • uiunion
      对的,卸载旧版,重新安装新版插件就可以正常导出了的。
      uiunion2019-08-02 14:42:18
  2. #12
    头像
    下载下来是空包?咋回事?
    shafashang882019-06-26 15:24:07回复
    • uiunion
      有疑问请联系 UI盟-小编QQ:1362062870 ------------或者加入UI盟-设计素材分享交流群-QQ群号:384150772
      uiunion2019-06-30 15:26:52
  3. #11
    头像
    MacOS10.15导不出来,有解决方法吗
    galaxyxx2019-06-18 19:25:06回复
  4. #10
    头像
    我用的sketch54 为什么用sketch Measure 2.7.7 在标注文字的时候,有的文字标注不上呢?
    du_xy292019-06-10 16:24:42回复
  5. #9
    头像
    55不行
    hanlichun2019-05-29 10:34:39回复
  6. #8
    头像
    sketch55的版本不能导出,只支持到54.1版本的
    rock8262019-05-22 15:57:25回复
  7. #7
    头像
    啊,可以了,原来是旧版本没有删除干净
    tina2019-05-14 10:27:57回复
    • 头像
      怎么把旧版本删除干净啊?
      duyuhui01272019-05-20 20:35:53
  8. #6
    头像
    依旧不能导出。。。。
    tina2019-05-14 10:26:01回复
  9. #5
    头像
    依旧无法导出
    niuniu2019-05-10 14:32:23回复
  10. #4
    头像
    依旧无法导出
    sakjksj2019-05-05 12:04:32回复
  11. #3
    头像
    还是不能导出啊
    y12233162019-03-25 17:00:09回复
    • uiunion
      很多盟友下载都是能正常使用的哦,如果还不行,建议下载UI盟网的最新版Sketch 53.2,完全卸载以前的版本,然后再安装插件,重启软件。如果还有疑问,欢迎加小编QQ:1362062870咨询。
      uiunion2019-04-02 12:39:42
  12. #2
    头像
    依旧无法导出+1
    zhoujing2019-03-21 18:11:37回复
    • uiunion
      很多盟友下载都是能正常使用的哦,如果还不行,建议下载UI盟网的最新版Sketch 53.2,完全卸载以前的版本,然后再安装插件,重启软件。如果还有疑问,欢迎加小编QQ:1362062870咨询。
      uiunion2019-04-02 12:39:34
  13. #1
    头像
    还是无法导出,2.8的,求解
    jerome2019-03-20 17:17:42回复
    • uiunion
      很多盟友下载都是能正常使用的哦,如果还不行,建议下载UI盟网的最新版Sketch 53.2,完全卸载以前的版本,然后再安装插件,重启软件。如果还有疑问,欢迎加小编QQ:1362062870咨询。
      uiunion2019-04-02 12:38:36

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏