Define your styles in Sketch

Before you start exporting your styles, you’ll need to explicitly create them in Sketch. Here’s a quick explanation of how to do it, for more in-depth details please refer to Sketch’s guides on Text Styles and Color Variables.

Text Styles

Select a text layer that you’ve applied styles to, then choose Layer > Create new Text Style from the menu. You can also click the Create + button under the pop-up menu that reads No Text Style in the Appearance panel in the Inspector. Type in a name for your new Text Style and press enter to save it.

Color Variables

Select any layer and click on the color well for any of its style properties in the Inspector. Select the solid color you want to use, then click on Create Color Variable. Give it a name and click on Create or press ↵ to save.

Export styles to Sympli Handoff

You’ll notice a new option in the Sympli Handoff plugin: Export Design System. Clicking on it will take you directly to the DS export screen, where you can export color and text styles to an existing local project library, a global design system, or create a new Design System altogether.

Note: We know muscle memory can be tough to beat when new features are involved but don’t sweat it! You can easily jump from Artboard Export to Design System export --and vice versa-- from the plugin.

Local project library

As its name suggests, this type of design system is local, limited to a specific project, and is not visible outside of it. It can be edited and, later on, if needed, turned into a global design system. Project libraries are created automatically when you create a project, although you’ll still have to export the design system to populate the styles, they’re not uploaded automatically.

To export styles to a local project library, select the Project Library tab and search for the project name. You can sort them by date, name, or platform (iOS, Web, Android), or search for name snippets. Click on the project name to select it, and then on Export.

Global design system

A global design system is shareable between your teammates and can be linked to any number of projects. To export to a design system, click on the Design Systems tab. You’ll also be able to search for name snippets or sort them by Name or Date. Click on the name of an existing design system to select it and click on Export, or click the + icon to create a new one.

Manage styles in the web app

After the export is finished, you’ll see a button that will take you directly to the design system in the web app. If you exported to a local project library, you’ll be taken to the project’s Design System tab where you can open and edit the library or save it to convert it to a global design system.

If you exported to a global design system, you’ll be taken to the design system’s main page, where you’ll be able to edit, remove, and add styles, manage your design system’s settings, and share it with your teammates.

Check this help article for a deep walkthrough on managing your design system from the web app.

Troubleshooting

If you get the "Failed to upload your styles to a design system!" message in your Sketch plugin, this might mean that your library is too big, we saw this issue with a library that has 800 text styles. Try opening a library as a file and sync styles from that file, uploading colors and text styles separately, or make it into batches. If you don't need to upload your library, simply take off the checkmark "export all styles from linked library" in the Sketch plugin. We're working on this issue and it will be solved soon.

Known issues

For now, we have an issue that if in Sketch Plugin the project is shared with the team, users of that team can’t upload to Project Library. For now, you can only fix it by adding teammates one by one manually. The fix is coming soon!

Did this answer your question?