: Is there anyway to convert all texts to outlines in Sketch App? I was using Sketch to make a cover photo, and there are many words in it. I have to convert every text to online, so I have

@Becky351

Above answer is not working for sketch 3.8 and above. It gives fills().addNewStylePart is undefined error on line 17 while running it as custom script. While searching on the internet i found that things have been changed for addNewStylePart. In the past, if you wanted to add a new fill, border or shadow to a layer you'd do:

layer.style().fills().addNewStylePart()


Starting with Sketch 3.8, the way to do that now is:

layer.style().addStylePartOfType(0) // To add a new fill


For more details see this source

Final working script looks like:

(function(){
function convertToOutlines(layer) {
if(!layer.isKindOfClass(MSTextLayer)) return;

var path=layer.bezierPathWithTransforms(); // Get text layers' outline as NSBezierPath.

var parent=layer.parentGroup();
var shape=MSShapeGroup.shapeWithBezierPath(path); // Create a vector shape with the outline.

// Set the style previously used in text layer.
shape.style = layer.style();

// If text layer doesn't have a fill style, we create it with the color used for the text.
var style=shape.style();
if(!style.fill()) {
var fill=style.addStylePartOfType(0);
fill.color = MSColor.colorWithNSColor(layer.style().textStyle().attributes().NSColor);
}

// Copy name and selection status.
var isSelected=layer.isSelected();
shape.name = layer.name();
shape.setIsSelected(isSelected);

// Remove text layer.
parent.removeLayer(layer);

// Add a newly created shape to the text layers' parent group.
parent.addLayers([shape]);

return shape;
}

var doc = context.document;
var page = [doc currentPage];
var layers = page.children();
for (var i = 0; i < layers.count(); i++) {
var layer = layers.objectAtIndex(i);
if(layer) {
var vectorizedTextLayer=convertToOutlines(layer);
print(vectorizedTextLayer);
}
}
})();

Vote Up Vote Down

@Shelton719

Here is my approach.
I found sketch plugin which converts text layer to outlines, but it converts only selected text layer.
I modified it so it converts all text layers on current page.
Here is instructions, for instance we have photo with several text layers on in:


Go to menu select Plugins > Custom Plugin... Text area will appear, copy paste this code:

(function(){
function convertToOutlines(layer) {
if(!layer.isKindOfClass(MSTextLayer)) return;

var path=layer.bezierPathWithTransforms(); // Get text layers' outline as NSBezierPath.

var parent=layer.parentGroup();
var shape=MSShapeGroup.shapeWithBezierPath(path); // Create a vector shape with the outline.

// Set the style previously used in text layer.
shape.style = layer.style();

// If text layer doesn't have a fill style, we create it with the color used for the text.
var style=shape.style();
if(!style.fill()) {
var fill=style.fills().addNewStylePart();
fill.color = MSColor.colorWithNSColor(layer.style().textStyle().attributes().NSColor);
}

// Copy name and selection status.
var isSelected=layer.isSelected();
shape.name = layer.name();
shape.setIsSelected(isSelected);

// Remove text layer.
parent.removeLayer(layer);

// Add a newly created shape to the text layers' parent group.
parent.addLayers([shape]);

return shape;
}

var doc = context.document;
var page = [doc currentPage];
var layers = page.children();
for (var i = 0; i < layers.count(); i++) {
var layer = layers.objectAtIndex(i);
if(layer) {
var vectorizedTextLayer=convertToOutlines(layer);
print(vectorizedTextLayer);
}
}
})();


It should look like this, there you can save it and run it:


After running the script all text layers becomes outlined:


Github repository of the plugin: github.com/zholdas/Texts-to-Outlines
Initial sketch plugin, my is based on github.com/turbobabr/Sketch-Plugins-Cookbook/blob/master/Samples/Convert%20Text%20Layer%20to%20Outlines.sketchplugin

Vote Up Vote Down