React
NodeJS
Angular
HarmonyDesign is a critical part of the success of any application, and as such, it should also be an essential part of your development process. Establishing clear guidelines early on is crucial to avoid unnecessary modifications and revisions later on. Thus, a well-planned and well-executed design system is essential.
A design system is a collection of reusable components, patterns, and guidelines that help developers build consistent and user-friendly interfaces. Creating a design system for a web app ensures a consistent user experience. It helps teams work together better, saves time, and avoids repetition. The system also strengthens the brand's identity and builds user trust by offering a familiar and intuitive interface. Ultimately, it leads to a smoother and more enjoyable user experience.
Its major benefits are:
- Increased consistency and efficiency: A design system helps developers create interfaces consistent with each other and with the overall brand identity of the product. It saves time and effort, as developers don't have to start from scratch each time they need to create a new component or pattern.
- Improved collaboration: A design system can help developers and designers collaborate more effectively. By using a common set of components and patterns, everyone on the team can ensure they work with the same elements.
- Enhanced scalability: A design system can be scaled up or down. It can be used to create small, simple interfaces or large and complex ones.
- Simplified maintenance: A design system can be easily updated and maintained because all applications share the same components and patterns. It becomes easy to make changes and propagate them to all existing products.
To build a design system on your own, here is a starter for you:
Design tokens are the atomic units of a design system. They are named entities representing design primitive values, such as colors, spacing, and font sizes. Designers and developers use design tokens to ensure that all interfaces within a design system are consistent. They share the same values between the mockups and their implementations.
Read more about design tokens here.
When creating a design system, it is essential to establish a set of common design tokens that represent your brand. These tokens may include things such as fonts, size, and spacing. However, it is also important to consider the need for variations of these tokens. Use themes to extend the base design system by defining variations of a subset of the design tokens, such as light and dark modes. This allows for greater flexibility while still maintaining consistency throughout your brand.
The theming section explains how to implement, use and test themes with different component libraries.
UI components are the basic building blocks of a design system. They are small, reusable pieces of code that you can combine to create more complex interfaces. UI components define the visual appearance of an interface, while design tokens define their underlying values.
See the UI Components section to learn more about creating UI components for your design system.
See the Styling section to learn multiple options to styling your UI components.
As a group of UI components, they are usually organized into a UI library.
Head over to UI libraries section to see more examples of UI libraries for your design system.
In large-scale application, you might have multiple layers of UI libraries to build. Also, the upper-level UI libraries are usually fragmented into different business departments and teams to maintain. Having multiple Bit scopes is a good way to organize your UI libraries.
Check out the Scope reference to learn more about using scopes.
In this section, we've learned about the importance of design systems, and the common topics in design systems. To learn how to use Bit to create and maintain design systems in your organization, feel free to read the following of this guide:
