Design System Preview
Bridging the gap between design and engineering through live component previews
Year
2025
Role
Product Designer
Overview
Design System Preview was an internal tool that made it easier to explore how our design system had been implemented in the Android codebase.
Designers mainly worked with components and visual states in Figma, while engineers worked with the actual implementation. The preview gave both teams a shared place to look at what had been built, compare it with the designs, and discuss any differences.
Due to the internal nature of the project, I can only share selected parts of the work.
The Challenge
The challenge was finding a way to make the Android implementation more visible to designers, so they could check it against the design system in Figma and spot anything that had drifted or been interpreted differently.
It also needed to give designers and engineers a clearer way to discuss the system using the same terminology.
The Approach
I spoke with designers and engineers to understand what was difficult to check, what information was missing, and what they needed from a preview tool.
From there, I explored different concepts for a live environment, looking at how components, states, typography, themes, and design tokens could be organised and presented.
The concepts were refined into a tool where designers could explore the real Android implementation and compare it with the design system in Figma. Working closely with engineers also helped me understand how the system was structured in code and present that information in a way that was useful to designers.
Outcome
The project helped uncover places where the design system had started to drift between Figma and the Android implementation.
It also gave designers more insight into how components were built and the terminology engineers used to describe them. This made it easier to find components that needed clearer definitions and discuss changes while looking at the real implementation.
The preview gave design and engineering a more practical way to review the system together as it continued to evolve.
Reflection
Designing this tool gave me a much better understanding of how the design system was structured in the Android codebase and how engineers worked with components, themes, and tokens.
It also showed me the value of involving both designers and engineers early in the process. Their different perspectives helped shape what information the preview needed to show and how it should be organised.
The project pushed me to think beyond the design of the interface itself and consider how the tool could make technical concepts easier to understand without hiding the complexity behind them.