Building and scaling a design system
How I helped lead the creation of a unified Design System to empower teams and streamline product development
the challenge
Fragmentation and inefficiency
The client I worked with had a growing portfolio of products and platforms, each built by different teams. While they had a Figma UI kit for designers, it lacked a corresponding codebase for developers. This disconnect led to inconsistent user interfaces, duplicated efforts, and inefficiencies across teams.
The core issue was the absence of a single source of truth—a design system that could serve both designers and developers. Without this, teams were reinventing the wheel with every new product, leading to:
- Inconsistent user experiences
- Wasted time and resources
- A lack of scalability as the company grew
Defining the Project
From UI Kit to full-fledged Design System
The project began with a clear goal: to transform the existing Figma UI kit into a comprehensive, scalable design system that could be adopted across the organization. This was not just about creating a design system—it was about fostering a culture of collaboration and consistency across teams, setting the stage for long-term scalability and innovation.
- Work towards building a shared library of reusable components in Figma.
- Begin developing a corresponding codebase for developers.
- Create documentation and guidelines to ensure ease of use and adoption.
- Establish processes for maintaining and evolving the system over time.
Discovery
Identifying the gaps (and filling them)
During the discovery phase, we identified gaps in the old design system—both technical (inconsistent components, poor scalability) and cultural (misaligned workflows). To fix this, we embedded code directly into Figma, using tools like Tokens Studio to sync design tokens (e.g., `--color-primary: #007BFF;`) with CSS variables. Components like buttons and inputs included ready-to-use code snippets, so developers could copy/paste directly into their workflow.
We also paired designers and developers in real-time to build components, ensuring alignment on interactions, accessibility, and edge cases. This hands-on collaboration broke down silos, reduced handoff friction, and created a scalable, unified system that worked seamlessly for both teams.
Research
Learning what it takes to make a great design system
As a small team juggling multiple products, we started with a focused goal: to build a scalable design system foundation that could grow over time, whether by us or other teams. We kept the initial scope manageable, ensuring it could adapt to future needs without overextending our resources.
To ensure longevity, we studied industry leaders like Google’s MUI, Shopify’s Polaris, and Uber’s Base. These systems taught us that success hinges on simplicity, scalability, and adaptability—principles that became the backbone of our design process.
For inspiration and best practices, we relied heavily on designsystem.surf, a fantastic resource showcasing components from top design systems. It’s a must-visit for anyone diving into similar work.
Define and ideation
Making a product for Designers and Developers
This phase was about more than just building components—it was about creating a shared language that would empower teams to work together more effectively.
Our close collaboration with developers paid off, we achieved seamless integration between design and code. The result was a library of production-ready components backed by comprehensive documentation, including usage guidelines, best practices, and ready-to-use code snippets. We also designed the system to evolve over time, incorporating feedback from its users to ensure it remained adaptable and future-proof.
NEXT STEPS
Looking towards the future
This project was about more than just building a design system—it was about creating a living ecosystem that evolves with the organization. By focusing on scalability, collaboration, and continuous improvement, our team has laid the groundwork for a system that not only solves today’s challenges but also adapts to tomorrow’s needs. I’m excited to continue driving this vision forward, ensuring the design system remains a cornerstone of consistency, efficiency, and innovation across the organization.
Some specific goals for the future are:
- Continuing to expand the component library
- Adding components to cover more use cases and edge scenarios.
- Introducing advanced patterns (e.g., data tables, dashboards) to support complex products.
- Improving the collaboration of design and dev
- Fully implementing tools like Figma’s Code Connect to streamline the handoff process.
- Building a governance model
- Forming a dedicated team to oversee the system’s evolution and ensure consistency.
- Creating contribution guidelines to empower teams to propose and build new components.
- Staying ahead of the trends
- Regularly auditing the system to incorporate new design trends and technologies (e.g., dark mode, accessibility enhancements).
- Researching emerging tools and frameworks to keep the system modern and efficient.
Live Demo
While I’m unable to share the full live version or prototype of this project due to client confidentiality, I’m incredibly proud of the work my team and I accomplished in bringing this design system to life. I’d be happy to provide a detailed demo or discuss specific aspects of the project further in a call. Feel free to reach out if you’d like to learn more or have any questions!
Below, I’ve included a small example from a Figma file that showcases my process for creating a comprehensive design system. It highlights the attention to detail and thoughtfulness that goes into crafting pixel-perfect, scalable solutions. Again if you'd like any additional information or a more comprehensive demo, please reach out!