Instructions for importing and exporting files in Sketch

Sketch graphics software provides a very convenient way of importing / exporting files. Do you know how to do it? Let's learn how to import & export files in Sketch.

Import the file into Sketch

The easiest way to import files into Sketch graphic software is to drag and drop them into canvas or dock icons. You can enter:

• Photos of PNG, JPG, TIFF and WebP bitmaps
• SVG and EPS files
• SVG Code (copy & paste code to create new layer)
• AI and PSD files (limited support, only as a flat layer)

Export file in Sketch

The fastest way to export your work from Sketch is to choose Share> Export ... in the menu or press ⌘+ ⇧+ Eto open the Export dialog box . Select the data you want to export, then click Export to open MacOS Save.

Sketch exports everything as PNG in real size (default 1x). To change these settings or export from 2 sizes or formats, you need to set the Export Presets in Inspector.

You can also select any layer in the Layer List and drag it to the desktop to export as PNG (or hold ⌥while dragging to export as PDF). Alternatively, you can select a class, then press ⌘+ E.

Finally, you can export a PDF document with all its Artboards by selecting File> Export Artboards to PDF …. You can choose the order of Artboards exports via Preferences.

How to create and use settings before exporting

To export a layer in a document in different sizes or formats, select that layer> click the Make Exportable panel at the bottom of the Inspector. You will see the pre-export settings here with a few options:

• Size : Choose a size from the drop-down menu or create your own by typing the number directly in the Size field. Feel free to increase (2x, 3x ...) or decrease (0.5x, 0.25x) the ratio or determine the specific height / width in pixels.
• Prefix / Suffix:  If you publish your work at different rates, you need to use the drop-down menu to select a prefix or suffix. You can customize them by typing in the text field before (prefix) or after (suffix) the ellipsis represents the file name.
• Format : Choose a format from the dropdown menu.
• Remove presets : Click Xto delete this export preset.
• Add presets : Click +to add other presets for this layer to the export settings.
• Preset Sets : Click the Preset button to select a set of presets. You can also create new Preset sets and remove them here.
• Create a layer : Click the knife icon to create a thin layer on the selected layer with predefined settings.
• Export Selected ... : Click this button to export the layer using the above settings.
• Preview : The preview window shows you how the layer will look when exported. You can also drag & drop it directly onto another desktop or app for quick export.
• Sharing : Another quick export option is to click the Sharing button for standard options to share via Mail, Messages, AirDrop ...

How to use Slice

Slice is a type of layer you can draw on a canvas that can export everything inside it as an image. You can select, resize, move, hide or group them together like other layers.

How to insert a slice?

Choose Insert> Slice or click S, then, click & drag anywhere on the canvas to draw a new slice. Alternatively, click on any layer to create a slice around it.

Tip: When creating a slice, give its descriptive name in the Layer List. Sketch will use it as the file name when exporting. If you include the / in the name, Sketch will use whatever is written before it as the folder name, everything behind is the file name in that folder.

Like other layers, you can set multiple output settings as slices.

Customizing slices

Slice has a few special options located at the Inspector. The Trim Transparent Pixels checkbox will delete any empty pixels in the slice around the edges of the content.

If you place a slice in the group, the Export Group Contents Only check box makes sure that any slice export only covers the contents of that slice group.

Check Background Color and select the background color for the slice.

How to export CSS and SVG code

Select from a layer that becomes in the document, Ctrl+ click and select Copy CSS Attributes to copy any style information of them as CSS code to the clipboard. For example, this is the CSS of a simple shape:

Copying the SVG code is similar. Select a shape layer, Ctrl + click on it, then choose Copy SVG Code .

Sketch file export format supported

• Bitmap: PNG, JPG, TIFF, WebP
• Vector: SVG, PDF, EPS

How to print Artboard or Slice

Choose File> Print> Click Artboard or Slice you want to print.

Above is a basic guide on how to import / export files in Sketch . Hope the article is helpful to you.