Sketch.export¶

Provides support for exporting assets from sketch-documents. More…

Properties¶

Module settings¶

cleanBeforeExport: bool
mode: stringList
sketchtoolPath: path
workingDir: string

Export settings¶

background: string
formats: stringList
groupContentsOnly: bool
items: stringList
outputDir: string
overwrite: bool
saveForWeb: bool
scales: varList
trimmed: bool
useIdForName: bool

Detailed Description¶

This modules does all the hard job of exporting assets from a sketch document or several of those. It can be used in conjunction with SketchExport or separately with your custom products.

Most probably, you won't touch any of module settings except the exporting mode which defines what actually to export and can be used as following:

SketchExport {
    files: '*.sketch'
    Sketch.export.mode: 'pages'
}

or

SketchExport {
    files: '*.sketch'
    Sketch.export.mode: ['layers', 'artboards']
}

The export settings give you an ability to set properties for all modes at once. However, you can always override those for a specific mode using corresponding properties from auxiliary modules Sketch.layers, Sketch.artboards, Sketch.pages, and Sketch.preview.

More specific export settings always have the priority. For instance:

import qbs

SketchExport {
    name: 'sketch-assets'

    Sketch.export.modes: ['layers', 'pages']
    Sketch.export.formats: 'svg'

    // Overrides Sketch.export.formats for pages only
    Sketch.pages.formats: 'pdf'

    Group {
        files: 'one.sketch'
        // We don't export artboards, so this is ignored:
        Sketch.artboards.formats: ['webp', 'eps']

        // Layers are exported in SVG, pages – in PDF
    }

    Group {
        files: 'two.sketch'

        // Overrides Sketch.export.formats from the product
        Sketch.layers.formats: ['png', 'svg']

        // Overrides Sketch.pages.formats from the product
        Sketch.pages.formats: 'TIFF'

        // Layers are exported in PNG and SVG, pages – in TIFF
    }
}

Note on common properties

The auxiliary modules have some additional properties specific only to them, so check their documentation for details.

Note on 'preview' mode

The Sketch.preview module provides way less properties comparing to other aux modules. So, any properties set in Sketch.export will be ignored for preview mode if they do not exist in that module.

File Tags¶

Input¶

Tag	Auto-tagged patterns	Description
`sketch`	*.sketch	Sketch documents used as a source for exporting assets.

Output¶

Tag	Description
`sketch.export`	Every asset generated by this module is marked with this tag.
`png`, `jpg`, `tiff`, `webp`, `pdf`, `eps`, `svg`	Every exported asset is also marked by a tag that corresponds to its file extension.
`@1x`, `@2x`, `@3x`, `@4x`	Every exported asset is also marked by a tag that corresponds to its scale.
`@1x.9`, `@2x.9`, `@3x.9`, `@4x.9`	Every exported 9-patch asset is additionally tagged with that corresponds scale with `.9` suffix.

Intermediate¶

Tags used internally

Tag	Description
`sketch.export-list`	Text file that contains the list of absolute paths of all exported assets.

Property Documentation¶

`background`¶

Allows to set/override the background color to use when exporting slices. Replaces any background specified in the document.

Allowed values:

color literal ('#rgb', '#rgba', '#rrggbb', or '#rrggbbaa')

color name

List of all names

