Setting the stage:
From chaos to structure
Context
My first task, adapting a web feature for mobile, quickly revealed deeper design issues. The team relied on a single, overloaded Figma file with no separation between drafts and shipped designs, no reusable components, and minimal style documentation. This setup led to inconsistent user interface, poor contrast, and high cognitive load, ultimately slowing us down and affecting usability.
It was clear we needed a more structured approach to improve both efficiency and user experience.
An example of a cluttered Figma file and a user interface with high information density
My approach
I began by requesting a Figma plan upgrade to unlock team workspaces, libraries, and unlimited files. This let us organize features into separate files, reduce memory issues, and give everyone—from PMs to developers—clearer access.
To start addressing design consistency, I proposed a low-effort strategy: extract reusable elements as local components while designing the mobile feature. No variants, just pragmatic, minimal building blocks we could build on later.
Figma team, project, and file organization with early components
Outcome
This incremental approach paid off.
As our component set evolved organically within the feature file, we updated specs and handed them off as a more structured, reusable foundation.
We framed the initiative as a low-risk experiment, and it resonated:
Developers appreciated the clarity and consistency
Product managers found it easier to track progress
This initial success gave us the confidence and momentum to keep pushing forward, laying the foundation for what would become our design system.