Currently, we support these image formats.

How to export an image asset?

Select a layer or a group of layers and hit the export button. It will open the “Export Assets” window for you. In there, you can set up multiple variants of the image you want to export, define the exported names or suffixes. 

TIP: You can just double click a vector or bitmap layer to export it. Or use the CMD/CTRL + S shortcut once you have it selected.

⚠️NOTE:  Avocode allows you export any layer as an image from Sketch, Adobe XD CC and Photoshop files. You (or your designers) don’t have to pre-set Exportables in Sketch, rename layers with special symbols like + * & or .png in Photoshop or mark for export  in Adobe XD). Everything (but bitmap layers) is fully rendered and therefore you have real access to all layers (that means hiding them, exporting and even scaling up to @4x when it comes to vector shapes).


Another way how to export an image is to right click on a layer - it will invoke a context menu where you can choose in which format you would like to export the layer. It is also possible to copy the SVG code directly for vector layers using the context menu.

Change image format

You can choose either PNG, JPEG, SVG, or WebP

If you right-click on a vector shape, you can also export its SVG code.

Change pixel density

The default pixel density is set by the “Design scale” option in the Design Settings. For example: if you set the “Design scale” to @2x, your images will be exported at @2x by default.
 
NOTE: Lossless upscaling is possible only for vector shapes. 

If there is a warning “We cannot correctly export the layer in this resolution”, it’s probably because you are trying to export a bitmap image at higher resolution than it was designed in. We are now able to scale only vector images and not bitmap images. If you would like to scale even bitmap images, please upvote it here

TIP: Make sure your design is design either in vectors or in the highest resolution you're trying to export. If you attempt to export bitmaps in higher resolution than the design pixel density allows, your assets will end up pixelated.


Image export for iOS projects

When you hit Export (or double click on a layer) you'll notice that there are already pre-defined 3 variants in 3 different resolutions - to save you time while building an app for different screens. Feel free to adjust the resolution and format fo these variants or delete or add new variants.

Image export for Android projects

When you hit Export (or double click on a layer) you'll notice that there are already pre-defined 3 variants in 3 different resolutions - to save you time while building an app for different screens. Feel free to adjust the resolution and format fo these variants or delete or add new variants.

Export a screenshot of the design

To export a screenshot of the entire design, make sure you haven't selected any layer (just click somewhere outside the design canvas). Then click on EXPORT SCREENSHOT in the left sidebar.


Learn more:

Did this answer your question?