Building a UI Component Design System

April 30, 2018 0 Comments

Building a UI Component Design System



Learn how Uber, Pinterest, Shopify and Airbnb are leveraging components to build a consistent UI/UX design system.

Airbnb takes designer-developer component collaboration to the next level with react-sketchapp

Creating and maintaining a consistent UI and UX across every part of your product helps your users intuitively navigate and successfully interact with different sections of your applications without confusion.

Keeping your UI consistent between multiple sections of your product and across apps creates something even much more valuable: your brand. Branding your UX and UI is the key to making users “feel at home” while interacting with new product, increasing their loyalty and satisfaction.

Airbnb’s component design system

Functional consistency makes your product more predictable. Users know how an element behave, and therefore will also feel more safe and secure to interact with it even on a page / screen they visit for the first time.

Visual consistency includes the colors, fonts, sizes, positions and other visual aspects of your UI which help your users cognitively identify and classify UI elements. A certain font color, for example, could be strategically used to help your users understand what they will get if they push a specific button.

In today’s ecosystem, UI components can also function as UX components, combining the power to create both functional and visual consistency.

A component-based design system can grant your applications both visual and functional consistency, helping to make your users feel at home and easily navigating their way to complete the desired interactions with your product.

Components are a great way to design and develop your UI using smaller, reusbale pieces with better consistency.

Netflix keeps a consistent UI through components

Companies like Uber, Pinterest, Airbnb, Walmart, Atlasssian and many more achieve consistency in their UI through a component-based design system.

Airbnb’s Design Studio used this approach when building their design system: “Our designs should be unified platforms that drive greater efficiency through well-defined and reusable components”.

Here are some of the key advanatges of a component-based design system.

  • Reusability encourages consistency for both UI and UX as components create a consistent experience wherever they’re used.
  • Atomic Design can be leveraged for better consistency as larger components are composed out of smaller components, reducing unexpected and disjoint experiences.
  • Components provide better collaboration between design and development, allowing your design language to evolve over time. Ideally, what you see on Sketch is what you build with React.
  • Design aspects such as typefaces, typography, primary and secondary colors can still be specified as part of the component design system.
Blueprint React components

So far so good. But, how can you actually create a component-based design system on which UI/UX designers and developers can collaborate?

A UI design system is more than a component library. It’s more than the colors of your components. It’s an ever-growing and ever-evolving source of truth for the basic parts from which your entire product experience is made of.

Therefore, before implementing the first component you would have to set the styleguide and design language ruling these components. Here is a good start.

Then, these design principles should be translated into a code implementation of your components, from smaller Atoms to larger compositions.

Ideally, all your components should be organized in a single place which both designers and developers can access. This way, designers can plan and monitor the design language as it evolves over time, while developers can choose and use the right components knowing they won’t break consistency.

Shopify uses Polaris, a design system that includes a react component library internally used to create a more consistent experience for merchants using Shopify. Airbnb’s component library led to a huge leap in productivity.

Pinterest uses Gestalt, a React UI component library which “enforces Pinterest’s design language.. streamline communication between designers and developers by enforcing a bunch of fundamental UI components…”.

A shared component library is an effective tool to enforce consistency across your UI. In my view, consistency shouldn’t be enforced but rather achieved.

A component-library is basically a way to enforce a bunch of UI components across every app or app-part your team is building. But, developers are limited not only to the library’s visual language, but also to its on-going development.

Pinterest’s Gestalt React search-filed component

When a component is needed in a specific part of a specific app, it might needs some adjustments and modifications. The designer and developer together should find the right balance between flexibility and consistency.

A shared library often breaks this balance and slows down development, which in turn impairs the adoption of the library itself by the development team. It also makes very little sense to enforce a huge heavy library wherever a single component is needed (let’s not go into the tree-shaking debate).

To enable designer-developer collaboration you would also have to maintain a live docs site for the components, and somehow make it editable for designers and developers (tools such as Airbnb’s react-sketchapp and Figma can help).

Here are 23 popular React UI libraries you can use out of the box, in case you choose this option. If you implement your own library, remember to leave enough design room for developers to play, without breaking the rules.

Churchill once said that “to change is to improve” and “to be perfect is to change often”. If we enforce too strict consistency, we will stop to innovate.

Uber’s primary flexible component example

As we build new things we’ll have to bend the rules just enough to allow some room for growth, but not let things slip into chaos.

Although there’s no magic here, the right philosophy, methodology and tools can help you achieve this balance between UI consistency and innovation. Here are a few useful tips.

From design perspective, not every style should be reusbale and pre-defined.

For example, a certain component (nav-bar, item etc) could have a relative size or margin compared the rest of the application. In different instances these variables might change, so it’s ok to leave some room to play.

Another useful methodology used by Uber and other teams is to separate basic / global / foundation components from “secondary” components.

For example, Uber uses primary and secondary components with more than 22 different colors and 22 values, 484 unique hues in total. More than 70 unique patterns were created­ — one for each of the countries Uber serves.

Designer-developer collaboration is the key to finding this balance. Some teams (like Walmart Labs) put effort into increasing the reusability of UI components themselves, bridging the gap from the developer’s end as well.

Uber’s data visualization React component library

The right tooling and workflow can also go a very long way for your UI. Tools like Bit and Storybook can help to facilitate this balance.

Where there’s no choice but to break consistency, Patterns, visuals and words are a great way to give users a familiar feeling and reduce confusion. Consistent patterns, recognizable visuals and a consistent tone of voice can help your users feel safe and intuitively interact with your product.

  • UI and UX consistency helps users successfully interact with your product.
  • A design system is the ever-evolving body and sour of your UI/UX. A component-based design system breeds visual and functional consistency.
  • Uber, Airbnb, Pinterest, Netflix and other great teams use a component-based design system to create and evolve their visual language.
  • To build a component-design system, you can create a library, use Bit and leverage different tools and methodologies to grow it over time.
  • It’s important to balance consistency with flexibility by leaving room for changes, using helpful tools and encouraging a collaborative culture.
  • Remember: balance and collaboration is everything. It’s not a single effort, but and ongoing journey which designers and developers take together.

Tag cloud