Name	Color	HEX
aliceblue		`#f0f8ff`
antiquewhite		`#faebd7`
aqua		`#00ffff`
aquamarine		`#7fffd4`
azure		`#f0ffff`
beige		`#f5f5dc`
bisque		`#ffe4c4`
black		`#000000`
blanchedalmond		`#ffebcd`
blue		`#0000ff`
blueviolet		`#8a2be2`
brown		`#a52a2a`
burlywood		`#deb887`
cadetblue		`#5f9ea0`
chartreuse		`#7fff00`
chocolate		`#d2691e`
coral		`#ff7f50`
cornflowerblue		`#6495ed`
cornsilk		`#fff8dc`
crimson		`#dc143c`
cyan		`#00ffff`
darkblue		`#00008b`
darkcyan		`#008b8b`
darkgoldenrod		`#b8860b`
darkgray		`#a9a9a9`
darkgreen		`#006400`
darkgrey		`#a9a9a9`
darkkhaki		`#bdb76b`
darkmagenta		`#8b008b`
darkolivegreen		`#556b2f`
darkorange		`#ff8c00`
darkorchid		`#9932cc`
darkred		`#8b0000`
darksalmon		`#e9967a`
darkseagreen		`#8fbc8f`
darkslateblue		`#483d8b`
darkslategray		`#2f4f4f`
darkslategrey		`#2f4f4f`
darkturquoise		`#00ced1`
darkviolet		`#9400d3`
deeppink		`#ff1493`
deepskyblue		`#00bfff`
dimgray		`#696969`
dimgrey		`#696969`
dodgerblue		`#1e90ff`
firebrick		`#b22222`
floralwhite		`#fffaf0`
forestgreen		`#228b22`
fuchsia		`#ff00ff`
gainsboro		`#dcdcdc`
ghostwhite		`#f8f8ff`
gold		`#ffd700`
goldenrod		`#daa520`
gray		`#808080`
green		`#008000`
greenyellow		`#adff2f`
grey		`#808080`
honeydew		`#f0fff0`
hotpink		`#ff69b4`
indianred		`#cd5c5c`
indigo		`#4b0082`
ivory		`#fffff0`
khaki		`#f0e68c`
lavender		`#e6e6fa`
lavenderblush		`#fff0f5`
lawngreen		`#7cfc00`
lemonchiffon		`#fffacd`
lightblue		`#add8e6`
lightcoral		`#f08080`
lightcyan		`#e0ffff`
lightgoldenrodyellow		`#fafad2`
lightgray		`#d3d3d3`
lightgreen		`#90ee90`
lightgrey		`#d3d3d3`
lightpink		`#ffb6c1`
lightsalmon		`#ffa07a`
lightseagreen		`#20b2aa`
lightskyblue		`#87cefa`
lightslategray		`#778899`
lightslategrey		`#778899`
lightsteelblue		`#b0c4de`
lightyellow		`#ffffe0`
lime		`#00ff00`
limegreen		`#32cd32`
linen		`#faf0e6`
magenta		`#ff00ff`
maroon		`#800000`
mediumaquamarine		`#66cdaa`
mediumblue		`#0000cd`
mediumorchid		`#ba55d3`
mediumpurple		`#9370db`
mediumseagreen		`#3cb371`
mediumslateblue		`#7b68ee`
mediumspringgreen		`#00fa9a`
mediumturquoise		`#48d1cc`
mediumvioletred		`#c71585`
midnightblue		`#191970`
mintcream		`#f5fffa`
mistyrose		`#ffe4e1`
moccasin		`#ffe4b5`
navajowhite		`#ffdead`
navy		`#000080`
oldlace		`#fdf5e6`
olive		`#808000`
olivedrab		`#6b8e23`
orange		`#ffa500`
orangered		`#ff4500`
orchid		`#da70d6`
palegoldenrod		`#eee8aa`
palegreen		`#98fb98`
paleturquoise		`#afeeee`
palevioletred		`#db7093`
papayawhip		`#ffefd5`
peachpuff		`#ffdab9`
peru		`#cd853f`
pink		`#ffc0cb`
plum		`#dda0dd`
powderblue		`#b0e0e6`
purple		`#800080`
red		`#ff0000`
rosybrown		`#bc8f8f`
royalblue		`#4169e1`
saddlebrown		`#8b4513`
salmon		`#fa8072`
sandybrown		`#f4a460`
seagreen		`#2e8b57`
seashell		`#fff5ee`
sienna		`#a0522d`
silver		`#c0c0c0`
skyblue		`#87ceeb`
slateblue		`#6a5acd`
slategray		`#708090`
slategrey		`#708090`
snow		`#fffafa`
springgreen		`#00ff7f`
steelblue		`#4682b4`
tan		`#d2b48c`
teal		`#008080`
thistle		`#d8bfd8`
tomato		`#ff6347`
turquoise		`#40e0d0`
violet		`#ee82ee`
wheat		`#f5deb3`
white		`#ffffff`
whitesmoke		`#f5f5f5`
yellow		`#ffff00`
yellowgreen		`#9acd32`

