Design System: An Art Of Automated Workflows

How many times have you felt inefficient while building a digital product? Have you ever felt inconsistency in the design workflow of your product team?

Sometimes, We find ourselves doing the same work over and over again. There has to be a better process.

Well, There is a new sheriff in town and it’s called a “design system”. It allows us to build a ruleset for our product design

But what exactly is a design system?

Stay tuned.

Table Of Content

• What is a design system?
• Does it fit your company?
• Great examples of real world design systems
• Conclusion

What Is A Design System?

A design system is a ruleset that defines the design and interaction of a product.

It’s built on components and patterns.

A component is similar to a lego brick that is a part of a bigger lego castle. it’s a term taken from the development world which means a building block of software.

A pattern is similar to the lego castle itself. It’s a structure built from components.

Now,

A design system is built upon repeated patterns. These patterns construct the visual design and UX of the product.

In conclusion, using a system, the team can solve usability, functionality and design problems with reused patterns.

That way, teams work efficiently and develop products faster, much faster.

Here’s an example for you.

A product team is working on a new feature. The new requirements that came from the stakeholders are to make it more accessible to new audiences.

Since it’s a big company, with millions of users, the product team has to make innovation on the product while maintaining the same language and design — that users already love.

What a conflict.

They can’t make dramatic changes on the product otherwise they’d confuse the users.

Furthermore, maintaining the same design and UX across all of the company’s products is a hard work by itself.

A design system is a solution for this problem. Where all the building blocks of your product design are at one place.

Design systems have become a necessity, as companies such as google, Airbnb and IBM started using them.

You might think that building a design system from repeated patterns is a boring task.

But is it a complete creation buzzkill? Definitely not.

The beautiful part of it is that any changes in the system would automatically change the entire product. For the first time in design history, we have a semi-automated design workflow. exciting!

Does It Fit Your Company?

Creating a design system is an investment.

It takes time and effort to establish one but eventually it could pay off.

I can already imagine how in a few years we would see tech companies start hiring positions such as “Design System Lead” or “Design System Developer” for talents who’s their only mission is to create and optimize a design system.

What a beautiful time to be alive, right?

But, does that mean any company needs a system?

If a design system does not solve design, UX or development problems. There isn’t a point making one. The goal is not to have a design system at all costs.

On small start-up companies, for instance, developing a design system could take longer than building the product itself.

Great Examples Of Real World Systems

Fluent design system by Microsoft

Bold, scalable, universal design. This is a transformation. A step into the future of sensory experiences. People say this is Microsoft in building a design evolution.

Material Design by Google

Material Design is a design system developed in 2014 by Google. Expanding upon the “card” motifs that debuted in Google Now, Material Design makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.

Lighting by Salesforce

It is a collection of design patterns, components, and guidelines for creating unified UI in the Salesforce ecosystem. It makes a good use of the Grid System, which helps construct responsive layouts that scale elegantly across screen sizes.

Polaris by Shopify

Polaris is a React component library designed to help developers create the best experience for merchants who use Shopify. Visit the Polaris style guide to learn more.

Plasma by Wework

WeWork is a US based company that creates inspiring shared workspaces, with an emphasis on community. They design and build their own internal digital tools to meet their business needs and to manage their global network of buildings and members. ‘Plasma’ is a design system created for these internal business tools.

MailChimp Design

It is a collection of components, color schemes, and typography used by MailChimp design system. It makes a good use of the Grid System, which helps construct responsive layouts that scale elegantly across screen sizes.

Styleguide by Yelp

The styleguide is a resource for designers, product managers, and developers, providing a common language around Yelp’s UI patterns. They use it to maintain modular front-end code and visual consistency across the web app. Learn about why and how they made the styleguide over on the Engineering Blog.

Airbnb Design Language

A unified design language that defines the experience and design of Airbnb. It’s an evolving ecosystem that follows Airbnb’s innovation on its products.

Lonely Planet Design

Lonely Planet has a huge collection of components and this ultimately dictates many of the decisions they make around the front end architecture and day-to-day feature development.

Carbon by IBM

Carbon Design System is a complete set of visual, user experience, and code guidelines and standards for IBM’s Cloud Platform and the 120+ services offered on the platform.

Ubuntu Design

Ubuntu has a huge library of design patterns and components aiming to seamlessly have the same experience and design across all devices.

Conclusion

We live in the golden age of design.

Product teams are the ultimate problem solvers and have to be the best at what they do.

Today, product teams across the world have great tools to automate old solutions.

They have the opportunity to build fascinating and innovative products.

With the rise of design systems, better products are going to show up.

I invite you to join me to spread this idea and make the world a better place for users and product teams.

Bookmark and share this article your team.

Let’s make better products together.