# figma → next.js

Figma to Next.js 15, App Router.

Send a Figma file. Ship as a Next.js 15 App Router project: React 18 server components by default, client components where interactivity requires them, Tailwind, TypeScript optional. Vercel-ready, Core Web Vitals green out of the box. Locofy Pro on the first pass, hand-rewrite for the RSC + client boundary.

Get a Figma-to-Next.js quote

VS Code One Dark screenshot of a Next.js App Router page.tsx with a Tailwind hero section.

Dev-to-dev.

Next.js 15 defaults to server components, which Locofy’s output doesn’t understand: it stamps 'use client' at the top of every file. We keep Locofy’s layout scaffolding, prune the client directives, and split the tree along the interactivity boundary the design actually implies.

What you get.

Next.js 15 App Router project with app/ directory, layouts, and route groups.
React server components by default. 'use client' only where useState, useEffect, or event handlers require it.
Tailwind CSS with tailwind.config.ts, tokens mapped from Figma variables.
TypeScript strict mode optional (+$99 per component set).
Metadata API wired in: generateMetadata, Open Graph, Twitter cards.
Vercel-ready. Cloudflare Pages or self-host on request.

Server component page. Client boundary lives in .

// app/(marketing)/page.tsx  (server component by default)
import { QuoteButton } from '@/components/QuoteButton'

export const metadata = {
  title: 'Design to code, hand-audited',
  description: 'Figma to React, Vue, HTML, WordPress.',
}

export default function Home() {
  return (
    <section className="mx-auto max-w-6xl px-6 py-24">
      <p className="font-mono text-xs text-fog"># services</p>
      <h1 className="text-4xl font-bold text-chalk">Any input. Any output.</h1>
      <QuoteButton />
    </section>
  )
}

Tool used: Locofy Pro (60% layout kept, RSC/client split rewritten, metadata + tokens hand-wired).

Turnaround and price.

Single Next.js page + 2 components: from $690, 5d.
Full 5-page marketing site: from $3,490, 14d.
10-page site + CMS integration (Sanity/Contentful): from $6,490, 21d.

Full pricing table. 14-day fix window on every ticket.

Related.

# 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.