Illustration by David McMillan for this article.

There’s no doubt the future of design systems is tool-agnostic.

Most of us have seen the problem already: as design teams shift and grow they need access to a consistent design language and component library in order to ensure consistency and to move quickly without sacrificing quality. But as they move across tools elements and attributes from the system are lost in translation.

Additionally, teams outside the design org—those who have historically been forced to rely on complicated intranets or going through unnecessary design tool onboarding—have a need for access to much of the same elements as the design team, despite not using the same tools day-in and day-out.

What this means is that an over reliance on design tools themselves for managing design systems isn’t working.

Building a design system in Sketch or Figma is great, but what happens when you need to access the same components in Illustrator or InVision or Adobe XD? How can product managers working on a slide deck or document, who want to leverage the same color palette or art library as the product design team, do so without sending a dozen requests to the design team?

The same goes for engineers: how can they stay in-sync with the design system without having to reference Figma or Sketch files every hour on the hour? Likewise: how does the design team ensure that what they’re working with is the same as what the engineers are building with?

The future is one tool for design systems.

Imagine being a design team where you can switch design tools without having to migrate your design system or brand attributes.

Or picture this: you just joined a new team and want to use the design system but can’t remember the URL for the intranet where it’s hosted or which project file you need to find and sync in order to look at the latest color palette or popup dialog design.

In some ways this future is already here.

Facebook’s design team, for example, has a powerful system-level tool that automatically syncs design system to designer’s computers. And anyone in the company can leverage their tool to access things like brand guidelines, typography, and icon sets. A small team of specialists focused solely on the design system spend time building, documenting, and syncing everything from color palettes for business or consumer products to complex components in the company’s app, called Design Pack.

Tools like Specify promise to give that functionality to any design team, anywhere. Through a custom application built to not only access the design system, but manage it too.

Many in-house design teams at large companies are beginning to build this future too. These design teams have the resources and expertise to build out tools that ensure the design system can evolve and grow—and that it’s easily accessible for anyone in the company—as the company does.

Personally, I’ve been obsessed with abstracting design system data from any central design tool (such as Sketch or Figma) for a long time.

I started by exploring means of making accessing the design system easier than not for designers, through things like plugins.

These custom plugins ensured the design system was kept up-to-date automatically and that teams could access the elements or components quickly without having to worry what element to use or where to pull it from. But such systems were restricted to the design tool of choice for the team, Sketch or Figma.

Lately I’ve been exploring how a simplified tool could help teams—and not just design but entire product teams—stay up-to-date on the latest design system and enable them to pull from it without having to even open a design tool.

Such a project would mean teams could use design elements like color, typography, icons, and art in any app: Google Slides, Excel, Slack, GitHub, etc.

Additionally, design teams wouldn’t have to worry about migrating their system over to yet another tool every time a newer, shinier one comes along. The team could manage one system in one place and that’s that.

I started working on such a tool in October of 2019, calling it Superb.

I’ve ended up with something I plan to use with my design team at Gem, but I hope to open source the project to enable other teams to use it (and improve it!).

The idea is simple: all design system elements are hosted in a server somewhere (AWS, GitHub) as JSON files. This aligns with engineering efforts as well, who need to pull in the latest system components or elements from a shared repository.

Because modern product design utilizes vector formats, hosting even complex components in a JSON format is pretty straight-forward. Apps like Figma and Sketch allow you to copy+paste raw components, or you can export them as SVGs which can then be shared in a JSON file.

Superb checks for the latest system files each time it’s used, then downloads a copy to the person’s computer so if they go offline they always have the latest resources.

The app exists as a status bar app at the top of the screen. You can open the app by clicking on it’s icon or using a global hot key command. This helps with the user flow, you don’t have to open another app to pull the latest color codes into Figma or to drag-and-drop artwork into your Keynote deck. Just use the status bar app to copy and paste elements or drag complete components onto your project.

Superb is broken down into a few categories via tab-bar the top of the app: colors, icons, type, and UI (which houses artwork as well as complex components).

In the future other tabs could be added for things like: layout, motion, interactions, shapes, and more.

When you open the app the search input becomes active, and you can search across all categories instantly. Not only does search work across element or component names, but also meta data like: color codes (hex or rgb), meta data (categories, guidelines, usage recommendations), and even synonyms (so searching for "notification” in the icons tab will return icons resembling bells, badges, and popups).

All completely customizable by the team in their JSON file. Users of the tool can further customize the experience in the app’s settings, customizing what information is displayed and copied (such as component name copying for engineers or vector copying for designers), and more.

And because the app is native (built in Swift and SwiftUI), all usage in Superb can be tracked via whatever analytics a design team is currently using. Google Analytics, Firebase, or a custom tracker.

Such analytics are valuable for design teams to see who is using what components, and how often. Meaning design system teams can now provide real-world metrics on the work they do and how valuable it is.

It’s still early with tools like Superb, but the writing is on the wall: design systems deserve to have their own place abstracted from the tools we use to actually design. Doing so will ensure more people can use them, that the way they’re used is flexible, and keeping our systems up-to-date becomes easier than ever before.