From Figma to a Production Next.js Site: Process, Timeline and Pricing (2026)

Short answer: converting a Figma design into a production Next.js site takes one to two weeks for a landing page, two to four weeks for a business site with a content system, and four to eight weeks for a large site or application front end, at $600 to $1,500 for a landing page and $1,500 to $4,000 for a business site. The work is a seven-step process: audit the file, extract design tokens, build the components, assemble the pages, connect content, pass a performance and accessibility bar, and launch with analytics and SEO in place.

Recent examples of this process on this site: the Revox Agency website (a neo-retro design built as a Next.js site in 2026), the Abbey Timber landing page for an Australian client (one month), and the QMS marketing platform with multi-region contact systems (one month on Next.js, TypeScript and Tailwind). The process below is the same for all three.

What does a Figma file need before development starts?

Short answer: every distinct page at desktop and mobile width, a components page with all states, colour and type defined as styles or variables, real copy, exportable assets, and notes on interaction. A file missing the states costs a week of back-and-forth; a file missing mobile frames costs two.

• Desktop (1440 or 1280) and mobile (375 or 390) frames for each page type; tablet is optional if spacing rules are clear
• A components page: buttons, inputs, selects, cards, navigation, footer, with default, hover, focus, disabled, error and loading states
• Colours, typography and spacing defined as Figma styles or variables, not as raw values on layers
• Real or near-real copy; lorem ipsum hides overflow and wrapping problems
• Assets marked for export (logos as SVG, photos at 2×) and licences confirmed for fonts and stock images
• Empty states, error states and long-content cases for lists and tables
• For Arabic/English sites, at least one page mirrored right-to-left so directional decisions are made once

What are the seven steps from file to launch?

1. Design audit (day 1). Inventory pages, components and states; list gaps; agree the breakpoints and the browser support matrix. Output: a short checklist the designer completes before step three.
2. Design tokens (day 1 – 2). Colours, type scale, spacing, radii and shadows become a Tailwind theme. Fonts load through next/font with subsets and display: swap.
3. Components (days 2 – 5). Build the components page in code with shadcn/ui as the accessible base where it fits, Framer Motion for the motion the design calls for, and stories or a playground route to review every state.
4. Pages (days 4 – 9). Assemble pages as Server Components, with next/image for every raster image, metadata per page, and structured data where the page type has one (Organization, Service, FAQ, Article).
5. Content (days 6 – 10). Connect the CMS or Markdown, migrate copy, wire forms to email or a CRM, add the cookie consent and analytics.
6. Quality bar (days 9 – 11). Core Web Vitals, accessibility, responsive checks on real devices, right-to-left review if bilingual, cross-browser pass.
7. Launch (day 12+). Domain, redirects from any old URLs, sitemap and robots, Search Console, uptime monitoring, handover document, and thirty days of fixes.

How long does each size of project take?

Two things stretch timelines more than page count: the number of component states the design did not draw, and content arriving late. Both are fixed in step one by agreeing who provides what by when.

Which tools and rules keep the build faithful and fast?

• Tailwind CSS with the design tokens as the theme, and logical properties (ms-, pe-, text-start) from the start so an Arabic version is a configuration change, not a rewrite.
• shadcn/ui for accessible primitives (dialogs, menus, forms), restyled to the design; it removes weeks of keyboard and screen-reader work.
• Framer Motion for entrance and scroll animations, with prefers-reduced-motion respected.
• Server Components by default;'use client' only for interactive islands, which keeps JavaScript small and Core Web Vitals green.
• next/image and next/font for every image and font, which is where most Largest Contentful Paint problems come from.
• Fluid spacing and clamp-based type between breakpoints, so the site looks designed at 1024 px even though no frame was drawn there.
• A playground route that renders every component in every state, reviewed by the designer before pages are assembled.

What bar does the finished site have to clear?

Which mistakes make a Figma conversion look wrong?

• Absolute positioning copied from the frame instead of flex and grid, which breaks at the first unplanned width
• Exporting text as images, or headings as SVG, which kills SEO and accessibility
• Hard-coding pixel widths from the 1440 frame, so a 1280 laptop gets a horizontal scrollbar
• Skipping hover, focus and error states because they were not drawn
• Loading five font weights when the design uses two
• Client-side rendering a marketing site, so crawlers and AI assistants see an empty shell
• Building the Arabic version as a second codebase

How do you get a quote?

Share the Figma file (view access is enough) and say which pages are in scope, what CMS or forms you need, and when it must be live. I reply with the design-audit checklist and a fixed price within two to three working days; see front-end development for what is included, or start from the project brief form.

Frequently asked questions

How much does it cost to convert a Figma design into a Next.js website?

A single landing page is $600 to $1,500; a business website of five to fifteen pages with a content system is $1,500 to $4,000; larger marketing sites and web applications are quoted from the screen count. Prices assume a complete Figma file with desktop and mobile frames.

How long does Figma to Next.js take?

One to two weeks for a landing page, two to four weeks for a business site with a CMS, and four to eight weeks for a large site or application front end. The clock starts when the design is approved and the content is available.

What should the Figma file include before development?

Desktop and mobile frames for every distinct page, a components page with all states, colour and type styles defined as Figma styles or variables, real copy, exportable assets, and notes on hover, focus and empty states.

Will the site match the design pixel for pixel?

At the reference breakpoints, yes within a pixel or two. Between breakpoints and on real content, the layout follows rules rather than the static frame, which is what makes it work on the devices the design did not draw.

Which CMS do you use with a Figma-to-Next.js build?

Sanity, Payload or a Markdown/Git workflow depending on who edits content. For a site with a marketing team, a hosted headless CMS; for a founder-run site, Markdown in the repository is cheaper and faster.

Related: the direct answer on Figma to React or Next.js developers.