Development can also build UI component design specifications

The following content is provided byMockplusTeam translation and collation, only for learning and communication,Copy design system is the exclusive design specification production platform in China.

In this article, you’ll learn how well-known sites like Uber, Pinterest, Shopify, and Airbnb use components to build uniform UI/UX design practices.

Airbnb takes component collaboration between design and development to a new level with React – Sketchapp.

Creating and maintaining consistency between UI and UX in the product gives users an intuitive navigation experience and guides them to successfully interact with different parts of the application without confusion.

Maintaining a consistent user interface across parts of the product and applications creates something more valuable — the brand. The key to branding the user experience and user interface is to make users feel at home when interacting with the new product, thereby increasing their loyalty and satisfaction with the new product.

So how do you build an effective UI component design specification? There are several aspects that need to be noted.

Maintain visual and functional consistency

Functional consistency makes your product more predictable. Users can predict how elements will behave so that they feel safe and comfortable interacting with them even on the page/screen they visit for the first time.

Visual consistency includes color, font, size, location, and other visual aspects of the UI that help users identify and categorize UI elements. For example, certain font colors can be used strategically to help users understand what they get when they press a particular button.

Given the current state of the industry, UI components can also serve as user experience components that combine functional and visual consistency.

Component-based design specifications make applications visually and functionally consistent, which helps users feel at home and can be easily guided to complete the desired interactions with the product.

Why do YOU need a component design specification?

Components are a great approach to UI design and development, with fewer reusable components for better consistency.

Companies like Uber, Pinterest, Airbnb, Walmart, Atlasssian, and others have implemented consistent UI through component-based design specifications.

Airbnb’s design studio adhered to this philosophy when constructing their design specification: “Our design should be a unified platform that improves efficiency through well-defined and reusable components.”

Here are some key advantages of using component design specifications.

1. Its reusability promotes alignment between UI and UX because components can create a consistent experience wherever they are used.

2. Because larger components are made up of smaller components, atomic design concepts can be leveraged to achieve better consistency, resulting in less unexpected and separated experiences.

3. Components provide better collaboration between design and development, allowing the design language to evolve over time. Ideally, what you see on Sketch is something built using React.

4. From a design perspective, such as fonts, typography, primary and secondary tones can still be specified as part of the component design specification.

Establish a consistent design system

For now, design specifications do have a lot of advantages. But how do you actually create a component-based design specification that designers and developers can use to collaborate?

Before you can create a component-based design specification, you must understand what it is. The UI design specification is more than just a library of components, and more than just component colors, it covers many aspects. It is an ever-growing and evolving source of authenticity that forms a fundamental part of the entire product experience.

Therefore, before creating your first component design specification, you must set up style guides and design languages to control these components.

The design principles of these components are then translated into code, moving from smaller atoms to larger components.

Ideally, all components should be in a location accessible to both designers and developers. In this way, designers can monitor the design language as it evolves over time, and developers can choose and use the right components.

Shared component library

Shopify uses the Polaris design system, which includes a library of internal reaction components designed to create a more consistent experience for merchants using Shopify. Airbnb’s use of a library of shared components has given it a huge leap in productivity.

Pinterest uses Gestalt, a library of React UI components. It “reinforces Pinterest’s design language. Simplify communication between designers and developers by implementing a set of basic UI components…… “

As you can see from the examples above, shared component libraries are an effective tool for UI consistency. In my opinion, this consistency should not be enforced, but achieved naturally.

A component library is basically a way to execute a series of UI components as a team builds an application. However, developers are limited not only to the visual language of the library, but also to the continuous development of the library.

When a particular part of a particular application needs a component, it may require some tweaking and modification. Designers and developers should find the right balance between flexibility and consistency.

Shared libraries often upset this balance and slow down development, which in turn affects the adoption of the library itself by development teams. It also doesn’t make sense to force a huge library wherever a single component is needed (let’s not get bogged down in a contentious debate about this).

To enable collaboration between designers and developers, it is also necessary to maintain a live documentation site for components and somehow make it available for designers and developers to edit (Tools like Airbnb’s React-Sketchapp and Figma can help).

Here are 23 common React UI libraries that you can click to use. If you implement your own library, keep in mind that there is enough design space for developers to keep the balance between the two.

Bit – Components that act as building blocks

Bit is the new trend in building component libraries.

By using Bit, you can organize components from different projects on the cloud without refactoring those projects or existing libraries.

Each component can be discovered, used, or developed in any ongoing project, and changes can be easily synchronized across the code base.

Each component displays a live UI operating system, automatically parses documents, test results (Bit runs component unit tests, etc.) so that all components can be discovered by the design and development team.

Bit’s workflow allows you to find a faster, more dynamic workflow between UI consistency and design rules. It’s also open source, so feel free to check it out.

Balance consistency and flexibility

Winston Churchill once said, “To improve is to change; to perfect is to change often.” If we enforce consistency too strictly, it will affect innovation.

As we build something new, we have to tweak the rules to make room for variables, but not throw things into chaos.

This may sound like nothing special, but the right ideas, methods, and tools can help you strike a balance between UI consistency and innovation. Here are some tips to keep the balance working.

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

For example, a component (navigation bar, item, and so on) might have a relative size or margin compared to the rest of the application. These variables may change in different situations, so leave some room for them.

Another useful approach used by Uber and other teams is to separate basic/global/base components from “auxiliary” components.

Uber, for example, uses primary and secondary components with more than 22 different colors and 22 values, for a total of 484 unique hues. Created over 70 unique models — one for every country where Uber is available.

Collaboration between designers and developers is key to finding this balance. Some teams, such as Walmart LABS, focus on improving the reusability of UI components themselves to close the gap on the developer side.

Having the right tools and workflow also helps greatly with the UI, and tools like Bit and Storybook can help facilitate this balance.

Breaking up consistency, patterns, visuals and text is a great way to give users a sense of familiarity and reduce clutter when there is no other option. Consistent patterns, recognizable visuals, and consistent tone allow users to feel safe and intuitively interact with your product.

recap

L Keeping the UI and UX consistent guides users to successfully interact with your product.

Design systems are the subject of ongoing UI/UX development. Component-based design systems have visual and functional consistency.

Uber, Airbnb, Pinterest, Netflix and other great teams use component-based design systems to create and evolve their visual languages.

To build a component design system, you can create libraries, use Bit, and gradually extend it with different tools and methods.

L It is important to balance consistency and flexibility by making room for variables, using useful tools, and encouraging a culture of collaboration.

Remember: Balance and collaboration are everything. This is not a single task, but an ongoing journey for designers and developers alike.

Author: Jonathan Saring

Blog. Bitsrc. IO /building…

Learning tools, but not limited to one tool.Use copy guest, build standardTry it now and customize the design specifications for your team.