You can now export your symbols from Sketch to the Components tab in the styleguide. The Components section will include your common user interface elements and show you which screens are using these components in the project.

After exporting your components to a styleguide, Zeplin will display the component details on the right panel once you select a component on a screen.

Exporting symbols work exactly the same as exporting artboards. Simply select a symbol or multiple symbols (which are usually located in the Symbols page in Sketch) and press Control + Command + E to begin the export process. 

Once you export symbols into Zeplin, they will be listed under the Components section in the styleguide.

☝️ If you make an update to a symbol or change the name to the symbol name in your original design file, you’ll need to re-export the symbol itself and the screens using this symbol to sync them in Zeplin.

Generating assets from components

If you'd like these symbols to be available as an asset, you need to make the master symbol exportable in Sketch. You can learn how to do this here: Exporting Assets from Symbols in Sketch

☝️ If you only mark the symbol instance as exportable, the asset will only be available within the screen and not in the Components section.

Related articles:

Did this answer your question?