Spec Export 规范小技巧

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名
17753 40 136 2016-08-05

Spec Export 是 Sketch Measure 自动导出 HTML 离线标注的功能之一。

该功能从 2014 年 11 月开始第一个雏形版本诞生，到 2015 年第一个 beta 版本公布给大家，再到如今 2.0 Final 版本！已经不知道迭代了多少回？收集了多少反馈？摔过了多少坑？才在能看到这版全新改版的 Spec Export。


可以通过网站 ( http://utom.design/measure/ ) 或文章附件下载到最新 Sketch Measure 2.0


History Demo

What's new?

  • Sketch 39.1 组件特性：支持导出组件内真实内容；
  • UX/UI 改进：可以导出所有画板或某个 Page 的画板，预览界面改进；
  • 队列式导出：增加了进度条；减少大文件 crash；减少转菊花；
  • 快速切片：根据设计分辨率设置，快速的设置切片的倍率；
  • 并导出 Android/iOS 切图目录和格式；
  • 色彩命名：帮助研发定义色彩变量；
  • 其他：支持组件导出；支持中文简体；自定义单位；

How to?

Image title

Image title

Image title

Image title

Image title

Image title


Contributors:

最后感谢来自两位 Objective-C 大神的指导

全部评论：40条

  • 妞妞儿

    2018-04-18 10:52

    我不是苹果电脑，这个是不是不能用？

  • ashung

    2016-09-28 12:25

    @Utom manifest.json 没有 homepage，在插件管理中，右键菜单不出现 View “Sketch Measure” Documentation

  • ashung

    2016-09-28 11:40

    @Utom: 要把导出的标注，放在 服务器根目录，gh-page，或者本地临时运行一个网页服务，这样需要有 index.html 文件。导出时使用 非高级模式，不会有 index.html 。 可以考虑去掉非高级模式，然后可以选择是否在本地创建一个网页服务。

  • sansan126

    2016-09-27 14:30

    怎样才能用sketch measure输出一个指定大小的icon？例如我要切标签栏的四个icon，输出来的大小都要是16*16的。用sketch自带的切可以，可是用这个插件我就切不出来。求指教，搜索到现在没有答案。

  • Utom

    2016-09-22 17:05

    @ashung: - 切片工具: 已增加 ×××HDPI, 多了个交互操作, 按住 Option 按键点击小刀图标, 会生成 MSSliceLayer. - 自动生成文件夹, 你可以直接选择用同一个文件夹覆盖就行, 就只覆盖已有的内容. 不过 UI 交互还会修改, 可以提想法 - 高级模式和非高级模式, 我没太看明白. 有时间我再整.

  • ashung

    2016-09-19 13:02

    我在做一个与 GitLab CE 的整合，类似将规范放在github的gh-page分支，设计将生产的标注文件push到某个特定的分支，然后将 GitLab CE 所有的此特定分支都聚合到一个网页上。 遇到一个问题，导出时能不能去掉增自动生成一个文件夹的功能，和去掉高级功能的选项，默认就是高级功能。非高级功能下没有index文件.

  • ashung

    2016-09-19 13:01

    @Utom Android 切片工具预设里没有 x x x hdpi。

  • ui_luke

    2016-09-05 15:21

    能同时切出iOS和android的图吗？

  • ashung

    2016-08-22 12:39

    @Utom: slice.exportOptions().setLayerOptions(2); 谢谢。

  • Yolanda此糸

    2016-08-19 10:53

    U神，棒棒的，来支持下，辛苦了！

  • 一只肉卷子

    2016-08-19 10:44

  • Utom

    2016-08-18 21:20

    @ashung: check slice.exportOptions().layerOptions() (0 = export all layers, 2 = export group contents only)

  • ashung

    2016-08-16 17:35

    我之前用过代码创建多个切片，来实现导出时使用 Android 的文件夹结构在分组内的切片，但是没有找到代码中设置 Export Group Contents Only 的方法。

  • 回锅肉

    2016-08-16 15:26

    zeplin表示很忧伤

  • Condinstan

    2016-08-15 10:07

    支持大神 ，辛苦了

  • slient序

    2016-08-13 14:10

    @remolin: marketch吊炸天

  • DRR

    2016-08-12 17:17

    大大大大大大大大大大大大~~造福千万家~~~

  • 胡子勇哥

    2016-08-10 23:13

    么么哒 u 大宝

  • 神探飞机头

    2016-08-10 10:43

    刚刚还在想谁会把MS写的这么详细，看到U大就释然了

  • remolin

    2016-08-10 09:45

    试用了下，支持神器！但感觉还是不如阿里的marketch，当生成index文件后，marketch不需任何设置直接可以在网页中导出切图，连图都不用切了……可能是我还没用习惯吧

  • willing200

    2016-08-10 09:42

    这个跟marketch有什么区别？

  • AYH

    2016-08-08 12:00

    psd的源文件通过AI转换成pdf格式，用sketch打开，这时的文件和初始psd的文件有不小出入，图层、文字等等，大家知道怎么解决这个问题吗？

  • AYH

    2016-08-08 11:50

    有一个问题，我在sketch里设计好了一个页面(640*1136)，然后我用这个最新的插件设置了ios的分辨率，最后Spec Export，导出html页面，然后我再想把这个设计图用插件设置android分辨率的，就不出那个小弹窗了，怎么办？

  • Delacro

    2016-08-08 09:21

    已donate,感谢制作这么好的插件

  • 啊冉

    2016-08-05 17:56

    @啊冉: 好吧 39.1没问题

  • 啊冉

    2016-08-05 17:49

    sketch3.8.3 导出时软件闪退

  • 有志不在年糕

    2016-08-05 16:22

    safari打开h5有bug，左上角布局乱了。chrome是ok的。

  • emery

    2016-08-04 14:29

    还以为是中文版的avocode，赶紧下载了，结果不是

  • iamsuger

    2016-08-04 14:05

    很好很强大

  • iamsuger

    2016-08-04 14:03

    还有右边的切图看不到预览了，这样好吗？

  • 更多

更多作品

电脑版 反馈

Powered by © 2008- 2025 UI.CN

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票，快给你心仪的作品鼓励的一票。

投票