Learn to export production-ready assets from Sketch in SVG, PNG, WebP, and PDF formats — with correct naming, density suffixes, and slice configuration for web and mobile development.
Exporting assets from Sketch correctly is a critical developer skill. Wrong formats, missing densities, or misnamed files create hours of rework. This lesson builds a systematic, repeatable export workflow you can apply to any Sketch file.
Select any layer, group, or artboard and scroll to the Export section at the bottom of the Inspector. Click + to add an export entry. Each entry specifies: scale multiplier (1x, 2x, 3x, or a custom value like 1.5x), suffix (blank for default, @2x for Retina), and format (PNG, JPEG, TIFF, WebP, SVG, PDF). Click 'Export [Name]' to save to disk. For icons and illustrations, always export at minimum 1x and 2x. Multiple export entries on one layer produce all variants in one click — configure them once and never re-export manually.
When layers overlap or you need a crop area that does not match any single layer's bounding box, use Slices. Press S (or Insert > Slice) and draw the exact area to export. Assign export formats to the Slice the same way as layers. Slices are useful for: background textures spanning multiple artboards, illustrations with unwanted whitespace in the bounding box, and composite exports combining multiple layers into one file. Name slices descriptively — the name becomes the exported filename.
1Slice use cases:
2 Background texture: slice over pattern tile, export as PNG @1x
3 Hero illustration: slice tightly cropped to artwork, export SVG
4 App screenshot: slice artboard viewport area, export PNG @2xFile naming drives build toolchain compatibility. iOS expects: icon.png, [email protected], [email protected]. Android expects: res/drawable-mdpi/icon.png, res/drawable-xxhdpi/icon.png. Web projects prefer icon.svg or icon.png / [email protected]. In Sketch, the suffix field controls what appears after the base name. Using '/' in a layer name creates export subdirectories when 'Use layer names as folder names' is enabled in preferences.
1Sketch export configuration for a web icon:
2 Layer name: icons/arrow-right
3 Export 1: 1x no-suffix SVG
4 Export 2: 1x no-suffix PNG
5 Export 3: 2x @2x PNG
6 Export 4: 3x @3x PNG
7
8Result files:
9 icons/arrow-right.svg
10 icons/arrow-right.png
11 icons/[email protected]
12 icons/[email protected]Sketch SVG exports are generally clean but contain unnecessary attributes, metadata, and redundant IDs. After export, run svgo (SVG Optimizer) to strip them. Sketch may export text as outlined paths when fonts are unavailable — check that 'Include Text as Vectors' is disabled in Sketch Preferences > Export if you need editable text in the SVG. For icon SVGs that will be inlined in HTML, remove the width and height attributes from the root SVG element and size them with CSS instead — this makes them responsive to their container.
1# Install svgo globally
2npm install -g svgo
3
4# Optimise an entire icons directory
5svgo --input=./exported-icons/ --output=./optimised-icons/ --recursive
6
7# Typical size reduction: 20-60%
8# Example: search.svg 4.2KB -> 1.1KBFor large icon sets, use File > Export to bulk export every layer with export settings configured. Select 'Layers' from the export type dropdown and Sketch processes all exportable layers at once. For CI/CD pipelines, the SketchTool CLI enables headless export from a shell script — integrate it into your build process to keep exported assets in sync with design file changes.
1# SketchTool CLI: export all artboards as PNG at 2x
2sketchTool export artboards design.sketch \
3 --output=./dist/images/ \
4 --formats=png \
5 --scales=2
6
7# Export specific page artboards
8sketchTool export artboards design.sketch \
9 --items=Dashboard,Settings \
10 --output=./screenshots/Your progress is saved in this browser, on this device only.