Advertisement


Is there anyway to convert all texts to outlines in Sketch App?


Question

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 to open layer folders and select each text in it by myself.

Is there any faster way to convert all texts in one single step?

2015/09/08
1
5
9/8/2015 2:19:00 PM

Accepted Answer

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: enter image description here

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: enter image description here

After running the script all text layers becomes outlined: enter image description here

Github repository of the plugin: https://github.com/zholdas/Texts-to-Outlines

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

2015/09/09
3
9/9/2015 4:19:00 AM