Figma to React development
I turn Figma files into production React and Next.js — not a static approximation, but the real thing: responsive across every breakpoint, accessible to WCAG AA, fast on Core Web Vitals, and faithful to both the pixels and the interaction design. I read a Figma file the way a developer reads a spec — tokens, variants, states, edge cases — so the build matches the intent instead of drifting from it.
- Pixel-accurate translation of layout, type, spacing, and colour
- Design tokens mapped from Figma variables to a Tailwind theme
- Responsive implementation across every breakpoint, mobile-first
- Interaction and motion fidelity, including hover, focus, and empty states
- Accessibility: keyboard, focus order, ARIA, contrast, reduced motion
- Performance: LCP, CLS, and bundle discipline from the first commit
- Reusable component system, not throwaway one-off pages
- Next.js App Router, Server Components, and clean handoff to your team
Shipped work for the same brief.
- 2024Last 3 Feet — Figma to React in 5 daysConversion-focused marketing site built from design to a reusable React component system the client adopted across two products. Lighthouse 98 across Core Web Vitals.ReactTailwindVite
- 2023Wanderlust Woof — prototype to handoffA complete Figma prototype across four user journeys, annotated with components and interaction specs built for a direct, low-loss developer handoff.FigmaPrototypingHandoff
- 2025CVLeap AI — design to deployed SaaSOnboarding and editor designed in Figma, then built in Next.js with a typed component system, accessible interactions, and a production deployment.FigmaNext.jsTypeScript
Most 'Figma to React' work loses the half you can't screenshot.
Anyone can eyeball a Figma frame and rebuild the static layout. The part that gets lost is everything a screenshot doesn't capture: the focus order, the hover and active states, the empty and loading and error states, the motion timing, the responsive behaviour between the two breakpoints the designer drew. Fidelity means carrying all of it across, not just the pixels.
Tokens before screens
The first step isn't building a page — it's extracting the system. Figma variables become CSS custom properties mapped into the Tailwind theme, so colour, spacing, and type are consistent by construction. Every screen built afterwards is on-system by default. The design systems page covers this pipeline in depth.
Responsive and accessible by construction
Layouts are built mobile-first and tested across the real breakpoints, not just the two the designer mocked. Accessibility rides along: semantic HTML, keyboard and focus support, ARIA where the design implies behaviour, and contrast that meets WCAG AA. A faithful build is an accessible build.
Performance is part of fidelity
A design that looks right but loads slowly isn't faithful to the experience. The LCP image gets priority and correct sizes; fonts are loaded without layout shift; motion runs on the compositor. Last 3 Feet shipped at Lighthouse 98 — that's the default bar, not a stretch goal.
A component system, not disposable pages
The output is a reusable, typed component library your team can extend — the same discipline described on the React and UX engineering pages — not a pile of one-off screens that rot the moment the design changes.
Send me the Figma file. You get back production code where the build and the design are the same thing.
What founders ask before reaching out.
Can you convert a Figma file into production React?
Yes — that's a core part of my work. I translate the layout, tokens, responsive behaviour, and interaction states into a typed, accessible React or Next.js component system that matches the design intent, not just a static screenshot of it.
Do you support Figma to Next.js as well as plain React?
Yes. Most builds go to Next.js with the App Router and Server Components for SSR, routing, and performance. I also do plain React (Vite) when the project is a standalone app or widget that doesn't need a framework.
How do you keep the build faithful to the design?
By extracting the design system first — Figma variables become CSS tokens mapped to Tailwind — and by carrying across the parts a screenshot misses: focus order, hover/active/empty/error states, motion, and responsive behaviour between breakpoints. The result matches the prototype's feel, not just its look.
Is the output responsive and accessible?
Yes, both by default. Layouts are mobile-first and tested across real breakpoints; accessibility (semantic HTML, keyboard, focus, ARIA, WCAG AA contrast, reduced motion) is built in rather than retrofitted.
What about performance?
Performance is treated as part of fidelity. LCP image priority and sizing, no layout shift on fonts, compositor-driven motion, and bundle discipline. Last 3 Feet shipped at Lighthouse 98 across Core Web Vitals — that's the standard bar.
Do I get reusable components or just pages?
A reusable, documented, typed component system your team can extend — not disposable one-off pages. The components consume shared tokens so they stay consistent as the design evolves.
Let's see if it's a fit.
30-minute call. No pitch, no slides. Tell me what you're building, including the AI parts, and the constraints. I'll tell you if I can help, and who else to call if I can't.