Simple example Sketch plugin script to export layers into json data. This was an experiment. It's not pretty.
// Sketch export layers to json script | |
// This was hacked together for experimentation purposes, the code is ugly. | |
// logs: | |
// tail -f /var/log/system.log | grep Sketch | |
//I only later realized that there are methods to get the parent or children | |
//layers... oops. Seriously, I just threw this together. | |
function makeChildrenArray(layerGroup, dict, allLayers) { | |
// log("called makeChildrenArray for " + layerGroup) | |
// result = new Array() | |
for (var i = 0; i < layerGroup.layers().count(); i++) { | |
someLayer = layerGroup.layers().objectAtIndex(i) | |
if ([someLayer isKindOfClass:[MSShapePathLayer class]]) { | |
continue; | |
} | |
dict[someLayer] = layerGroup | |
allLayers.push(someLayer) | |
if ([someLayer isKindOfClass:[MSLayerGroup class]]) { | |
sub = makeChildrenArray(someLayer, dict, allLayers) | |
} | |
} | |
} | |
var onRun = function(context) { | |
var documentName = context.document.displayName(); | |
log('The current document is named: ' + documentName); | |
var selectedLayers = context.selection; | |
var selectedCount = selectedLayers.count(); | |
if (selectedCount == 0) { | |
log('No layers are selected.'); | |
} else { | |
// var layer = selectedLayers[0]; | |
log('Selected layer: ' + selectedLayers[0]); | |
var allLayersParents = {} | |
var allLayers = [] | |
makeChildrenArray(selectedLayers[0], allLayersParents, allLayers); | |
var layerInfo = {} | |
layerInfo["layers"] = [] | |
//add root layer | |
layerInfo["root"] = {} | |
layerInfo["root"]["descriptionKey"] = String(selectedLayers[0]) | |
layerInfo["root"]["name"] = "rootView" | |
//there must be a prettier way to extract these variables in javascript. | |
//feel free to enlighten me. | |
for (i = 0; i < allLayers.length; i++) { | |
var layer = allLayers[i]; | |
var info = {} | |
var frame = layer.rect() | |
info["frame"] = {} | |
info["frame"]["x"] = String(frame.origin.x.toString()); | |
info["frame"]["y"] = String(frame.origin.y); | |
info["frame"]["width"] = String(frame.size.width); | |
info["frame"]["height"] = String(frame.size.height); | |
info["type"] = String([layer class]) | |
info["name"] = String([layer name]) | |
info["isVisible"] = String([layer isVisible]) | |
info["descriptionKey"] = String([layer description]) | |
info["descriptionKeyParent"] = String(allLayersParents[layer]) | |
if ([layer isKindOfClass:[MSTextLayer class]]) { | |
info["text"] = {} | |
info["text"]["stringValue"] = String([layer stringValue]) | |
info["text"]["textAlignment"] = String([layer textAlignment]) | |
info["text"]["textColor"] = String([layer textColor]) | |
info["text"]["fontSize"] = String([layer fontSize]) | |
info["text"]["fontPostscriptName"] = String([layer fontPostscriptName]) | |
} | |
if ([layer isKindOfClass:[MSStyleBorder class]]) { | |
info["border"] = {} | |
info["border"]["position"] = String([layer position]) | |
info["border"]["thickness"] = String([layer thickness]) | |
info["border"]["fillType"] = String([layer fillType]) | |
info["border"]["gradient"] = String([layer gradient]) | |
info["border"]["isEnabled"] = String([layer isEnabled]) | |
} | |
if ([layer isKindOfClass:[MSStyleFill class]]) { | |
info["fill"] = {} | |
info["fill"]["fillType"] = String([layer fillType]) | |
info["fill"]["colorGeneric"] = String([layer colorGeneric]) | |
info["fill"]["image"] = String([layer image]) | |
info["fill"]["noiseIntensity"] = String([layer noiseIntensity]) | |
info["fill"]["isEnabled"] = String([layer isEnabled]) | |
} | |
if ([layer isKindOfClass:[MSStyleInnerShadow class]]) { | |
info["innerShadow"] = {} | |
info["innerShadow"]["offsetX"] = String([layer offsetX]) | |
info["innerShadow"]["offsetY"] = String([layer offsetY]) | |
info["innerShadow"]["blurRadius"] = String([layer blurRadius]) | |
info["innerShadow"]["spread"] = String([layer spread]) | |
info["innerShadow"]["color"] = String([layer color]) | |
info["innerShadow"]["isEnabled"] = String([layer isEnabled]) | |
} | |
if ([layer isKindOfClass:[MSStyleInnerShadow class]]) { | |
info["shadow"] = {} | |
info["shadow"]["offsetX"] = String([layer offsetX]) | |
info["shadow"]["offsetY"] = String([layer offsetY]) | |
info["shadow"]["blurRadius"] = String([layer blurRadius]) | |
info["shadow"]["spread"] = String([layer spread]) | |
info["shadow"]["color"] = String([layer color]) | |
info["shadow"]["isEnabled"] = String([layer isEnabled]) | |
} | |
if (layer.style) { | |
if (layer.style().fills().array().count() > 0) { | |
// log("has fill: " + layer.style().fills().array()) | |
fill = layer.style().fills().array()[0] | |
log(fill) | |
info["style"] = {} | |
info["style"]["fill"] = {} | |
info["style"]["fill"]["fillType"] = String([fill fillType]) | |
info["style"]["fill"]["colorGeneric"] = String([fill colorGeneric]) | |
info["style"]["fill"]["isEnabled"] = String([fill isEnabled]) | |
} | |
if (layer.style().borders().array().count() > 0) { | |
// log("has fill: " + layer.style().fills().array()) | |
border = layer.style().borders().array()[0] | |
log(border) | |
if (!("style" in info)) { | |
info["style"] = {} | |
log("added style") | |
} | |
if (!("border" in info["style"])) { | |
info["style"]["border"] = {} | |
log("added style border") | |
} | |
info["style"]["border"]["fillType"] = String([border fillType]) | |
info["style"]["border"]["position"] = String([border position]) | |
info["style"]["border"]["thickness"] = String([border thickness]) | |
info["style"]["border"]["colorGeneric"] = String([border colorGeneric]) | |
info["style"]["border"]["isEnabled"] = String([border isEnabled]) | |
} | |
} | |
layerInfo["layers"].push(info) | |
} | |
var someString = [NSString stringWithFormat:"%@", JSON.stringify(layerInfo, null, 2)], | |
filePath = "/Users/"+ NSUserName() +"/Desktop/layerInfo.json"; | |
[someString writeToFile:filePath atomically:true encoding:NSUTF8StringEncoding error:nil]; | |
}; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment