Design Systems in Sympli: more than just handoff

You asked for it, and we delivered: support for Design Systems is here!

CHECK IT OUT

Design Systems are all the rage, and with fair reason: they have become a key part of everyday work for most teams around the globe. And, chances are that you’ve found yourself craving for a better way to manage yours and have it widely available for the whole team. Well, wait no more! Sympli Handoff’s Brandbooks section has evolved to Design Systems, where you’ll find all design tokens — spacings, colors, fonts, and text styles — in one single place, ready to be shared throughout your projects.

Using the Project Library inside the project will give you a place to tweak and perfect your WIP design tokens that can later mature and get to the shared Design System.

Using the Design System across your projects will give you a release-ready design system to hand over to developers. This way everyone knows that the colors and styles are finalized and developers can safely implement them. It makes changes across projects faster, easier and helps to preserve the consistency of your designs.

How do I populate my first Design System?

To populate your first Design System or Project Library you need to launch your Sympli Handoff plugin, choose the Design System tab on the Sync Screen, choose your Colors and Text Styles, create a Design System and click Sync. After the Sync is done, go to Sympli Handoff Web App and click on the Design System tab, the tokens will all be displayed there.

If you want to add the tokens and upload the Fonts manually, you can do in the Design System Tab inside your project. Just click on the Add Style, enter the values you need, and save.

Design system

Does it support the components?

Currently, the component information is displayed in the inspector when the component is selected on a canvas. And more advanced components management is coming soon, so stay tuned!

Which design tools are supported?

Design Systems work with Figma, Sketch, XD and Photoshop. Automated export of the design tokens is available for Figma and Sketch and coming soon for Adobe XD.

Design system
Figma Figma