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:

Instructions for importing and exporting files in Sketch
  • 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:

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

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.

Leave a Comment

Side Hustles That Actually Pay in 2026: 7 Realistic Options and the Tradeoffs to Know

Side Hustles That Actually Pay in 2026: 7 Realistic Options and the Tradeoffs to Know

Compare realistic side hustles for 2026 by startup cost, fees, flexibility, and income control, with current tax and scam guidance from official sources.

Remote Work Ergonomics in 2026: Upgrade Your Home Office Without Overbuying

Remote Work Ergonomics in 2026: Upgrade Your Home Office Without Overbuying

Upgrade your home office ergonomics with current OSHA and NIOSH guidance on chair fit, monitor height, laptop setup, lighting, and movement.

Why Emotional Intelligence Matters in Leadership—and How to Build It

Why Emotional Intelligence Matters in Leadership—and How to Build It

Learn why emotional intelligence matters in leadership, where it helps most, how to strengthen it, and how to tell whether your approach is working.

How to Transition to a Tech Career Without a Degree: A Results-First Roadmap for 2026

How to Transition to a Tech Career Without a Degree: A Results-First Roadmap for 2026

A practical roadmap for moving into tech without a degree: choose an accessible role, build job-ready skills, prove them with projects, and use hiring feedback to improve.

Building a Personal Brand on LinkedIn in 2026: What Still Works, What Changed, and What to Ignore

Building a Personal Brand on LinkedIn in 2026: What Still Works, What Changed, and What to Ignore

Build a credible LinkedIn personal brand in 2026 with current profile, content, newsletter, analytics, verification, and visibility guidance from LinkedIn.

Quiet Quitting vs. Quiet Firing in 2026: What’s Really Changing at Work

Quiet Quitting vs. Quiet Firing in 2026: What’s Really Changing at Work

Quiet quitting and quiet firing are catchy labels, not diagnoses. Learn what is verified, what depends on context, and what employees and managers can do next.

The Rise of the Fractional Executive: When Part-Time C-Suite Leadership Makes Sense

The Rise of the Fractional Executive: When Part-Time C-Suite Leadership Makes Sense

Fractional executives offer senior leadership without a full-time hire. Learn when the model works, what to ask, and the risks to manage.

How to Negotiate a Raise During Q4 Performance Reviews: A Practical 2026 Decision Guide

How to Negotiate a Raise During Q4 Performance Reviews: A Practical 2026 Decision Guide

Prepare a stronger Q4 raise request with current wage data, timing options, compensation tradeoffs, and scripts for yes, partial, or no outcomes.

6 High-Income Skills You Can Start Learning Before 2026 Ends

6 High-Income Skills You Can Start Learning Before 2026 Ends

Choose a high-income skill you can realistically start before 2026 ends, with current pay data, learning priorities, and a practical self-check.

Mastering the Hybrid Work Schedule: A Practical Framework That Actually Holds Up

Mastering the Hybrid Work Schedule: A Practical Framework That Actually Holds Up

Build a hybrid work schedule around tasks, team overlap, and measurable outcomes. See sample patterns, warning signs, and when to adjust your plan.