Design systems: definitely not just for designers
Who is a design system for? Lots of people might instinctively reply that it’s for designers. However, that misses the real value that a well-maintained design system delivers. These systems deliver their greatest value for organizations when they are built with more than just designers in mind.
Let’s start by pinning down the role of a design system. It’s there to tackle the different assumptions and subjective judgment calls that can often lead to delays, misunderstandings, inconsistent components, and inconsistent and confusing user experiences. It provides clear guidelines and reusable building blocks that should benefit all teams, and align the entire organization around common solutions. That’s why my preferred term isn’t actually ‘design system’ at all. Design systems should aspire to be broader, problem-solving systems. They set down common, consistent ways of tackling problems that enable a holistic approach.
A single source of truth
The system starts with design tokens: the variables such as colors, spacing and typography that it uniformly defines and turns into reusable elements. It then groups these tokens into components, ranging from simple buttons and input fields to more complex text areas and navigation menus. These building blocks, in turn, provide the foundation for complex patterns such as tables, cards, or multilevel forms. They can be easily combined and customized for different parts of a product, while maintaining a consistent look, feel and visual logic. Well-documented guidelines explain not only how to use each element, but also the underlying principles and tone behind them.
Each token and component represents a reusable design decision. The system becomes a single source of truth that teams can refer back to with confidence, and an easy way to enhance productivity. Our design system might include a standardized pattern for handling translated text in text areas, for example. Its spacing, iconography, and font sizes are predefined, ensuring that it looks and behaves consistently whether it's embedded in our website, desktop, or mobile application. By centralizing these decisions, teams no longer need to ask, "which shade of blue should we use?" They simply refer to the blue-500 variable that lives in the system's design token library.
Streamlining collaboration through a shared system
A common, problem-solving system should bridge the gap between design and development teams. At DeepL, we’ve embedded our system within tools that integrate with one another effectively, to ensure this happens.
Designers define tokens, components, and patterns in Figma. Engineers can then consume them through Storybook, which integrates with Figma via the Figma API. This means that when engineers are implementing components in Storybook, they have the visual reference that they need. The single source of truth of the system becomes equally accessible to both disciplines, and this minimizes misinterpretation. Designers annotate components in Figma with usage notes, accessibility considerations, and responsive behaviors, and engineers implement exactly what they see.
For instance, DeepL's team could annotate a "language selector" dropdown menu component in Figma, specifying hover states, keyboard navigation guidelines, and localization edge cases. Engineers then build that component for Storybook, adding some documentation to ensure that everyone, even newcomers, understands the expected interactions without lengthy onboarding sessions.
Time savings and consistency
Reusing predefined elements delivers the visual consistency that makes design teams happy. Just as importantly, it dramatically reduces redundancy in development workflows. That makes engineers happy too. A button that’s already styled and coded in the system can be dropped into any new feature without rebuilding or reconciling variations. Because tokens and components are carefully designed for compatibility, the requirement to recreate them is significantly reduced. This approach not only enforces a consistent look and feel across all touchpoints, it also reduces coordination and review cycles.
A great example is when DeepL rolled out new buttons as part of our brand refresh. Instead of creating a new button for each platform, engineers could pull in the existing, centralized button component. Design reviews were minimal, and so too were QA reviews, since our QA teams already knew which test cases existed. This helped to shorten launch timelines and delivered a fast, consistent rollout across desktop, web, and mobile.
Scalability
As organizations grow, new products and features multiply. A robust design, or problem-solving, system ensures that every contributor can be onboarded quickly. By converting tokens into platform-agnostic formats with tools like Style Dictionary, teams can deliver consistent variables to iOS, Android, and web simultaneously.
Imagine our product team needs to update the icon library. Designers create SVG icons in Figma and publish them using the Figma API. A build script then automatically fetches these SVGs and generates platform-specific assets, React components for the web, XML drawables for Android, and SwiftUI images for iOS. This ensures that each platform uses the latest icons without manual conversion or maintaining separate repositories.
Conclusion
A design system is much more than a style guide or a simple component library: it is the backbone for efficient, consistent, and scalable product development. Well-defined tokens, components, and patterns greatly reduce the effort required for design decisions and implementation. Organizations that embrace a thoughtful design system free up valuable time and resources for innovation rather than repetitive coordination. Their design systems have become fully functioning problem-solving systems, and as such they can significantly enhance competitiveness and productivity for organizations as a whole.
About the Author
Michael Siregar is a Software Engineer at DeepL who founded the Design System Team. He shapes the team’s vision by translating design concepts into reusable, user-friendly and scalable elements that work across various products. Michael is a strong advocate of UX engineering best practices, especially when it comes to bridging the gap between design and development.
Connect with Michael on: