Importing & exporting

With Sketch you can easily export presets, slices, export CSS and SVG code from any browser, and import other files.

Importing images

The quickest way to import files into Sketch is to drag and drop them onto the dock icon or directly onto the Canvas. You can import:

• PNG, JPG, GIF, TIFF and WebP bitmap images
• Figma files (.fig)
• SVG files
• SVG code (copy the code and paste to create a layer)
• PDF documents (each page will be imported as its own Artboard)
• AI and PSD files (limited support, only as a flattened layer)

Exporting Artboards and assets

Related course

Exporting in the Mac app

Watch lesson

To export Artboards or assets in different sizes or formats (and allow others to export assets from the web app), select them and click on the Make Exportable panel at the bottom of the Inspector. Then, press the Export Selected button.

Alternatively, choose File > Export in the Menu Bar — or press ⇧⌘E to bring up the Export dialog. Select the items you want to export, then click Export to open the MacOS save dialog.

Once Sketch has exported your assets, you’ll see an X Files successfully exported confirmation message at the bottom of the Canvas, where X is the number of created files. If you export just a single file, you’ll see its filename instead.

To export one or more layers as PNGs, select and drag them from the Layer List to your desktop (remember to make them exportable via the Inspector first), or select your layers and press ⌘E. To export layers as PDFs, press and hold ⌥ before dragging your layers.

You can copy any layer or Artboard and paste it directly into another app as an image. If the application you’re pasting into supports vector data, then your pasted layer will stay as a vector that you can safely scale up. If the app doesn’t support vector data, then Sketch will paste your layer at 2x the resolution.

Finally, you can export a PDF with all of your Artboards by choosing File > Export Artboards to PDF in the Menu Bar. You can choose which order Artboards export in via Settings > Layers.

If you want to download assets and inspect designs from any browser, head to our developer handoff documentation.

File formats for exporting

Bitmap

Bitmap images are flattened versions of anything you export in the Mac app, so they’ll open in other apps as a single layer. Sketch can export to PNG, JPG, TIFF and WebP.

Depending on the file format you choose, you may also see further export options:

• Save for the web: Strips out additional file data from some images, such as EXIF metadata and color profiles.
• Interlace PNG: On the web, interlaced PNGs will load at their full size as soon as possible and download more data until they reach full quality.
• Progressive JPG: Similar to interlaced PNG, Progressive JPGs are blurry when they start loading and gradually become sharper.
• Quality: For JPG and WebP images, lower quality images will have a smaller file size.

Vector

Vector image formats preserve layers and paths, so they’re easy to edit and scale infinitely. Sketch supports SVG, PDF and EPS vector formats.

Printing Artboards or slices

Choose File > Print and select the Artboards you want to print. If you don’t have any Artboards yet, you can print slices instead.

Using export presets

The Mac app exports everything as a PNG at its actual size (1x) by default, but you can assign different export settings from the Export Presets panel in the Inspector:

1. Size — Select a size from the drop-down menu, or create your own by typing directly into the Size field. You can scale up (2x, 3x, etc.) and down (0.5x, 0.25x) infinitely, or define a specific height or width in pixels (128h or 128w, respectively).
2. Prefix/Suffix — If you’re exporting the same image at different scales, you can add a prefix or suffix to differentiate between each of them using the Prefix/Suffix dropdown, and add custom text in the filename field.
3. Format — Pick a file format from the drop-down menu.
4. Remove Preset — Click the X to remove an export preset.
5. Add Preset — Click the + to add another preset for this layer to your export settings.
6. Preset Sets — Click the to choose a set of pre-defined presets. You can also create new sets of presets and remove them from here.
7. Create a Slice — Click the to create a slice directly on the layer you’ve selected with the export presets you’ve set.
8. Export Selected — Click to export a particular layer using the presets above.
9. Preview — Shows you how your layer will look when you export it. You can also drag and drop this directly onto your desktop or into another app for a quick export.
10. Sharing — Click for standard options to share via Mail, Messages, AirDrop, etc.
11. Trim transparent pixels — Depending on your selection, you can remove transparent pixels that surround content in groups or slices that you export.

Using slices

Slices are a type of layer you can draw on your Canvas that will export anything within them as an image. You can select, resize, move, hide, and group slices just like other layers.

Inserting slices

Choose Insert > Slice, or press S. Then, click and drag anywhere on your Canvas to draw a new slice or click on any layer to create a slice around it.

As with other layers, you can set multiple export presets for slices.

Customizing slices

When you select a slice you’ll find a few additional options in the Inspector.

Checking Trim Transparent Pixels will remove any empty pixels around the edges of your slice’s content.

If you place a slice within a group, checking Export Group Contents Only will make sure that the export only includes content from within that slice’s group.

Finally, you can check Background Color and choose a color to apply a background color to your slice exports.

Exporting CSS and SVG code

Select one or more layers in your document, Control-click and choose Copy CSS Attributes to copy the style information to your clipboard as CSS code. Here’s an example of what a simple shape’s CSS looks like:

/* Rectangle: */
background: #6dd400;
border-radius: 5px;
/* Rectangle: */

Copying SVG code works in a similar way. Select a shape layer, control-click on it and choose Copy SVG Code.