All Collections
Sketch Integration
Exporting components from Sketch
Exporting components from Sketch

Learn how to export components from Sketch

Noelis avatar
Written by Noelis
Updated over a week ago

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 from the right panel of the "Used in" tab 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 works exactly the same as exporting artboards. Simply select a symbol or multiple symbols (which are usually located on the Symbols page in Sketch) and press Control + Command + E to begin the export process. 

On the project selection window, you can switch between your workspaces to choose the desired project or styleguide.

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?