Selino V
UI Design + Development

What is a Design System?

My take on some commonly asked questions

Image alt tag
Wait… isn't my design system a shared library in Figma?

Wait… isn't my design system a shared library in Figma?

A design system is the sum of connections we build to craft products together. By honing this collection of methodologies a team can design, test, and deliver applications with efficiency and scale.

A design system is not a feature in an application or a file sitting on a server.

“A design system is a set of interconnected patterns and shared practices coherently organized to serve the purpose of a digital product. Patterns are the repeating elements that we combine to create an interface…”
- Alla Kholmatova, Design Systems (Smashing Books)

Four Elements of Design Systems

When I look at most successfully implemented design systems I see some combo of these four ingredients. The first being the "who" and the last three being the "how".

Cross-Functional Team

A group of people with different functional expertise working toward a common goal. It may include people from all levels of design, engineering, product management, etc.

UIKit

A collection of reusable design elements (components) used to assemble component based designs. Also known as a component library or pattern library.

Component Based Development

Building designs out of pre-made elements (components), which are produced segments to be used as building blocks for your application.

Documentation

A collection of information and resources that covers all aspects of your product design. Documentation usually includes all essential implementation details and design decisions that your team and stakeholders have agreed on.

Who is the intended audience and what are their specific needs?
Serving everyone doesn’t mean serving each equally. Designers & Engineers may visit docs 5, 10, or even more times daily.

Serving everyone doesn’t mean serving each equally. Designers & Engineers may visit docs 5, 10, or even more times daily.

Coders & Designers First

A design system must serve two core roles before all others; product designers and developers. These two collaborate to develop…

  • a shared visual language (UIKit)

  • a shared process for translating that visual language into code (Documentation)

Think of a UIKit as an approved set of patterns held in design software. It's the visual contract between the designs and code. Documentation explains how to use and translate the UIKit.

Then Cross-Functional Teams

Once the two core roles establish their contract it can extend to roles like product management, marketing, business development, etc. As more of the organization speaks the same language they can also communicate and create new patterns for the UIKit, the documentation, and other processes.

How does UX, Design, Engineering, & PM benefit?

Cross-Platform Consistency

Cross-platform consistency and brand consistency are synonymous.

Less Excess

The more inconsistency there is with your design, the more inconsistency there will be with your underlying code. With every different version of page elements or templates, there’s a higher likelihood of unnecessary code loading to render the design elements.

By minimizing unnecessary excess, you’ll be better optimized for usability while gaining performance benefits through faster rendering of content.

Increased Efficiency

The less you have to start from scratch every time you start a new design, the more efficient you will be able to design, build, and launch features quickly.

It will be far faster and easier to get approvals if your designs are aligned with existing standards.

Single Source of Truth

A centralized reference point to account for the most up-to-date standards. This resource is easy for EVERYONE to find, comprehend quickly, and put to use.

It’s the place where you find up to date guidelines and resources.

Artifacts can be exposed within Design System documentation.

Artifacts can be exposed within Design System documentation.

UX Gets Surfaced

I took an immersive UX course and I learned how to research and generate some great artifacts but, you know… startups. Artifacts often disappear into a Wiki or shared archive.

A good design system includes UX artifacts within the documentation itself.

What is a Design System and what problems does it solve?

Product Management Wins

Poor user experience → Low user satisfaction, product adoption & loyalty. It's the PMs job to guard against these problems and to sharpen designers through feedback. A good design system makes it easy for PMs to deliver feedback.

Do we need a design system?

I don't know

I can't tell anyone how to run their business but there's some questions that I think about when making the decision.

  • Is my team increasing size dramatically?

  • Do we have rebrands or theme changes coming up?

  • Are we building new features or products with speed, brand consistency, and resource management as concerns?

I feel like answering "yes" to these questions makes any team a good candidate for some sort of product design system.

More to come…

Shoot me a question!

Click the Contact button and send me any questions or concerns you may have. 😀