- Batch: You can batch export assets that are marked using Mark for Export option in the Property Inspector. To export multiple objects as a single asset, group the objects before export.
- Selected: You can select and export specific assets.
- All artboards: You can select all the artboards for export in a design project.
- After Effects: You can select the asset to export to After Effects.
Assets are design files required by the developers to re-create what you designed, using HTML/CSS/JS in a website, or native languages like Swift or Java in iOS and Android apps.
In general, the most common assets are bitmap images, icons, and background patterns that you can export in the following formats:
When you export assets as JPG, you can set the quality level of the exported JPG accordingly. Choose any of the percentage options in the Quality drop-down list, and against Export for, choose Design or Web.
JPGs are not converted to PDFs; raster images are imported as images and hence they seem to turn into PDFs.
When you export objects or artboards as SVG, you can set the visual styling to Presentation Attributes or Internal CSS.
- Presentation Attributes: Uses separate XML attributes for each individual style property on each SVG tag. This format is required to use SVG assets with Android Studio.
- Internal CSS: Uses a single style tag with CSS classes and shares the styling settings between objects with same styles leading to smaller file sizes.
When you select PNG, you can choose to export the assets on the following platforms:
- Design - The default option where your asset is exported to PNG at 1x resolution.
- Web - Assets are exported at 1x and 2x resolutions.
- iOS - Assets are exported at 1x, 2x, and 3x resolutions.
The default artboard sizes for various iOS devices assume that you are designing at 1x, so if you’ve used the defaults, leave your export at 1x. However, you can opt to design at 2x too by doubling the width and height of your artboard.
- Android - Design assets are optimized and exported for the following Android screen densities:
- ldpi - Low density (75%)
- mdpi - Medium density (100%)
- hdpi - High density (150%)
- xhdpi - Extra high density (200%)
- xxhdpi - Extra extra high density (300%)
- xxxhdpi - Extra extra extra high density (400%)
Click Import. To replace existing screens in Zeplin with the same name, select Replace screens with the same name. Zeplin adds it as a new version of that same screen, without losing your notes.
If you are experiencing issues when working with Zeplin in XD, check this article for solutions.
Are you facing issues with exporting assets? read this article to troubleshoot export related issues.