How to Export Assets and Slices in Sketch for Development

Edited 1 month ago by ExtremeHow Editorial Team

SketchExportAssetsSlicesDevelopmentWeb DesignMobileResourcesTools

Sketch is a popular design tool used by UI/UX designers to create beautiful and functional designs. An essential feature of Sketch is its ability to export assets and slices, which is crucial for front-end developers to implement designs into functional web or mobile apps. This detailed guide aims to provide in-depth information on how to export assets and slices in Sketch for development. We'll cover the basics, and then discuss more advanced topics, ensuring you have all the information you need for successful asset exports.

Importance of export assets

Before diving into the how-to, it's important to understand why exporting assets and slices is crucial in the design-to-development workflow. Assets can include icons, images, buttons, and other graphical elements that make up the visual part of a digital product. Exporting these elements in the right format and resolution ensures that developers can seamlessly implement them into the project, maintaining consistency and quality.

Setting up your Sketch file

Before you can export assets, you need to make sure your design file is well organized. This includes naming your layers accurately and grouping them logically. This step is not only helpful for you but also for your development team, as it provides clarity and reduces confusion.

Here are some basic guidelines for setting up your Sketch file:

• Name your layers: Each layer in your Sketch file should have a descriptive name. This makes it easier for developers to identify which property corresponds to which part of the code.
• Use groups: Group related layers together. For example, if you have a button with text, group them so they can be exported as a single unit if necessary.
• Organize pages: If your Sketch file has multiple screens, split it into multiple pages. This keeps your file clean and reduces scrolling.

Making slices

What are slices?

Slices in Sketch allow you to define specific areas of your design that you want to export. They can be tailored to your needs, ensuring only the necessary parts of your design are exported, minimizing file sizes and reducing the complexity of design handoffs.

How to make slices:

Creating slices in Sketch is very easy. Here is a simple step-by-step guide:

1. Select the Insert menu located at the top-left corner of the Sketch interface.
2. Select the Slice option from the dropdown menu.
3. Click and drag on the canvas to create a rectangle. This rectangle defines the boundaries of the slice. You can adjust its size by dragging its edges or entering specific dimensions in the right-hand Inspector panel.
4. Rename the slice by double-clicking its name in the Layers panel. A meaningful name will help distinguish the slice during export.

Export of assets

Once you have the slices set up or if you are exporting individual layers, you can proceed to export your asset. Exporting involves choosing the right format and resolution for your needs.

Choosing the right format:

The format you choose depends on how you want to use the asset. Here's a quick overview of the most common formats:

• PNG: Ideal for images that require transparency. It is a lossless format, which means it will not compromise image quality.
• JPG: Good for images without transparency and when file size is a consideration. However, it is lossy, which means some quality may be lost during compression.
• SVG: Best for vector images like logos and icons. SVG files are resolution-independent, which means they look clear at any size.
• PDF: Useful for documents and vector graphics. Like SVG, PDF can also be resolution-independent.

Stages of export of assets:

1. Select the layer or group of layers you want to export.
2. Find the Export option at the bottom of the right-hand Inspector panel.
3. Click the + button to add different scales and formats. For example, @2x or @3x for retina display.
4. Specify the format (e.g., PNG, JPG, SVG) based on your requirement.
5. Once you have added all the required export options, click the Export button.
6. Choose your desired destination folder, and Sketch will export the assets accordingly.

Advanced export options

Sketch offers some advanced options that can be used to customize and automate your export process.

Using Export Presets:

Sketch lets you create export presets. If you often export assets in the same configuration, these presets can save time. To create a preset:

1. Set the required export scale and format for any layers.
2. Click the gear icon next to Export Settings and select Create Preset.
3. Name your preset and it will be saved for future use.

Batch Export:

If you need to export multiple slices or layers at once, Sketch provides a batch export feature:

1. Press and hold the Shift key and select all the layers or slices you want to export.
2. Once selected, the export panel will display options for all selected items.
3. Configure your export options and click Export Selected.

Optimizing assets for developers

When exporting assets for development, optimizing them is important to ensure the best performance in your application:

Minimizing file size:

• Use PNG for assets that require transparency; otherwise, opt for JPG to reduce file size.
• Consider using SVG for scalable graphics, reducing the need for multiple resolution exports.

Using Developer Handoff:

Tools like Zeplin and Abstract can further bridge the gap between designers and developers. These platforms allow for a more seamless handoff by integrating directly with Sketch, providing the necessary attributes and measurements straight from the design files.

Working with exportable layers

Sketch offers a feature called Exportable Layers, which automates the export process for frequently used assets. Here's how you can make a layer exportable:

1. Select a layer or group.
2. Click the Make Exportable button below Layer Properties.
3. Add the required format and scale.
4. Whenever you update the design, the exportable layers will update accordingly, and will be ready for export at any time.

Conclusion

Exporting assets and slices from Sketch is a critical component of the design and development process. By understanding and using Sketch's export features effectively, you can ensure that your design elements are clear, clean, and fully prepared for development. Careful planning and organization at the beginning of your design process will save time and enhance collaboration with your development team. By taking advantage of Sketch's advanced export options, developers receive assets in the exact format and resolution they need, eliminating guesswork and ensuring a consistent transition from design to implementation.

With these guidelines and tips, you will be well-equipped to handle the export of assets and slices in Sketch and improve the efficiency and quality of your design handoffs.

  Share This Article

If you find anything wrong with the article content, you can request an update