All Collections
Sympli's key features explained
General
How to sync your colors and styles to a Sympli Handoff design system with Figma
How to sync your colors and styles to a Sympli Handoff design system with Figma

Export styles to a design system in Sympli Handoff using the Figma plugin

Maria Merkulova avatar
Written by Maria Merkulova
Updated over a week ago

Define your styles in Figma

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

Color Styles

Color styles can be applied to fills, strokes, backgrounds, and text. You can even create color styles for images or gradients.

To create a color style:

  1. Select the object you'd like to create a style for.

  2. In the properties panel, click the icon next to the property you would like to save.

  3. Click the + icon in the Color styles panel to create a new style.

  4. Give the style a name and click Create style.

Text Styles

Styles can also be applied to text. This is great when you want to set different properties for different blocks of text. You can apply a Text style to an entire block of text, or apply it to just some of the text within a block. This is perfect for defining the style of your headers and body text; as well as determining how to style text within a paragraph like linked text.

The process for creating text styles is the same as a color style:

  1. Select the text you’d like to create a style for.

  2. In the Text section of the properties panel, click the icon.

  3. Click the + icon in the Text styles menu.

  4. Give the style a name and click Create style.

Export styles to Sympli Handoff

You’ll notice a new option in the Sympli Handoff plugin: Design Systems. Clicking on this tab will take you to the Design System 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.

Once on the Design Systems screen, you’ll need to select which styles you want to export --text or color, or both-- and if you want to include styles used from team libraries that are not declared specifically in the Figma file. Click on Continue to select where to export the selected styles.

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 start the 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 export to it, or click the + icon to create a new one.

Manage styles in the web app

After the export is finished, click on the Open button to go 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.

Did this answer your question?