# figma → react

Figma to React, production-clean.

Send a Figma file. Ship as React 18 functional components (Next.js or Vite), Tailwind or CSS Modules per your preference, semantic HTML, WCAG 2.2 AA. Locofy Pro on the first pass where auto-layout is clean, hand-code where it isn't. Tool disclosure on every portfolio piece.

Get a Figma-to-React quote

VS Code One Dark screenshot of a functional React Button component with TypeScript and Tailwind.

What you get.

React 18 functional components, hooks-based, no class components.
Tailwind CSS utility-first, or CSS Modules with scoped class names. Your call, stated at intake.
Semantic HTML: <section>, <article>, <nav>, headings hierarchical, ARIA where interactive.
WCAG 2.2 AA: contrast 4.5:1 minimum, keyboard traversal, focus rings, no positive tabindex.
TypeScript optional, strict mode if requested. +$99 per component.
Storybook stubs optional. +$149 per component set.

components/Button.tsx

import { forwardRef, type ButtonHTMLAttributes } from 'react';

type Variant = 'primary' | 'secondary';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  label: string;
  variant?: Variant;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ label, variant = 'primary', ...rest }, ref) => {
    const base = 'inline-flex items-center rounded-md px-5 py-3 font-medium';
    const skin = variant === 'primary'
      ? 'bg-wire text-ink hover:bg-wire/80'
      : 'border border-steel text-chalk hover:border-wire hover:text-wire';
    return (
      <button ref={ref} className={`${base} ${skin}`} {...rest}>
        {label}
      </button>
    );
  }
);
Button.displayName = 'Button';

Tool used: hand-coded from Figma dev-mode. TypeScript strict, forwardRef, no external deps.

What we use.

Locofy Pro handles the first pass on Figma files with disciplined auto-layout. It maps Flexbox and Grid correctly about 80 percent of the time, misses semantic tags (turns <section> into <div>, flattens heading hierarchy), and does not know your design system tokens. We keep the layout scaffolding, rewrite the semantic layer, and swap in your tokens.

Anima earns its keep when component boundaries are clean and prop drilling is the win. v0.dev is the fallback when the input is a screenshot, not a Figma file. Everything else, including accessible drawers, modals with focus trap, and any custom animation, gets hand-coded.

# before / after

What Locofy ships vs what we ship.

Locofy Pro gets layout right about 70 to 80 percent of the time on Figma files with disciplined auto-layout. It misses semantic tags, ARIA, and design-system tokens. We keep the layout scaffolding, rewrite the semantic layer, and swap in your tokens.

– raw Locofy output

export const Frame_1 = () => {
  return (
    <div style={{ padding: '24px' }}>
      <div style={{
        fontSize: '32px',
        fontWeight: 700
      }}>Rectangle_2</div>
      <div style={{ marginTop: 8 }}>
        Body_Text_1
      </div>
      <div onClick={() => {}}
           style={{ background: '#7AA7FF',
                    color: '#0E1116',
                    padding: 12 }}>
        Button_Primary
      </div>
    </div>
  );
};

+ shipped by Designs 2 HTML

import { Button } from '@/ui/button';

export function Hero({ title, body, cta }: HeroProps) {
  return (
    <section
      aria-labelledby="hero-title"
      className="px-6 py-16"
    >
      <h1 id="hero-title" className="text-4xl font-bold">
        {title}
      </h1>
      <p className="mt-2 text-base text-chalk">{body}</p>
      <Button variant="primary" href={cta.href}>
        {cta.label}
      </Button>
    </section>
  );
}

Tool used: Locofy Pro (60% of layout kept, semantic layer rewritten, tokens swapped, ARIA added).

Turnaround and price.

Single component: $449, 5d.
Component set (5 to 8 components): $1,890, 10d.
Full 5-page Next.js site: $3,490, 14d.
Rush 1.5x under 72h, 2x under 48h, 3x under 24h.

Full pricing table →

FAQ.

Do you write tests?

On request. Vitest or Jest, React Testing Library. Priced per component at $99. Not the default because most Figma-to-React work at this ticket size wants the UI shipped, not a test suite.

Can you match my existing design system tokens?

Send the token file (JSON, Style Dictionary, Tailwind config, or a Figma variables export). We wire them into the components at intake.

Do you use Redux, Zustand, or TanStack Query?

Zustand and TanStack Query when the scope calls for it. Redux only if your codebase already runs on it. We won't introduce a state library the project doesn't need.

What if Locofy's output is bad on my file?

We skip it and hand-code. The quote covers either path; you pay the same either way. Tool disclosure on delivery says exactly which we did.

Do you deploy to Vercel or hand over?

Both. Handover is default (git repo, README with build/run). Deploy to your Vercel or Netlify is a $149 add-on.

What React version?

React 18 default. React 19 on request. If your project pins to 17, we'll ship 17 (no hooks-only features that require 18).

# get a quote

Send a Figma. We'll quote in 24 hours.

Paste a share link. Add a line about the output stack (React, HTML, WordPress). We'll reply with an indicative price and a start date.