Design system tools that can help manage design chaos

Summary: Design systems help support the underlying bones of a product. At times managing a design system while juggling competing interests can be chaotic. We have a handful of design system management tools we’ve used and have some guidance should you need some.

Design System Tools

1. Figma (https://www.figma.com/)
   Figma has become one of the leading design tools for product design. It’s an online solution that has some really cool features. We’re focused on DSM so we will keep this short. You have the ability to create simple artifacts to very complex nested components to build typography or foundational elements that can in turn establish repeatable patterns and support team collaboration. Figma has a ton of features that can help any team build and maintain a design system. This tool can manage a design system on its own or be combined with a product like ZeroHeight or Supernova.
2. ZeroHeight (https://www.zeroheight.com/)
   Unlike Figma, ZeroHeight is a design system product that allows designers and developers to collaborate and document a design system. It has a lot of features and is geared toward documentation. As an example you could create different sections for a design system like a foundation or components or motion. You could also annotate components that have been imported from design tools. Deep linking to share across organizations or share tokens is pretty simple. This is a great solution and it is laser focused on documentation.
3. Supernova (https://supernova.io/)
   Similar to ZeroHeight, Supernova is a design system tool that supports the documentation and collaboration side of design systems. It helps designers create design documentation and organize style guides to share with others in unique ways. Supernova is a versatile tool for organizations looking to streamline their design system pipeline and can be combined with design specific tools.
4. Sketch (https://sketch.com/)
   Before Figma was there was the perennial powerhouse – Sketch. At the time Sketch was a ground breaking way to create digital products and many ways it still is. On top of that, Sketch has many cool features that are both cloud and desktop based. You can build your design system from typography to motion and connect with tools like ZeroHeight. This design tool can also fully manage the system on its own.
5. Pattern Lab (https://patternlab.io/)
   Pattern Lab is unique to all the above approaches. It focuses on an Atomic Design approach that is node-based. Pattern Lab is a static site generator that connects UI components for you. There are also philosophical difference in how some design tools, but more importantly to understand this is code based. this could be a very cool approach for teams that need to be nimble.

So, how do you choose the right design system tool for you? Here are a few factors to consider:

• Product fit: Does this fit with your current infrastructure and team make-up
• Collaboration: Can you easily collaborate with stakeholders using the design system tool
• Combos: These design system tools can be all-in-one solutions, but maybe you need a combo
• Cost: Speaking of combining, some of these tools aren’t free our cheap so maybe budget drives choices

These aren’t apples-to-apples comparisons

It’s important to note that the design system tools listed in this post are not an apples-to-apples comparison. Each tool has its own unique set of features and benefits, and is geared towards different use cases and workflow preferences. Some tools focus on design and some on the docs side while others including Storybook (which we’ll discuss in a later post) focus on coding first.

ZeroHeight + Figma or Sketch can work out very well

Simon Urbina

Simon is a Product Designer and Front End Dev with over 20 years of experience. He started as a graphic designer and illustrator coding his first website in 1996. He has worked with brands like Publix, Microsoft, and Discovery Channel.

Twitter