一、介绍
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\nStyleguide \n\n\n";// 根据属性分类并生成文档
html += "\nColors
\n
- \n";
// ...
html += "
\n
原创文章，作者：IHNHI，如若转载，请注明出处：https://www.506064.com/n/334814.html
微信扫一扫 
支付宝扫一扫 