一、介绍

Sketch Measure是一个Sketch的插件，它可以帮助设计师轻松的完成标注和生成规范文档。Sketch是一款Mac平台上的设计工具，它的功能非常强大，而且非常受设计师的喜欢。Sketch Measure可以帮助设计师更加高效地完成标注，避免标注过程中出现的错误。同时，Sketch Measure还可以根据设计稿自动生成样式库文档，这对于团队协作和交付作品非常有用。

二、标注功能

Sketch Measure最主要的功能是帮助设计师完成标注。标注是设计交互的重要部分，它可以让开发人员更好的理解设计意图，从而更好的实现设计效果。而Sketch Measure可以帮助设计师轻松的完成标注。

在使用Sketch Measure进行标注时，我们只需要在设计稿中选中需要标注的元素，然后在Sketch Measure中点击“Add Spec”，就可以为这个元素生成标注。标注信息包括文字、颜色、边框信息等。同时，Sketch Measure还支持为多个元素批量标注，非常的方便。

除此之外，Sketch Measure还支持生成实时的标注预览，我们只需要点击预览按钮，就可以看到标注的效果，非常直观。

// 添加标注
function addSpec() {
  var sel = context.selection;
  var page = context.document.currentPage();
  var startingIdentifier = measureSpecs.length + 1;
  var endingIdentifier = startingIdentifier + sel.count() - 1;
  var objectKeys = $(sel).map(function(i, element) {
    var objectID = String(element.objectID());
    var layerName = element.name();
    var objectKey = objectID + ":" + layerName;
    return objectKey;
  }).toArray();
  
  var spec = {
    "class": "spec",
    "type": type,
    "objectKeys": objectKeys,
    "startingIdentifier": startingIdentifier,
    "endingIdentifier": endingIdentifier,
    "fillColor": "rgba(75, 75, 75, 0.1)",
    "strokeColor": "rgba(75, 75, 75, 1)",
    "strokeWeight": 1,
    "fontName": "HelveticaNeue-Bold",
    "fontSize": 10,
    "textColor": "rgba(75, 75, 75, 1)",
    "textAlign": "left",
    "strokeDash": []
  };
  measureSpecs.push(spec);
  update();
}

三、规范文档生成

Sketch设计稿中一般会包含很多组件，这些组件可能会有相同的颜色和字体等属性，对于前端开发人员来说，这些属性的规范化十分重要。Sketch Measure还提供了针对这种情况的解决方案。

Sketch Measure可以生成各种各样的格式的文档，比如HTML、CSS、JSON等，这些文档中包含了所有组件的属性信息，并且会根据属性名称来对组件进行分类，非常的方便。开发人员只需要访问这些文档，就可以了解到所有组件的规范信息，从而更好的实现设计效果。

// 根据组件生成规范文档
function generateStyleguide() {
  var page = context.document.currentPage();
  var artboards = page.artboards();
  var html = "\n\n\n\n\n\n";
  
  // 根据属性分类并生成文档
  html += "
  
\n
   
Colors
\n
   
\n";
  // ...
  html += "
   
\n
  
\n";
  html += "
  
\n
   
Text Styles
\n
   
\n";
  // ...
  html += "
   
\n
  
\n";
  html += "
  
\n
   
Layer Styles
\n
   
\n";
  // ...
  html += "
   
\n
  
\n";
  
  html += "\n