一、介紹

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
原創文章，作者：IHNHI，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/334814.html