Building Enjoei's First Design System
Year
2020
Tools
Figma
Role
Product Designer
Challenges
At the beginning, there was no development team available to collaborate on the technical side of implementation. The engineers were overloaded with other priorities, so the design system had to move forward initially as a design-driven initiative. This created friction, as developers had to manually build UI elements from scratch, even though the design team was using repeated visual patterns in Figma.
Discovery
I started by auditing the existing interfaces and mapping all visual components in use. This helped me identify duplicates, inconsistencies, and gaps. Based on that, I defined the architecture of the design system, organizing it into two main layers:
I built the foundations of the design system using variables to drive consistency, scalability, and easy maintenance. By defining tokens for color, typography, spacing and corner radius, all structured as variables in Figma. This way, I managed to create a flexible base that allowed for quick updates, smooth brand transitions, and better alignment between design and code. This approach also improved accessibility and streamlined collaboration across teams.
Components
After defining the foundations, I focused on building a consistent and reusable component library. To ensure scalability and ease of maintenance, most components were built around a master component structure, using base elements as the single source of truth, with variations branching from them. From buttons and inputs to more complex UI patterns, each element was designed with flexibility, accessibility and responsiveness as priorities. I used variants, auto-layout and variables to support customization without compromising consistency.
Documentation
All of this was structured and documented in Figma, with clear usage guidelines, best practices, and interactive examples to facilitate adoption and understanding. In parallel, we used Storybook to document the coded components, which served as a practical reference for developers. While the documentation in Figma focused on design intent, component logic, and visual usage, Storybook ensured alignment on implementation details, states and behavior, allowing both designers and developers to work with the same components through tools tailored to their workflows.
Collaboration
& Governance
Even without engineering involvement at the start, I made a point to align regularly with both design and development teams. I held meetings to present the system, clarify objectives, and explain the benefits of adoption. I also used internal communication channels to share updates, foster transparency, and encourage feedback and collaboration.
Impact
The impact was significant: we reduced the time required to design and ship screens and features, minimized rework and misalignment across teams, and improved both design and frontend development speed. We also embedded accessibility and responsiveness standards into the system from the ground up, improving product quality and user experience. A culture of collaboration and continuous learning began to take root across the team.
Learnings
Designing a system goes far beyond creating components, it's about enabling scale, improving collaboration, and driving product quality. Through my experience leading a design system from scratch, I gained several key insights:
Team
Product Designer:
Product Manager:
Front-end Developer iOS:
Front-end Developer Android: