If you make a layer exportable in Sketch, Zeplin will generate the necessary assets (on different formats and scales) based on the platform and density you're working on. It's pretty simple. Though, there are a few tips and tricks that can help you get the most out symbols in Zeplin. ­čĄô

Making symbols exportable

Symbols are a great way to reuse icons throughout your design. If you make the symbols themselves exportable, the assets in Zeplin will be accessible anywhere you use them, even with overrides.

One of the biggest advantages of using symbols is that the assets will be exported with the transparent background. (Normally you'd have to use slices to accomplish this.) This is a great way to organize your reusable icons, so that developers will work with the correct size every time.

Similar to all other exportable layers, name of the symbol becomes the name of the asset in Zeplin. If you're using / to group your symbols, only the last part will be used:  /some/long/path/icCameraSelected  becomes icCameraSelected .

Here's how an exportable symbol instance looks like in Zeplin, in an iOS project:

Using overrides

In nested symbols, assets also work when overridden. Here's a sample nested symbol where we use one of the icon symbols above:

No need to make the icon instance exportable here because the icon symbol itself is already exportable.

While using this symbol in your designs, you can now override the icon with another one, from the right panel in Sketch.

With no additional effort, all the assets for these 3 icons should now be accessible in Zeplin. Here's how they look in an iOS project:

Hope these help, let us know if you have any issues or suggestions!

Related articles:

Did this answer your question?