Enter password to view case study
A design system only works when design and engineering are working from the same source. When I took over this one, Figma components no longer matched production, screens varied across flows, and designers didn’t trust the files they were using.
I rebuilt the system from its foundations: variables, components, structure, and documentation.
ROLE
Lead Product Designer
COMPANY
ANNA Money
Timeline
2025 - 2026
SKILLS
User Interface Design, Design Systems Strategy, Design Ops & Governance, Component Architecture, Design-to-Code Alignment, Cross-functional Leadership
The problem
The existing system had three recurring issues:
Figma components didn’t reflect what was live in code.
Inconsistent screens led designers to detach components and create one-off versions.
Without a reliable source of truth, each project repeated the same problems and handoff became harder.
Before rebuilding the components, I needed to make sure the foundations matched production.
Starting with variables
I audited the existing variables against the live code and rebuilt the tokens that didn’t match. I also separated them into clearer collections for colour, spacing, and typography.
This gave the components a reliable foundation and meant designers could update one collection without affecting another.
Reworking the Components
Many components were rigid and couldn’t adapt to different content or layouts. Designers were detaching instances because the system didn’t give them the flexibility they needed.
I rebuilt components with variants and swappable instances for different states and use cases. Auto-layout and constraints helped them adapt to real content and screen sizes. I also added guidance on how components should be used in a page layout.
Where needed, I updated legacy components rather than simply recreating them. The aim was to make the supported component flexible enough that designers didn’t need to build their own versions.
Button components rebuilt with consistent sizes, variants and states.
Structuring Around Atoms, Molecules and Organisms
I organised the library using atomic design, nesting smaller components inside larger ones. For example, form fields use shared input and label components; larger sections can then reuse those patterns.
This meant a change to a shared component could carry through the parts of the system that used it, instead of needing manual updates in multiple places.
Documentation That Actually Gets Used
I documented each component in Figma, including how to use it and what to avoid. I mirrored that guidance in Storybook so designers and engineers could refer to the same component, states, and naming.
Outcome
The rebuilt system gave design and engineering a shared reference that matched production. Designers could use components across flows without detaching them, and updates could carry through the nested library.
The rebuild produced 52 components: 21 rebuilt from the legacy system and 31 new components that had been missing.
Next steps
The next step was to make the design system usable in Claude, so product owners and designers could explore ideas and build prototypes using its existing components and patterns.
This could help teams prototype faster, validate ideas independently, and keep AI-generated concepts aligned with the system used by design and engineering.
I left before implementation, but this was the natural next step: turning the system from a reference library into a tool for building with.