Recently, Design System is concerned by Japan’s software company. There are so many sessions are talked about Design System. Also about books. Generally, engineers just layout UIs which are provided by designers. But now the developers can try to give some feedback based on Design System. Today I will talk some viewpoints from the engineers. I will use 🌟 to present how it’s hard to know and implementation.
Design System makes developers and designers can have the same concept on Color, Spacing, Model things. It also defines the styles which will be used in the company.
Color
Design:🌟
Implementation: 🌟
Understanding: 🌟
Airbnb’s Design System and Adobe’s Design System are popular and could be a reference. For Designers, they can follow Design System to create designs that are involved in their products’ style. For Developers, they can also achieve the designers’ hopes on UI & UX.
Design System is a sort of UIKit. It defines the fundamental things which should be followed. It replaces the ambiguous namings and uses specific structures to organize the separated pieces. For example, font colors are used in products everywhere. We can define red as .apple and green as .watermelon. Noticed that you should create meaningful definitions. It’s meaningless between .lemon green and .kiwi green if you can’t distinguish them welly. For example, you shouldn't create colors for every fruit. 😉 Noticed that the definition of different types(Text, Button, Link) might be different.
Spacing
Design:🌟
Implementation: 🌟
Understanding: 🌟🌟🌟
I think this is an ambiguous part to engineers. Actually, spacing means margin and padding. For instance, spacing is totally different from cornerRadius. What engineers misunderstood are all distances including width, height, margin, cornerRadius.
When engineers saw 4pt radius at the view, they just find the 4pt at Spacing table then set it. 😇 Don’t laugh, designers.
Again, engineers saw the height of the button is 32pt, so they just find 32pt definition at Spacing table then set it. Don’t laugh, designers.
For these misunderstandings, I saw a lot even in my company. I recommend designers should have a workshop to your engineers, please.
Molecules
Design: 🌟🌟🌟
Implementation: 🌟🌟
Understanding: 🌟
Molecules mean the fundamental part of your UI. Like Buttons, Alerts, Dropdowns, and Notifications. The concept of molecules is to handle different styles and status. For example, A defined Button in Design System might have active,selected,disabled these statuses. Also, this Button might also have primary,dark,light styles. These are unitary molecules which is not related to styles and spacing. Don’t ask why margin between frame and text is not defined in Spacing. Don’t worry Button’s text color is not in Design System. A molecule should NOT be extensible.
Organisms
Design: 🌟🌟🌟
Implementation: 🌟🌟🌟
Understanding: 🌟🌟
Organisms can be organized from several molecules or elements. Organisms include UI, UX, animations and design styles. This is one of the most complicated parts of Design System. In order to implement this organism, designers need to provide any information in the organism.
+ What if a user taps the user icon?
+ What if Follow button status after clicked?
+ What’s the animation show after clicked more?
These questions are NOT about the action after these control events. These questions are about Organism itself. An Organism should be flexible, stable and NOT extensible. Organisms should provide open closures after the control events. For example, .touchUpInside or .editingChanged.
The closures should be open, the organism should have consistency. Sometimes, the label or image style might be different from the molecules. As I said in molecules, the organisms are also unitary.
Conclusion
Design System is a long term plan for products. In the beginning, it costs communications to decide trivial things. The engineers need to learn design knowledge to achieve designers’ expectations. Design System will have many struggles when the design team started to have more and more different ideas. It’s important to take a balance between features and architecture. Honestly, our designers and I got many troubles when facing Design System, so I write down this article for a recap. A stable Design System can save engineers’ development time and help designers’ creations by some limited constraints.
Please enjoy the mess of Design System. See you next time.
