The best, easiest way to think of a design system is as a brand for your software. It’s the unifying source of truth for a company’s or product’s entire identity across the suite of digital assets. But it’s also much more than just a logo. It includes :
A) Rules and guidelines
B) Patterns and visual language
C) Colors, fonts, spacing, and image styles
D) Reusable code components
E) Style guides and documentation that define the design system’s rules
Basically, it’s all the small things that go into making a website unique, so that customers instantly recognize the software. Like any strong brand image, a great design system is an incredible asset for a business because it creates an identity for software that’s as distinctive as Nike’s swoosh, or an apple with a bite taken out. Take a look at these two screenshots from popular websites
A design system is important for users, too. If they become accustomed to what a button or menu looks like in one part of the software, they know what a button or menu looks like in the rest of the application. A UX researcher might say this reduces the cognitive load of using the software.
A design system engineering (DES) team takes the concept of a design system, the branding, and the user benefits, and converts all this into code by building a design system library of reusable components that adhere to the strict standards of the design system. For example at Rubrik and at most Big Tech companies it works like this :
1) The design team creates the look and feel of the software in Figma.
2) The DES team converts that into working React code (or Angular, or iOS, or Android, or the framework they use).
3) The design system library
It is the suite of reusable Frontend components that the DES team creates. These are then bundled up into a stand-alone, JS/iOS/Android library and used across the entire product line. Using the library ensures a visually cohesive brand identity.
Benefits of a design system
As mentioned, it’s a lot of effort to create a design system – but it brings several wins when complete. From the engineering viewpoint, common benefits are :
a) Faster delivery times.
By creating an entire suite of reusable components, engineers eliminate the time and burden of creating the same component over and over on their own. Having a library also removes the need to “reinvent the wheel” by recreating new components. With a mature design system library, creating a page in the UI is almost as easy as dragging and dropping components onto the screen and wiring them up.
b) Higher quality.
By utilizing skilled frontend/UI engineers to create the design system library, the quality of the entire product suite can be instantly visually upgraded. The UI’s quality can go from amateur to professional with the work of a few engineers.
c) More devs can contribute to the frontend.
Sometimes, most full-stack engineers lack expert-level skills in CSS and React. However, a well-written design system library encapsulates the difficult React/CSS/HTML code within the library, and allows full-stack engineers to contribute across the frontend without needing expertise in more niche areas like CSS.
d) “Premium feel” software.
If you want to charge enterprise prices, your software needs to look like an enterprise product.
Sometimes many engineers don’t internalize the significance of premium interfaces. If your product charges a high price, customers expect a superior UI that goes beyond a simple and basic style. For example, it would be hard to entice an enterprise to pay $1M/year for software that uses a standard, free, off-the-shelf Bootstrap theme with default colors and a font that doesn’t look good on the page. It looks the same as thousands of other free websites out there, making it hard for your customers to think “premium” when they see it.
e) Better collaboration across teams.
With a shared library and design, engineering and product management can “speak the same language”, so that when a designer references a component called a “StatBox,” everyone understands what it means, for example. Even better, a tool like Figma allows design and engineering to virtually share code between teams.
f) Cost savings.
Time is money, and a system like this makes engineers more productive because they deliver features faster, and the company can increase revenue quicker. That’s the theory, at least !
