Axon UI
A shared Figma and React component library designed to create a more consistent workflow between product design and frontend development.
- Type
- Design System · React · Frontend Engineering
- Role
- Design Engineer
- Contribution
- Component design · React implementation
The problem
When a design file and a codebase each keep their own version of a component, they drift. A button gains a variant in Figma that never reaches code; a spacing value changes in code and the design file is never updated. Designers and developers then spend review time reconciling differences instead of building, and every new screen risks another inconsistency. Axon UI was built to give both sides one shared set of components to work from.
What I built
Axon UI is a component library maintained in two matching halves: a Figma library for designing and a React library for building. Each component is defined once, its anatomy, variants and states, and that definition is expressed the same way on both sides, so a variant a designer selects in Figma corresponds to a prop a developer passes in React.
Shared foundations such as colour, typography and spacing sit underneath both halves, which keeps components consistent as the library grows. The result is a handoff without translation: the names, options and structure a developer reads in the design are the ones they find in code.
Approach
One component, two sides
Key decisions
Variants map to props
Every Figma variant property has a matching React prop with the same name and options, so the design file doubles as a reference for the component’s API.
Foundations before components
Colour, type and spacing are defined first and consumed by every component on both sides, so a change to a foundation propagates instead of being repeated.
Compose, don’t redraw
Larger patterns are assembled from smaller components rather than drawn from scratch, which keeps the library small and its behaviour predictable.
Outcome
Axon UI gives design and development a shared vocabulary. Components are specified once and implemented to match, which is intended to shorten handoff and reduce the drift that builds up when design files and code evolve separately.
- Tools
- Capabilities
Working on something similar?
Start a conversation