What components are worth learning? I sorted out the design components of eight major manufacturers!

As a component of the design system, design components can be said to be the most basic and practical part of the system. They appeared earlier than the concept of "design system". Most of the benefits we often talk about now, such as accumulation and sedimentation, reusability, avoiding reinventing the wheel, and improving efficiency, come from them.

In the early days, components were split into two independent concepts. One was mainly based on style, which extracted common interface elements, including style, shape, state and even interaction. The audience was mainly UI designers, mainly to improve the efficiency of designers' drawing. The other was mainly based on logic, which extracted common function definitions, interaction rules and related codes. The audience was mainly R&D engineers (also radiated to interaction designers and product managers), mainly to improve the efficiency of R&D code. Later, on the one hand, due to the strengthening of design and R&D collaboration, on the other hand, it may be that people found that the directories of the two libraries looked similar, and now many design systems are gradually unified into one concept.

However, these two concepts are not completely unified in the entire industry. In addition, the concept of component has also begun to be used in the design circle, which makes things even more confusing. The original component was led by R&D, and the introduction mainly talked about code. Now, driven by consistency, there may be a mix of concepts and nouns. The same noun may refer to one concept in this design system and another concept in another design system. In this article, I use "design components" to represent these two concepts. (That is, I use design components to represent the two nouns component and pattern in my previous article.)

Five major web components

1. Ant design component

Website: https://ant-design.gitee.io/components/overview-cn/

Produced by Ant Group, it provides 61 components in 7 categories, with unified technology and design. Each component has a design introduction above and the corresponding API below, and it supports both VUE and React technology stacks. The provided UI kit also corresponds very well to the website's directory. My own design team also chose Ant design as the basis when working on the web end.

2. Element design components

URL: https://element.eleme.cn/#/zh-CN/component/installation

Produced by Ele.me, it also uses the same technology and supports the react technology stack. Like Ant design, it also classifies all components into six categories with nearly 70 components. However, there is a basic category in the six categories, which includes colors, icons, fonts, etc. According to the classification in my previous article, it is considered a style and specification. As components under Alibaba, I personally prefer Ant design, which is more referenceable in terms of classification. (For specific classification, see the table at the end of the article)

3. Shopify Polaris Component

Website: https://polaris.shopify.com/components/get-started

Produced by a well-known Canadian multinational SaaS e-commerce service company, it provides 24 components in four categories, and has a good unity of technology and design. The technology stack supports React and CSS only. Currently, the design resources are only available in figma format. There is a URL on figma where the design team provides resources: https://www.figma.com/@shopify

4. Aliteambition Clarity design component

Website: https://design.teambition.com/

The components are divided into four categories: basic, block, business, and a special page template category. There are 49 basic and business components in the UI resources. The integration with R&D is also very good. The introduction of each component includes the introduction of the design side and the R&D side API, and supports the React technology stack.

5. IBM Cartoon design component

URL: https://www.ibm.com/design/language/

A relatively old classic design system, with a total of 35 design components, which are not divided into categories like the previous designs. Each component will be classified and introduced in terms of usage, style, code, and usability. The resources are provided in three formats: sketch/XD/Axure.

Microsoft Corporation

1. MR design components

URL: https://docs.microsoft.com/zh-cn/windows/mixed-reality/discover/mixed-reality

Figma resource URL: https://www.figma.com/file/ltLag9SxjUIyLQFsp7NNE7/Figma-Toolkit-for-MRTK-%2F-HoloLens%2C-Windows-Mixed-Reality?node-id=116%3A4

The design system for Microsoft's virtual mixed glasses Hololens uses a technology stack based on Unity.

The web page display adheres to the entire company's product line, without launching a separate website. I admire Microsoft for this, after all, they have so many businesses.

There is no unified concept of design components in the website directory. Instead, there are controls and behaviors in the interactive mode and UX elements. However, the figma format resources currently provided have the concept of useful components, which are not one-to-one corresponding to the page directory. I count the figma files it provides here, which are divided into nine categories and 14 components, including MR features such as Hand Gestures (directory corresponds to Hand coach) and Bounding Box (directory corresponds to Bounding Box and App bars). In terms of quantity, it should be the least in my batch, but because of the characteristics of MR combining virtual and real, many effects cannot be provided by simple UI, but are the joint effects of two-dimensional UI, three-dimensional models, lighting effects and special effects, algorithms, and interface development.

