Symbols are a great way to reuse icons throughout your design. Here are a few tips and tricks that can help you get the most out of symbols in Zeplin. 🤓
Making symbols exportable
Just as you can export assets from an artboard, you can also export assets from symbols in Sketch to Zeplin. To do this, you will need to mark either the entire symbol layer or sub-layers as exportable.
Once you make the layer(s) exportable in Sketch and export it, Zeplin will generate the necessary assets on different formats and scales based on the platform and density you're working on.
Benefits of making a symbol exportable
One benefit of making a symbol exportable is that the asset will become available for download in any layer where it is being used, even as part of a nested symbol override.
Another advantage is that its assets will be exported with a transparent background. (Normally, when exporting assets from artboards, you'd need to use slices to accomplish this.)
Exporting assets from symbols is a great way to organize reusable icons and ensure that developers have access to all assets with the correct size and format.
Naming assets
Similar to how asset names are generated for exportable layers in Zeplin, the name of the asset in Zeplin comes from how the symbol is named on Sketch. For example, if the symbol was named “Camera” in Sketch, you can download the asset as “Camera.png” in Zeplin.
If you're using “/” to group your symbols, only the last part will be used: /some/long/path/Guides becomes Guides. Here's how an exportable symbol instance (Icons / Peach / Guides) is named in an iOS project on Zeplin:
To keep the full name and include groups as part of the asset name, you will need to enable this option in the Zeplin desktop menu: “Zeplin > Sketch Integration > Keep Grouped Symbol Names”
Using overrides in nested symbols
For nested symbols, you can select other symbols as overrides. Here's a sample nested symbol (Guide property) where we use one of the icon symbols (Icons / Time, Teflon):
With symbol overrides, you only need to mark the original symbol as exportable once since the asset will be available for download in all layers that contain the symbol. In other words, if the icon symbol (Icons / Time, Teflon) is already marked as exportable, you will not need to make the icon instance exportable again in the nested symbol (Guide property).
While using a nested symbol in your designs, you can switch out the icon with another symbol from the right panel in Sketch:
With no additional effort, all the assets for the following icons are now available for download in Zeplin:
