The Architecture of a Modern Frontend Design System
The Blueprint of Modern Frontend Design Systems for Integrated Component Architecture
Modern design systems go beyond aesthetics and are the backbone for creating consistent and efficient user interfaces. They include detailed guidelines, components, and tools, enabling designers and developers to work in harmony.
At the same time, the architecture of the frontend design system plays a pivotal role in creating highly functional user interfaces with improved developer experience. A modern design system architecture has the following key characteristics.
- Compatibility with existing libraries and frameworks.
- Ability to compose multiple components to build complex ones.
- Ability to extend into application components.
- Add only the dependencies for the components you use.
Compatibility with existing libraries and frameworks
Modern design systems aren't just a collection of HTML, CSS and JavaScript or an extension to a UI library. They offer concrete support for frameworks like React, Angular, or Vue out of the box.
For example, suppose we create a design system compatible with React using the Bootstrap UI library. We must build React components for each Bootstrap element we choose to include in the design system and create design tokens that customize Bootstrap's general styles and conventions.
Similarly, if we create a design system using Material UI, things may get much more straightforward, as all its components are based on React. Yet, we must choose the components inside the design system, build what is missing and customize the theme, typography, etc.
Ability to compose multiple components to build complex ones
Modern design systems contain components that are built from the bottom up. That means we can reuse and combine multiple components to build more complex ones.
One challenge we encounter when composing these components to build complex ones is that, with the increase in complexity, the ability to reuse and further compose them becomes less. Therefore, we need to structure and organize them meaningfully, facilitating composability.
A good example would be Atomic Design, where a meaningful structure is made following the conversions from the period table.
It helps define a reusable collection of components that is easy to extend and communicate across the development team.
Ability to extend into application components
This is a new concept, where we build the entire application as a collection of components. If we similarly create the design system, the whole application will become a collection of components, starting from the smallest element to complex pages.
Imagine a world where every module in your codebase is defined as a component. This would mean that every piece of your application could be shareable, reusable, and have its own managed lifecycle by default.
The beauty of this approach is that the same structure can be extended into the application, where more complex UI components can be built as compositions of others and published as their own package.
Bit provides the toolchain and the build system to implement this architecture style. In Bit, everything is a component and finally resides in the bit.cloud component registry. Therefore, you can organize component collections (scopes) in bit.cloud and provide permissions on who can update and publish them, track changes and versions, and visualize the dependency graph if needed.
You can create a separate scope for the design system and use the components in your application scope. After that, you can publish the components in your design system with their documentation to a remote scope in bit.cloud.
This will help developers discover components and their documentation and contribute back when needed.
Add only the dependencies for the components you use
The design systems we create are typically used by multiple applications across the organization. Therefore, it’s difficult to expect an application to use all the components in the design system.
Therefore, the application needs to be able to choose the components and dependencies for the components it uses. If you are using Webpack, the bundler may do the treeshacking and select the dependencies it needs. Yet the bundlers are imperfect, and your application dependencies are worth knowing.
Some UI libraries offer a way to build a static bundle with the components you use. However, this approach limits the flexibility of adding components, where you need to develop a new bundle each time.
With Bit, you get this feature by default since each component is isolated and reusable in nature. Therefore, you can select the necessary components and visualize their dependency graph.
Conclusion
In conclusion, the architecture of a modern frontend design system is a convergence of design and development. It offers a blueprint for creating applications that are not only visually appealing but also robust, scalable, and user-friendly.
If you are building one for your organization, it's worth investing in creating a proper structure and following the best practices to establish design and developer collaboration.
Thank you!
