We talk about the process, design system components, and the value our clients get from our custom design systems.
by Vytas Butkevicius
Sep 14, 2023
I've been building design systems for quite a few years now and carved a niche for myself that caters to the unique needs of B2B startups and growing organisations alike. However, I've noticed that our clients often have questions regarding our process, its components, and the value they derive from it.
In this detailed guide, I aim to provide a transparent overview of our approach. I'll shed light on:
The anatomy of our design systems and the components they encompass
The cohesive mechanism that enables these components to work seamlessly
The concept and relevance of design tokens in our systems
The seamless process we follow for handing over the design system to developers.
To further augment your understanding, check our in-depth case study that chronicles our journey of developing a design system for our B2B client.
Understanding a Design System
Before we delve into our methods, let's first clarify the concept of a design system. First of all, "Design System" is currently a hot keyword usually thrown around by everyone without fully understanding what it is. I've seen many companies say they have a design system, but almost always it's just a style guide and a library of a few components. A design system is a living document built for developers and product managers, not an old outdated repository that no one uses.
There are many different explanations of a design system, and most of them are correct. My thinking is this: a design system is a robust framework comprising a series of components reused across a digital product. It brings uniformity, boosts efficiency, and strengthens brand identity by providing a single source of truth to all stakeholders involved in product design and development. But Design Systems can be complex and very different for every project. If you're not sure your company need one, check out this article.
Elements of a Typical Design System
We view each design system as a unique entity that caters to the specific needs and goals of a business. That said, the following components often form the backbone of our design systems.
1. Design Tokens
Design tokens are the DNA of a design system. They set the tone and define the core attributes that ensure consistency across the interface. They help us connect our designs with front end and force designers to design consistently. Our design tokens encompass:
Colour: We define a palette that embodies your brand's identity, mood, and values.
Typography: We establish rules for fonts, sizes, weights, line heights, and spacing to ensure readability and accessibility.
Shadows: We use shadows to emphasize depth and draw attention to interactive elements.
Grids: We define a flexible grid system that governs the layout and arrangement of components.
Spacing: We set consistent spacing rules to ensure balance and rhythm in the design.
Radiuses: We define corner radius values for elements like buttons, cards, inputs, etc., to control their roundness.
Other tokens: such as sizing, min/max-width, border-width, etc.
During the creation of each component (atoms, molecules, organisms) we always have design tokens in mind and add them whenever applicable. To learn more about design tokens and why they're crucial to our design systems, we recommend reading the benefits of design tokens, as well as how we apply them.
Atoms represent the most basic functional units of a user interface. They're the building blocks that, when combined, create more complex components. Our design system atoms typically encompass:
Avatars and avatar badges
Buttons of various types: standard, group, mobile
Regular icons and miscellaneous ones (check, rating, social, country, payment, files)
Tags, or Chips, for categorizing content
Horizontal and vertical Tabs for managing multiple contents in the same space
Input fields and dropdowns for data entry
Badges, or labels, for providing metadata
Checkboxes and Toggles for binary choices
Dropdown menus and combo boxes for selecting from a list of options
Loading and progress indicators
Sliders for range selection
Tooltips for additional information
Molecules are complex components made by grouping atoms together. They form functional sections of an interface and often involve user interaction. Our design system molecules typically include:
Alert banners for critical notifications
Info banners for important information
Breadcrumbs for navigation help
Checkbox groups for multiple selections
Empty states for no-data situations
File upload interface
List items for presenting data
Pagination and dividers for data division and navigation
WYSIWYG editor for content management
Toast or Snackbar notifications for user feedback
Image grids, video players, and carousels for rich media display
Organisms are complex UI sections formed by grouping together molecules and/or atoms. They form distinct parts of a page and work together as a part of the whole. Common organisms in our design systems include:
Various modal dialogs
Dashboard and other cards
Headers and Footers
Navigation (Side or Top)
Tables for data display
Messaging, Live chat, Comments sections
Popovers for extra information
Activity feeds for user updates
Progress steps for multi-step processes
Search and filter interfaces
And many more reusable organisms based on popularity
We integrate the above atoms, molecules and organisms into tailored templates based on our customers' unique needs. These include, but are not limited to:
Login and sign-up pages
Data visualization pages
Any other specific page that gets reused frequently.
How Do These Components Work Together?
An effective design system is not merely a collection of components; it's their thoughtful assembly that abides by certain rules. All components of our design systems follow key tokens — grid, layout, padding, radiuses, shadows, typography, and colour — to ensure visual harmony and consistency across the product. This methodical approach streamlines the implementation process, making it less prone to discrepancies and errors.
Time to Document Everything
We believe in transparent and exhaustive documentation. Each component in our design systems comes with a clear usage explanation, development specifications, and its different states clarified. We utilize Figma for documenting these details and use various Figma plugins to help make design system documentation more exhaustive.
Furthermore, we encourage and assist our clients in adopting Design System component documentation platforms like Storybook, Zeroheight, and others. This helps create an easily accessible and interactive library of all components, boosting team understanding and communication.
Handing Over the Design System
Our role isn't confined to just creating a robust design system; we also facilitate its seamless transition to the development team. Each component is meticulously annotated, and component tokens are exported as CSS and JS output files, aided by a style dictionary. This streamlining significantly reduces the time spent by developers on styles. Our detailed article explores this handover process further.
Conclusion: Cohesion, Consistency, and Efficiency
I believe (and have experienced) that a well-structured design system is instrumental in crafting a cohesive, consistent, and efficient digital product that's a must for growing tech companies. This example process I discussed has already provided immense value for companies by making interface design structured and much easier to understand for other departments. However, this process still requires quite an investment from designers, product managers and frontend engineers alike, so it's best to discuss with an expert to see what the potential return on investment will be.
Latest blog posts
Have a project in mind? Let's chat
Reduce churn and grow your business with us as a design partner. Not sure where to start? Book a call with us and we’ll answer all of your questions.