All Collections
FAQs for Design
When Should I Mark Layers for Export?
When Should I Mark Layers for Export?

Getting image tags instead of div tags? Best practices for exporting images and components

Shira Westrich avatar
Written by Shira Westrich
Updated over a week ago

Why Should I Mark for Export?

By marking certain layers for export, designs will render better and developers will have an easier time making changes without requiring the original design file. Sometimes you may want to 'mark exportable' a group in your design that contains a bunch of connected images, like scattered confetti for example. This action flattens the group and exports fewer files.

Best Practices:

Assets (like icons) and shapes should be exported as SVG to keep their exported size to a minimum and allow developers to scale and resize these vectors as needed.

When exporting images, note that items with a transparent background should be marked exportable in a PNG format, whereas images with non-transparent backgrounds should be exported as JPGs, since JPGs are a smaller file size.

Not everything should be marked for export! Note that links, hover effects, and entrance animations may stop working if the Artboard/Group/Component is marked exportable.

Quality of Export

Defining the quality of any layer marked as exportable affects the file size significantly. Items at 1x or lower are much smaller than those listed for 2x or 3x on export. Therefore, be sure to maintain quality when exporting highly detailed layers, and use 2x or 3x when necessary, otherwise consider sticking with 1x so as to keep the file size to a minimum.

Image Compression

When you host your site with Anima, we automatically compress images to help speed up the page load. If you're exporting your design to host elsewhere, you'll want to consider compressing the images manually for the same effect.

Get involved in our Anima Community Forum!

New to Anima?

Learn More

Did this answer your question?