CASE STUDY 05
Experimenting Beyond Figma.
Building a functioning prototype with a design system managed in GitHub.
Role
UX Designer
Timeline
Ongoing
Platforms
GitHub · Web Prototype
Overview
From the design file into a working product.
Most of my design system work has lived in Figma, but I wanted to better understand what happens when a system moves beyond the design file and into a working product.
The Experiment
A prototype built from a system, not a sketch.
While I was still working, I experimented with building a functioning prototype using a design system housed in GitHub.
Rather than treating the prototype as a collection of one-off screens, I approached it the same way I approach a Figma library: establish reusable foundations and components first, then use those pieces to build the experience.
The goal wasn't to become a front-end developer. It was to get closer to the development side of design systems and understand how the structure and decisions I make in Figma translate into code.
What I Explored
Hands-on with the coded counterpart.
I worked with a GitHub-based design system to explore how reusable components, styles, naming conventions, and documentation could support a functioning prototype.
This gave me hands-on experience with the relationship between design-system decisions and their coded counterparts, including how components are structured, reused, maintained, and updated outside of Figma.
From System to Prototype
Working from the system outward.
Instead of designing a screen and then figuring out how to build it, I worked from the system outward.
Design foundations
Reusable components
GitHub design system
Functioning prototype
That shift was important. It made the prototype less about recreating a visual design and more about understanding how a system can become the foundation for an actual product.
What I Learned
The space between design and development.
The experiment gave me a much clearer view of the space between design and development.
Figma components and coded components aren't the same thing, but many of the decisions behind a scalable system carry across both: thoughtful naming, predictable properties, reusable patterns, clear documentation, and avoiding unnecessary one-off solutions.
It also changed how I think about my work in Figma. Understanding more about what happens downstream helps me make design-system decisions that are easier to communicate, translate, and maintain.
Where I'm Taking It Next
A better partner to the people who build it.
I'm continuing to experiment with design systems beyond Figma, particularly design tokens, variables, component architecture, documentation, and workflows that create a stronger connection between design and code.
For me, this isn't a move away from UX or Figma. It's about understanding more of the system behind the screens, and becoming a better design-system partner to the developers who ultimately build them.