Why should you build a UI Component Library?
The challenge that often arises -
How to develop a user interface that can be used across platforms while maintaining the right look and feel?
By using reusable components that have become a part of so many real-world design systems.
Design systems like Airbnb Design, Shopify’s Polaris, and Google’s Material Design have been using components as the building blocks for creating a user interface and reusing them for creating applications.
Building a component library is an optimized way to reduce the overhead that comes with maintaining multiple repositories for multiple components.
A component library is a single repository or a file or folder that consists of all the styles and components used in an app, a website, or software. This includes buttons, input fields, icons, text, a UI kit, etc., and manages source code for these UI elements, often leveraging CSS and JS frameworks.
This blog will go over the benefits, and the practices to build a component library for your design system that will facilitate tighter integration between design and development.
But before that let’s understand what would a component library mean to -
Developer: A reusable set of components helps
- Standardize front-end development across different projects
- Provide easier onboarding for new team members
- Reduce maintenance overhead
- Saves time building new apps
Designer: A set of reusable master components and a predefined style guide enables consistent design. It helps a digital product to scale effectively without requiring frequent additions or rework of design assets and files while maintaining a consistent UI system.
User: A successful component design system means less confusion, better navigation of your products, warm brand-familiarity, and enhanced user experience. For your business, this would imply better results.
In essence, using a component library helps standardize UX/UI and development across multiple teams and products. This is why great teams like Uber, Airbnb, IBM, Shopify, and many others work so hard to build it.
Major reasons why building a UI component library is imperative-
Speed
Components should ideally be easy to use. Established libraries are well-organized and have good documentation. You have an option to mix and match the existing components instead of creating each element from scratch every time. This has a great impact on development speed.
Consistency
Your job is to build an app that doesn’t look like a patchwork of different looks, feels, and technologies. To do that, it’s critical to use reusable components that enforce user interface consistency.
Compatibility
Ensuring cross-device and cross-browser compatibility is one of the biggest challenges of frontend development. UI component libraries provide compatibility out of the box, using a single code base, which makes everything so simple!
Less Maintenance
Reusable components minimize the amount of code you need to maintain and create today. More code requires more maintenance that leads to higher costs and more people, which creates additional communication overhead that slows you down during the development process.
Easier Updates
With a carefully componentized app, it’s far easier to migrate because you can replace existing components, one component at a time.
How to start building a Component Library?
Well, a super over-simplified structure of a design first, then implement reusable components workflow in most of the organizations looks like this:
- Build design components and a visual language
- Implement components in a git-based project in Gitlab/GitHub, etc.
- Distribute using component-platforms or package managers
- Standardize instances of components across apps and projects
- Monitor, update and evolve components collaboratively
Now you may have a few HTML components available to you, such as radio buttons, sliders, inputs, and so on. You need to know these are not enough to create the user interface for a modern application.
While working from a single code base, each of your components needs to alter themselves and conform to the platform on which they’re running. Using a streamlined approach to build a component library can not only address these issues but can also catch more of the edge cases before they appear in your production application.
Choose your design-to-development tool stack
The choice of tools and technologies is a major key to the success of your design system. Setting tooling up will make the movement of design concepts to production-ready code much more smooth. The right tool or set of tools will depend on your team’s skillsets and project needs.
Adding layers of tooling is a great option for many teams. For example:
Storybook — Gives designers visibility into the production components.
React-sketch-app — Generates symbols directly from the React code. This keeps the Sketch symbol and component code in sync.
Zeplin Connected Components — Gives developers visibility to symbols created in Sketch, instead of only the CSS.
Abstract — Manage, version, and document your components.
Creating and Using Components
Bringing atomic design methodology into your UI component development workflow can help you to create and scale such a library, which is why many component libraries are based on it.
In a clearer sense, many designers start by documenting every element, form, page, modal, and alert- and laying them side-by-side. These elements are both defined in the Sketch or other tool documents, as well as in code.
To create a deliberate and hierarchical user interface design system, I recommend opting for Atomic Design.
Atoms: Atoms include basic HTML tags like inputs, labels, and buttons.
Molecules: A combination of different atoms. For example, A search form molecule is composed of a label atom, input atom, and button atom.
Organisms: A combination of different molecules functioning together to form complex structures. For example, a header organism composed of a search form molecule, logo atom, and primary navigation molecule.
While creating these components, collect them in a master file called the library, which you can refer to throughout your design process.
Such a process can also help you out while putting together a last-minute prototype, by being able to create nearly 50 screens within just a few hours — Just like Airbnb.
Discoverability and Collaboration
As both developers and designers work with the same library but on different platforms (usually React for developers and Sketch-app for designers), there is a need to ensure that all parties involved follow the same structure and process when creating or using components.
When building and distributing components you must also create a way for others on-board to learn and discover exactly which components you have, how they behave in different states, what they look like, and how to use them.
You can create a documentation portal or leverage tools like Storybook to organize the visual documentation of the components you develop in a visual way to achieve collaboration and reusability over components.
Or you can get this out of the box if you are working with tools like Bit, by helping the developers to use and develop components from the same place designers, and product managers can view and monitor the components.
Conclusion
A collaborative process among designers, developers, marketers, product managers, and the other stakeholders is an ideal way to grow a sustainable component ecosystem that breathes life into your design system.