rgb/rgba function

For example: 'rgb(128, 0, 255)', 'rgba(50%, 0, 100%, 50%)'.
hsl/hsla function

For example: 'hsl(270deg, 100%, 50%)', 'hsla(270, 100, 50, 0.5)'

Default: undefined

`cleanBeforeExport`¶

Specifies whether to clean the output folder before each new export.

Default: true

`formats`¶

The format in which assets are generated. If you set this value, it will override your export presets in the documents.

Preview format

In the 'preview' mode, the images are always generated in PNG format.

Tip

If empty list is provided, then the default sketchtool's behavior is used. In 'layers' mode it generates assets according to the exporting presets set in documents. In other modes, it generates PNG by default.

Allowed values: 'png' | 'jpg' | 'tiff' | 'webp' | 'pdf' | 'eps' |'svg'

Default: []

`groupContentsOnly`¶

Export only layers that are contained within the group.

Default: false

`items`¶

List of artboard/slice names or IDs to export. You can retrieve the IDs from the metadata. If you specify this value, it will override the export presets defined in the document.

Tip

If empty list is provided, then the default sketchtool's behavior is used which is to generate assets for all exportable artboards/slices.

Default: []

`mode`¶

Gives an ability to choose what to export. You can specify either a single value or a list.

Allowed values: 'layers' | 'artboards' | 'pages' | 'preview'

Default: 'layers'

`outputDir`¶

If you set this property, the assets are exported to folder with this name relatively to workingDir. In other words, the resulting filename is prepended by outputDir/.

Default: undefined

`overwrite`¶

Set this to true to allow to overwrite existing files with newly generated once.

I couldn't make it work

I tried this parameter with the sketchtool, however, it had no influence. Maybe it doesn't work or maybe I did something wrong.

Default: false

`saveForWeb`¶

Export web-ready images. Setting this option to true strips out additional file data from some images, such as EXIF metadata and color profiles.

Default: false

`scales`¶

Scales to be used for exporting of assets. This allows you to scale pictures up (@2x, @3x, @4x, etc.) or down (@0.5x, @0.25x, etc.). You can provide a single value or a list. If you specify this value, it will override the export presets defined in the document.

Floating-point scaling factor

It appears that sketchtool allows to use floats only when scaling down, i.e. for \(0 < scale < 1\). If you try to set this property to something like 2.5, the fractional part is trancated.

Tip

If empty list is provided, then the default sketchtool's behavior is used: all assets are exported according to the presets defined in the document or as @1x.

Default: []

`sketchtoolPath`¶

The path to the sketchtool that will be used for exporting. Usually, there is no need to change this value.

Default: the binary from the first found Sketch.app installed in your system.

`trimmed`¶

Export images trimmed.

Default: false

`useIdForName`¶

Name exported images using their ID rather than their name.

You can also retrieve the IDs from the metadata.

Default: false

`workingDir`¶

Contains the path to the export working directory. Useful when you want to install generated files preserving the folder structure.

Sketch.export¶

Properties¶

Module settings¶

Export settings¶

Detailed Description¶

File Tags¶

Input¶

Output¶

Intermediate¶

Property Documentation¶

background¶

cleanBeforeExport¶

formats¶

groupContentsOnly¶

items¶

mode¶

outputDir¶

overwrite¶

saveForWeb¶

scales¶

sketchtoolPath¶

trimmed¶

useIdForName¶

workingDir¶

`background`¶

`cleanBeforeExport`¶

`formats`¶

`groupContentsOnly`¶

`items`¶

`mode`¶

`outputDir`¶

`overwrite`¶

`saveForWeb`¶

`scales`¶

`sketchtoolPath`¶

`trimmed`¶

`useIdForName`¶

`workingDir`¶