2. Fluent design components

URL: https://docs.microsoft.com/zh-cn/windows/apps/design/

Microsoft's most famous design system is the same as its most well-known product. It is mainly used for Microsoft desktop applications (UWP) and covers multiple terminals based on this. It is divided into 12 categories with a total of 56 design components. The consistency with R&D is also relatively good, and each component page provides corresponding development documents. In addition, like the MR design components of Hololens, the current UIkit also only provides figma format resources.

Google’s Material Design

Website: https://material.io/components

Compared with Microsoft, the design language based on the Anroid system extended to other terminals has better compatibility with later terminals. The total of 30 components are not further classified, and the technology and design ends are well unified. The introduction page of each component contains both an introduction from the design side and content for R&D engineers.

Among these 30 components, 7 components are not derived from the original Android mobile terminal, but are newly created based on terminal features. These 7 components are Backdrop/Banners/Data tables/image lists/Lists/Sheets:side/Tooltips.

The design resources are available in three file formats: XD, figma, and Sketch.

Apple's Human Interface Guidelines

URL: https://developer.apple.com/design/human-interface-guidelines/

The design system of Apple, which was first famous for its design, did not give itself a nice name like the subsequent Google Material Design and Microsoft Fluent Design. It still has the title that I first knew it: Human Interface Guidelines.

Human-computer interface guidelines. Just look at the name, and you'll feel a sense of grandeur! This pattern, this momentum, is unmatched! (Sorry, I've been watching a lot of ACG lately)

However, starting with the first generation of iPhone that revolutionized the mobile phone industry, it has indeed ushered in an era where people did not just talk but did nothing.

Now, Apple's OS components have expanded from the original ios to the four major terminals of iOS, MacOS, WatchOS, and tvOS as Apple's product line expands, mainly serving many developers (including designers) who develop applications on these OS. The unity of design and R&D is also good, but the component introduction page under design is not mixed with the development language, but starts with "For developer guidance" and guides links to other pages. Unlike Google, which divides terminals under components, although Apple's entire OS system adheres to consistency, each terminal corresponds to a separate design system, and there is no concept of "component". In terms of design resources, it is rare among various companies to include resources in PS format, and OS13 also supports Keynote format.

1. iOS

The origin of Apple's design system corresponds to mobile phones and pads.

There are four categories of design components in the catalog (Bars, Views, Controls, Extensions) with a total of 38 components. In addition, there are three more introductions to interaction logic and rules: application architecture, user interaction, and system capabilities. However, although the design of the OS system does not use the word component on its website, they still use components (conponents) in their Sketch files.

2. MacOS

The catalog divides the corresponding design components into eight categories: Windows and Views, Menu, Buttons, Fields and Labels, Selector, indicators, Touch Bar and Extensions, totaling 56 components.

What's interesting is that MacOS also lists the components that it doesn't recommend using in the catalog (I don't count them in the 56 components here). For example, in the Windows and Views category, it lists Drawers and Placards that it doesn't recommend using, and lists other components that it recommends using. It really looks at the human-computer interface guidelines, rather than limiting itself to its own OS design system.

2. WatchOS

The concept of design components in the catalog is divided into two categories: Interaction and Element, with a total of 22 components. Like Microsoft's MR design, due to the particularity of the terminal, under the Interaction category, you can see Haptics, which is rarely seen in other design components, and in the Element category, you can see more interesting components such as Activity Rings.

3. tvOS

The website directory uses the same Element concept as watchOS, with a total of 13 components.

In general, we can see that in the design components with relatively simple terminals that have been released in recent years, there is an obvious trend of unification of the two concepts. However, as the concept of components becomes more complicated with the expansion of products and businesses, the two concepts will again show a state of separation before they are completely unified. This can be seen in the component design of Google, Apple, and Microsoft products, which started building design systems a few years ago and influenced the entire industry.

With the strengthening of design engineering and R&D-design collaboration, I believe that these two concepts will continue to merge and unify in the entire industry. However, when it comes to each specific design system, whether design components need to be unified with design and R&D, and to what extent, still depends on the specific environment and needs of the design components. After all, returning to the origin, the existence of components, like design systems, is to improve efficiency.

Finally, here is a comparison table of these design components: