Introduction
Modern user interfaces are more complicated than ever. People expect compelling, personalized experiences delivered across devices. That means frontend developers and designers have to embed more logic into the UI.
The concept of a component library can often be a lifesaver. Imagine having to create a user interface from scratch each time! Thankfully, component libraries exist to save you from this dreadful scenario. Today, we’re diving into the world of component libraries to help you better understand them, know when and why to use them, and even discover some examples that might just end up being game-changers for your projects.
What are components?
Components are standardized, interchangeable building blocks of UIs. They encapsulate the appearance and function of UI pieces. Think LEGO bricks. LEGOs can be used to build everything from castles to spaceships; components can be taken apart and used to create new features.
A component library is a set of pre-made, tested, and well-documented UI components that can be easily reused across the user interface of a product. It ensures that the product has a consistent look and feel and promotes efficiency and scalability. With component libraries, designers and developers can quickly add new features and pages while preserving the overall design consistency.
Design System
On the other hand, a design system is more like the entire blueprint of your project, complete with guidelines, principles, and best practices. It includes a component library but goes way beyond that. It’s the comprehensive documentation of how every aspect of your product should look and feel. This provides color palettes, typography, spacing, iconography, and even how specific user interactions should behave.
The design system is like a detailed recipe book that gives you the ingredients (the components) and instructions on how to use them (the guidelines). It provides the reasoning behind design decisions, ensuring everyone on the team, from designers to developers, is on the same page. This ensures that your app has a cohesive look and feel, no matter how many people are working on it.
Let’s take a look at an example of some real-world design systems:
- Shopify publishes their design system, Polaris, not just for themselves, but for anyone who operates in the ecosystem of their eCommerce platform.
- Material Design is an extensive design system that bridges graphical guidelines, interaction patterns, and component libraries.
- GitHub publishes their design system, Primer, as an open source project. While it has a strong focus on the development aspects, it still includes a style guide, and pattern library. They even include templates for presentations and an iconography library.
- Atlaskit is the design system developed by Atlassian for its products. It is very exhaustive and includes a style guide, pattern library, and component library.
- Fluent is Microsoft’s open-source, cross-platform design system that gives designers and developers a framework to create engaging product experiences.
- Audi’s design system is of interest because it covers a wide variety of use cases, from phones to smartwatches and car displays.
Component Library vs. Design System: Building Blocks and Vision
A component library is a collection of reusable UI elements. It’s super handy for quickly assembling interfaces with consistent, pre-built pieces. A design system is a comprehensive framework that includes the component library and also provides the guidelines, principles, and best practices to ensure a cohesive and consistent design across the entire product.
Both are crucial for efficient and consistent design work. Still, while the component library is more about the practical building blocks, the design system is about the overall vision and rules governing how those blocks should be used.
Why Should You Use One for UI Development?
Startups and small or medium-sized businesses may need to be more careful with financial resources. And with a wide range of effective, versatile, open-source component libraries around, smaller companies can set themselves up to scale, step by step. After all, no industry giant got there overnight. And many of them continue to stick with their original component library throughout their evolution.
Most of the time, the readily-available UI components are a pure joy to work with. When used in the right type of project they save you time, effort, and money. In the vast majority of cases, using a UI component library will be a smarter choice, combining top quality with fair pricing.
The bottom line is that if you are looking to create a visual identity for your company that you know will remain that way for a long time (think big companies like Netflix or Amazon) and can do so without straining your budget, go for it.
What do you get with open-source component libraries?
- Accessibility: Creating accessible control components, as defined in WAI-ARIA Authoring Practices, is one the most challenging aspect of building a component library for the web.
- Quality: Open-source component libraries are used by multiple teams on multiple products. You have more production usage, which usually leads to higher overall quality.
Tools and Framework
Developers tool
Storybook is an open-source tool for developing UI components in 15 different frameworks, among others the most popular ones: React, Vue, and Angular. It’s a combined coded design system and component library that acts as a sandbox for effective components and page development, testing, and documentation. Your developers can take a more effective component-driven approach over a visual one.
Storybook helps you build components in isolation and create component catalogs.
It has a collection of addons that extend the development experience.
Key features for developers:
- Open-source
- Large community
- Addons for everything
Designers tool
Figma’s features can be extended thanks to a wide variety of optional plugins that can be easily installed when needed.
Key features for designers:
- Design system features (shared component library, basic set of tokens, component documentation)
- Web-based
- Prototyping
- Mobile prototype preview with app
- Collaborative with live editing features
- Large community
- Plugins
- Integrations
Choosing a UI Component Library for your project
Discover your needs
- Project needs: Does the library provide the components and features that are required for your project? Consider the scale and type of your project, as well as any specific requirements that you have. For example, if you are building a large enterprise application, you will need a library that can support a high level of complexity.
- Customizability: Can the library be tailored to fit your brand’s design guidelines? Some libraries are more customizable than others. If you have specific design requirements, you will need to choose a library that can be customized to meet your needs.
- Performance: How does the library perform? Some libraries are more performant than others. If you need a highly performant React component library, choose one that is known for its speed and responsiveness.
Observe from the community
- Compare usage statistics from: GitHub Stars, Stack Overflow Searches, or Google Search Trends
- Check out this helpful comparison from Dimitri Mitropoulos https://react-ui-roundup.dimitrimitropoulos.com/
Support for designer & developer
- Documentation: Is the library well-documented? Good documentation can make it easier to learn how to use the library and to find solutions to problems.
- Localization: What region is the library created in and what language is its documentation in? Do they have the proper support in your language? Does the library support any needed localization features for time/currency/translation/layout orientation, etc.?
- Design: Does the product have a Figma design counterpart? Does the design file support modern practices like components/symbols and auto-layout? How often is the file updated/supported?
Figma best practices
The process of creating, publishing, and sharing components and styles
Structuring your components atomically
In atomic design, design concepts comprise modular and reusable components created from individual atomic pieces.
Brad Frost describes atomic design:
Atomic design is a methodology composed of five distinct stages working together to create more deliberate and hierarchically interface design systems. The five stages of atomic design are:
- Atoms
- Molecules
- Organisms
- Templates
- Pages
Atomic design is not a linear process but rather a mental model that helps us think of our user interfaces as both a cohesive whole and a collection of parts. Each of the five stages plays a key role in the hierarchy of our interface design systems.
Using clear and consistent naming
In Figma, you can use variables and styles to create a consistent and scalable design system. Variables and styles help define the core elements that can be reused across your designs. They are most commonly categorized into two primary types:
- Primitives: These are your design system’s basic building blocks, like colors, spacing, and sizing. They form the foundations of your design but aren’t used directly in components or layouts.
- Semantic: These provide a meaningful context for how a variable or style should be used. For example, you may have a color variable called“color-background-warning” to convey a sense of urgency or potential danger. Semantic variables primarily alias primitive values behind the scenes, but they can also accept raw hex codes, numbers, or strings.
Documentation
Figma enables you to add descriptions to your main components. If you have variations in similar components, specific use cases, or even a redesigned component you are validating, this is a great place to add useful information to accompany your component which will be easily available to designers, right from the component and team library panels.
Component descriptions are displayed as tooltips on hover when browsing in the component panel.
Define your product foundations
The foundations of your design system are the essential visual and functional elements that form its base. They include crucial aspects like accessibility, color, typography, iconography, illustration, and dimensions. These elements work together to create a strong, consistent design language that’s easy for people to use and understand.
They also specify brand-related rules and the foundational elements needed to define your brand.
- Color palettes: Primary and secondary palettes; accessible color combinations
- Typography: Font family or specific typefaces; recommended HTML elements (for example, “subheadings should be H2 elements”)
- Logos: Approved logo variations; when to use specific logos, wordmarks, or symbols; additional guidance on logo sizing, spacing, and color requirements
- Imagery: Decide on icon set, illustration style
Conclusion
Mastering the intricacies of a component library vs a design system is like unlocking the blueprint to build effective digital products. These two serve as game changers in UI/UX design.
If your design team does not have a component library at this point, now is a good time to start working on it. There are several resources and open source component libraries that can help you get started with the creation of a comprehensive and flexible library of your own. Component libraries are an essential part of successful design teams, ones that can lead to effective products and services.
Would you like to read more articles by Tekos’s Team? Everything’s here.
References
- https://www.nngroup.com/articles/design-systems-vs-style-guides/
- https://www.figma.com/best-practices/components-styles-and-shared-libraries/
- https://bradfrost.com/blog/post/atomic-web-design/
Useful links
- http://styleguides.io/
- https://www.figcomponents.com/
- https://help.figma.com/hc/en-us/sections/23536356509975-Build-design-systems
- https://framesxdesign.com/figma-plugins
- https://react-ui-roundup.dimitrimitropoulos.com/
Author
