Figma to a production-ready interface
I turn Figma designs into React and Next.js interfaces while resolving the parts a static frame cannot specify: responsive behavior, loading and error states, keyboard interaction, content variation, and reusable component boundaries.
- Extract tokens and repeated patterns before building screens
- Clarify missing hover, focus, loading, empty, and error states
- Build mobile-first behavior between the supplied breakpoints
- Use semantic HTML, keyboard support, and reduced-motion behavior
- Keep components reusable without hiding important product differences
- Document decisions the next engineer will need to extend the work
Where this capability shows up in the work.
- 2024Last 3 Feet: React marketing site in five daysBuilt the site with reusable React and Tailwind sections. The project shipped in five days with a recorded Lighthouse score of 98.ReactTailwindVite
- 2023Wanderlust Woof: concept prepared for implementationDefined four product journeys and documented the repeated policy, card, navigation, and state patterns in a Figma prototype.FigmaPrototypingIA
- 2025CVLeap AI: design decisions carried into Next.jsImplemented onboarding, an AI-assisted editor, account state, storage, and export as one connected product workflow.Next.jsTypeScriptSupabase
A design file shows intent. The implementation still has product decisions to make.
A static frame cannot show what happens when a label wraps, data is missing, a request fails, or a keyboard user opens a control. Those are product behaviors, not finishing details.
I surface those questions early, agree on the important behavior, and express repeated answers through components. The result stays close to the design while giving the product room to handle real content and future features.
Scope, evidence, and how I apply this work.
Do you only reproduce the supplied screens?
No. I use the screens as the visual source, then resolve responsive behavior, content variation, interaction states, accessibility, and component structure with the team.
Can you work inside an existing codebase?
Yes. I can follow the existing architecture and component system, extend patterns where necessary, and avoid introducing a second styling or state model for one feature.
What happens when the Figma file is incomplete?
I list the missing decisions, propose behavior based on the product context, and confirm the choices that materially affect the workflow before implementing them.
Will the output be reusable?
Repeated behavior becomes shared components or patterns. Product-specific differences remain explicit so reuse does not turn into a generic component that is difficult to understand or change.
Tell me where the workflow is stuck.
Share the product, the people using it, and what needs to become easier or faster. I will tell you whether my product and frontend experience fits the problem.