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 out of symbols in Zeplin. 🤓

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 mark the layer(s) as 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.

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 of using symbols marked as exportable 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 developer have access to all assets with the correct size and format.

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/Camera becomes Camera . Here's how an exportable symbol instance 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.

For nested symbols, you can select other symbols as overrides. Here's a sample nested symbol (“cell/home”) where we use one of the icon symbols (“Camera”) above:

☝️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 (“Camera”) is already marked as exportable, you will not need to make the icon instance exportable again in the nested symbol (“cell/home”).

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 these 3 icons are now available for download in Zeplin:

Related articles: