Design-to-Code Collaboration
Designs that don't survive engineering aren't designs — they're suggestions. The work doesn't end at handoff; it ends when the product behaves the way the prototype promised. The design-to-code phase is where good intent gets turned into shipped reality, or quietly compromised.
The work, one phase at a time.
Design with the implementation in mind. A layout that requires three nested grids and four absolute positions will break in production. The best designers know which decisions are easy in code and which are expensive — and design accordingly.
Speak engineering's vocabulary. Tokens, component props, breakpoints, states, props vs. children, prop drilling. Spec'ing in those terms removes ambiguity and makes design reviews actionable.
Use Figma Dev Mode and code-linked tokens so the gap between source-of-truth and production is small. Tokens Studio + Style Dictionary keeps Figma values and code values from drifting.
Sit with engineering during build. Design QA isn't a phase at the end; it's a habit during. Where it accelerates the work, I'll prototype directly in code (Tailwind + Framer Motion) so the decision moves from debate to demo.
Tangible outputs from this engagement.
- 01
Annotated Figma files with Dev Mode-ready specs
- 02
Token export (CSS variables, Tailwind config, JSON)
- 03
Component API specifications shared with engineering
- 04
Design QA reports during build cycles
- 05
Coded prototypes for key flows where helpful
- 06
Migration guides for legacy → new system rollouts
The shoulders I stand on.
W3C Design Tokens spec
Standard format for token interchange — keeps Figma and code on the same vocabulary.
Component-Driven Development
Storybook-led workflows where components are reviewed in isolation before composition.
Atomic + tokens layered approach
Tokens at the base, primitive components above, patterns above that — a clear contract for both sides.
Figma Dev Mode + linked variables
Engineering reads variable names directly, not hex codes — drift goes to zero.
Inline design review on PRs
Design QA happens in pull requests, not in retrospective meetings.
The stack, not the religion.
- Figma Dev Mode
- Tailwind CSS
- Tokens Studio
- Style Dictionary
- Storybook
- Ladle
- Chromatic
- GitHub
- VS Code
Discovery & Research
Stakeholder interviews, PRD and API review, and user research synthesis — the front-end of every product I ship.
Read process →Start a projectWant to start a design-to-code collaboration engagement?
Tell me about the problem and the timeline. I'll come back with a scoped proposal within two business days.
Get in touch →