Once you've synced your colors and text styles to your project using the Sympli Handoff plugin for Figma or Sketch, or created a global design system, you can manage your tokens - get rid of the ones that you don't want to be shared across projects, rename them for consistency, upload fonts or create space and size tokens.

Open your Design Systems Tab and choose the Design System you want to edit.

To edit or delete any of the existing tokens, hover over its line and click on the three dots that will appear. Select the corresponding option. To manually add new tokens, click on the blue Add... button at the bottom.

Note: Clicking on </> for any token will take you to the specific part of the code for this token in the Code Generation Tab.

In the Color Styles section, you can add, rename, or delete color tokens. We support HEXA, HSLA, or RGBA values. To change between them, click on the arrow in the middle column and select your desired value. Sympli will convert the existing color values to the selected one. Please note that editing and adding new colors can only be done in HEX values.

In the Text Styles Section, you can view, edit, delete, or add new text styles. The preview is generated using the thickness and size of the style, applied to your system's default font.

Note: To manually add new text styles, you’ll need to make sure you have defined sizes and uploaded fonts first!

Here, you can attach the font files that are used in your project, so the dev team can access and download them. The system will try its best to generate the font preview for you. We support TTF, OTF, WOFF, and WOFF2 font files.

In this section, you can create, edit, or remove your spacing and sizes tokens. We support PX or REM units.

Note: Remember, Spacing is for blank spaces between elements, Size is for the sizes of the actual elements.

In this tab, you’ll be able to copy and download automated style code snippets, specifically tailored for Android (xml), iOS (swift), CSS, LESS, SCSS, and Stylus.

The Settings tab will allow you to:

At the top of any page, you’ll see the design system name and owner, and the Share button. As with projects, you can rename your design system by clicking on the name, then click the Done button at the right, hit Enter, or click anywhere else to save the new name.

To share the Design System with your teammates, click on the blue Share button at the top right corner of the screen. The mechanics should feel familiar since they are pretty similar to the Project sharing ones. Click on Get shareable link to create a URL that will share the Design System with anyone who follows the link with the selected permissions, or invite them directly by inputting their name or email and select their role in the Add as.. dropdown.

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. If nothing helps - shoot us a message through the chat in the bottom right corner of the website,

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!

​

Note: For more details on Design System roles and permissions, please refer to this help article.