Figma to React or Next.js: what it costs and how it works

To convert a Figma design to a React or Next.js website, a developer rebuilds every screen in code as reusable blocks, makes it work on phones, connects your content and forms, then tests and launches it. Published freelance offers start at $75 per page and at $1,000 for a Next.js site of up to five pages, with one to two weeks quoted for a simple conversion. By the hour, a mid-level freelance React developer costs $21 to $54 in India, $55 to $87 in the UK and $89 to $140 in the US.

That's a wide spread, and the reason is simple. "Convert Figma to React website" can mean one landing page or a 40-screen web app with logins and payments. Below I go through what the work includes, what changes the price, where AI tools help and where they stop, and what to ask before you hire anyone.

What does it mean to convert a Figma to React website?

It means turning a drawing of a website into a real one. Your Figma file shows what each page should look like. The conversion is the work of writing code that looks the same, works on every screen size and does the things the drawing only hints at.

Two quick definitions, since you'll hear these words a lot:

• Figma is a design tool. Your designer draws each page in it, and the file can be shared with a link.
• React is a JavaScript library (a set of ready-made code) for building a website out of small reusable pieces called components. A button, a pricing card and a menu are each a component.

People are often surprised by how much a design leaves unsaid. A Figma file is a set of still pictures. It usually doesn't tell the developer:

• What the page looks like on a phone, if only the desktop version was drawn.
• What happens when someone hovers over a button, opens the menu or submits a form with a mistake in it.
• What a card looks like when the headline is three lines long instead of one.
• Where the form entries go: your inbox, a CRM, a Google Sheet.
• Who updates the text after launch, and how.
• How fast the page must load and what Google should read on it.

A good Figma to React job answers all of those. A cheap one copies the picture and leaves the rest for later, which is where the second invoice comes from.

Figma to React or Next.js: which one should you ask for?

For a public website that needs to show up on Google, ask for Next.js. For a tool that sits behind a login, plain React is often enough. Next.js is a framework built on top of React: it adds the parts a website needs that React alone doesn't give you, such as pages that are ready before they reach the browser, image handling and page addresses.

This isn't only my opinion. React's own documentation says: "If you want to build a new app or website with React, we recommend starting with a framework." Next.js is the first framework on that list.

So when you see freelancers offering to "convert Figma to Next.js" and others offering "Figma to React", the design side of the job is identical. The difference is the foundation the pages sit on. If a developer suggests plain React for a marketing site, ask how search engines will read the pages. There are good answers, but you want to hear one.

Next.js isn't the only React framework. This site, mohitgoyal.in, runs on React with TanStack Start. For most business websites, though, Next.js is the safe default because so many developers know it, which matters on the day you need someone else to pick up the code.

How much does it cost to convert Figma to React or Next.js?

Published freelance prices start between $75 per page and $1,000 for a small site, and they climb with page count, animations and anything that needs data. No one publishes a standard rate, so the most honest thing I can show you is what real listings say and what developers charge by the hour.

These four are live offers on Contra, a freelance marketplace. Every price is a "starting at" figure, so treat it as the floor.

The last listing says out loud what the others imply: "Final pricing depends on the number of pages, complexity of the design, animations, integrations, and functionality."

Bigger or more involved projects are usually priced by the hour or by a fixed quote built from an hours estimate. Second Talent's rate tables, labelled November 2026, give these hourly freelance React developer rates:

Two more reference points. A 2025 marketplace analysis put the median React developer rate on Upwork at $63 an hour, with a typical range of $51 to $75. And if you're paying in rupees, one Indian hiring guide lists ₹1,500 to ₹3,500 an hour for short, hourly React work.

• India54$
• United Kingdom87$
• United States140$

How an hourly rate turns into a total (example only)

To show how the arithmetic works, take a made-up estimate of 60 hours. The 60 is an invented number for illustration. It isn't a quote, a market figure or what your project will need. The totals below are my own multiplication of 60 by the mid-level rates in the table, so no published source gives them:

• India: $1,260 to $3,240
• United Kingdom: $3,300 to $5,220
• United States: $5,340 to $8,400

The same design and the same hours give very different totals depending on where the developer lives. Your real number depends on the hours your own file needs, so ask each developer for their hours estimate and compare quotes by hours and scope, not by the total alone.

The costs that sit outside the quote

A conversion quote usually covers the developer's time and nothing else. Ask who pays for these:

• Figma access. A developer needs to inspect your file. On Figma's Professional plan a Dev seat is $12 a month and a Full seat is $16. Most developers already have their own.
• Hosting. Where the finished site lives. Costs depend on the host and your traffic.
• A content system (CMS). The screen where your team edits text and images. Some are free, some charge per user.
• Fonts and stock images. A licensed font in the design needs a web licence too.
• Changes after launch. New pages and tweaks, charged by the hour or on a monthly retainer.

What moves the price up or down?

Six things do most of it: how many unique layouts there are, how complete the design is, how much moves on screen, whether content is editable, what the site connects to, and how much testing you expect.

Unique layouts, not page count. Twenty blog posts that share one layout are one piece of work. Five pages that each look different are five. Count the templates in your file and you'll predict the quote better than counting pages.

How complete the design is. If the designer drew desktop, tablet and phone versions, the developer builds what's there. If only desktop exists, the developer has to design the phone version on the fly, which takes longer and gives a less predictable result.

Animation. A fade when a section scrolls into view is quick. A scroll-driven product animation can take longer than the rest of the page put together.

Editable content. Text typed straight into the code is the cheapest to build and the most annoying to live with, because every change needs a developer. Connecting a CMS costs more at the start and saves money each month after.

Connections. Forms that feed a CRM, payments, logins, search and booking systems each add hours. The design shows a "Pay now" button. It doesn't show the two days of work behind it.

Quality checks. Testing on real phones, checking that the site works with a keyboard and a screen reader, and tuning speed all take time. They're also the first things dropped from a low quote.

One thing lowers the price reliably: a tidy Figma file. I cover what that means further down.

Can AI tools convert Figma to React without a developer?

They can produce React code from a Figma file in minutes, and it'll often look right at first glance. What they can't yet do without help is produce a website you can launch, edit and trust. In 2026 they're a real time saver in a developer's hands and a risky shortcut on their own.

The main options:

• Figma's own MCP server. In plain terms, a connector that lets AI coding tools read your design file directly. Figma says it "gives AI agents the design context they need to generate code from your Figma files." Figma's pricing page lists "Advanced Dev Mode inspection and MCP Server" among the features of the Professional plan.
• Builder.io. A design-to-code product with a Figma plugin. Its pricing page lists a free plan, Pro at $24 per user a month and Team at $40.
• Anima. Another Figma-to-code tool. Its free plan includes 5 Figma design imports and 5 code generations, and its Enterprise plan starts at $500 a month, paid annually.

The honest picture comes from the tool makers themselves. Builder.io's own article on the subject says of typical Figma to React plugins: "They promise clean React code and deliver non-semantic HTML soup with inline styles everywhere." In plain words, the page looks fine but the code underneath is a tangle that's hard to change and hard for search engines and screen readers to understand. Even for its own tool, the same article tells you to "review the generated code, make sure it meets your standards, merge when ready." And Figma's guide says you "improve output quality by reusing your actual components", which assumes a developer has already built those components.

I use AI-assisted development in my own work. The tools are good at the repetitive first draft of a section. They don't decide how your components should be organised, they don't know your content will change, and they don't test on a real phone. Somebody has to own those decisions, and the person who owns them is the person you call when something breaks.

How does a Figma to React or Next.js build work, step by step?

A developer reviews the design, sets up the project, builds the shared pieces first, assembles the pages, connects content and forms, tests, then launches. The order matters, because building shared pieces first is what keeps the site consistent and cheap to change.

1. 1

   Review the design

   The developer goes through every screen, lists the unique layouts and flags anything missing, such as phone versions, hover states or error messages.

2. 2

   Agree the scope in writing

   You get a list of pages, features, browsers and devices to be tested, plus what is not included.

3. 3

   Set up the project

   A new React or Next.js project is created with the design's colours, fonts and spacing saved as shared settings, so they're defined once.

4. 4

   Build the components

   Buttons, cards, menus, forms and footers are built as reusable pieces before any full page.

5. 5

   Assemble the pages

   Pages are put together from those pieces and made to fit phone, tablet and desktop.

6. 6

   Connect content and forms

   The CMS, contact forms, analytics and any payment or booking tools are wired in.

7. 7

   Test and compare

   Each page is checked against the Figma file, on real devices, for speed and for keyboard use.

8. 8

   Launch and hand over

   The site goes live on your domain and you receive the code, the logins and short notes on how to update it.

Step four is the one that separates a professional build from a copy job. If you'd like to see how that part is done, I've written about building a reusable component library from Figma in Next.js.

You should see progress along the way. Ask for a private preview link from the first week. On Next.js projects this is easy to set up, and it means you review real pages in your own browser and on your own phone instead of screenshots.

How long does it take to convert Figma to React or Next.js?

A simple conversion takes one to two weeks, and a project with data connections or heavy animation takes three to six. One freelancer's published packages are a fair guide: 1 to 2 weeks for a simple Figma conversion, 3 to 4 weeks with API integration and responsive design, and 5 to 6 weeks for a full web app with advanced animations. An API, in one line, is the way two pieces of software talk to each other, for example your site and your booking system.

The marketplace listings in the cost table quote one to two weeks as well, and all of those are for small jobs.

The developer's hours are rarely what stretches a timeline. These are:

• Missing content. The design has placeholder text and nobody has written the real words.
• Slow feedback. A preview waits four days for a reply, twice, and a two-week job becomes four.
• Design changes mid-build. A new section here, a different menu there. Each is small. Together they're a second project.
• Late access. Domain, hosting and analytics logins that turn up on launch day.

If you have a fixed date, say so at the start and name one person on your side who can approve work within a day.

What should your Figma file include before you hand it over?

A Figma file is ready for a developer when it shows every screen size, uses consistent styles and has the real content in it. The closer your file is to that, the lower and more accurate your quote will be.

A checklist you can send to your designer:

• Phone and desktop versions of every unique layout. Tablet too, if your audience uses it.
• Auto layout on sections. Auto layout is Figma's way of saying how things should stretch and stack, and it tells the developer what the designer intended.
• Shared styles for colours and text sizes, not a slightly different grey on every page.
• Components for repeated items like buttons and cards, with their hover, pressed and disabled looks.
• The awkward states. An empty search result, a form error, a long product name, a menu that's open.
• Real text and real images, or at least text of realistic length.
• Named layers and pages, so "Frame 437" isn't the homepage.
• Exportable images and icons, with the font names and licences listed.
• Notes on movement. What animates, when, and how quickly.

My free Project Scope Generator turns a two-line idea into that list of pages and features, if you want a starting point.

What does "pixel perfect" mean, and how do you check the result?

"Pixel perfect" means the built page matches the design closely enough that you can't tell them apart side by side at the sizes the designer drew. It can't mean identical on every device, because your design shows two or three screen widths and your visitors have hundreds.

So agree on checks you can run yourself:

1. Side by side. Open the Figma file and the live page next to each other at the design's width. Spacing, fonts and colours should match.
2. In between sizes. Drag the browser window narrower slowly. Nothing should overlap, get cut off or scroll sideways.
3. A real phone. Tap every menu item, button and form field with your thumb.
4. Speed. Google's Core Web Vitals are three measurements of how fast and steady a page feels. Google's guidance is that the main content should appear within 2.5 seconds, the page should respond to a tap within 200 milliseconds, and the layout shift score should stay at 0.1 or less. You can test any page for free with Google's PageSpeed Insights.
5. Keyboard. Press Tab through the page. You should be able to reach and use everything without a mouse.
6. Editing. Change a headline yourself through the CMS, if you paid for one.

Write these checks into the agreement, because "pixel perfect" on its own is a phrase two people can read very differently.

What should you ask a Figma to code developer before you hire?

Ask about phones, components, content editing, ownership and what happens after launch. The answers tell you more than a portfolio does, because a screenshot of a finished site looks the same whether the code under it is tidy or a mess.

Questions worth asking any Figma to code developer:

1. Can I see two live sites you built from someone else's design? Open them on your phone while you're talking.
2. Will you build in React or Next.js, and why for my project? You want a reason tied to your site, not a habit.
3. How do you handle screen sizes the design doesn't show? A good answer mentions asking the designer or proposing a layout for approval.
4. Do you use AI tools, and who reviews what they produce? Using them is fine. Not reviewing the output isn't.
5. How will I edit content after launch? If the answer is "email me", price that into your decision.
6. Who owns the code, and where will it live? It should sit in a code repository (an online folder with full history) under your account.
7. What's included in the price and what isn't? Revisions, browser testing, speed work, launch, support.
8. What do you need from me, and by when? A developer who has done this before will have a list.

Red flags to watch for

• A fixed price given before anyone has opened your Figma file.
• No mention of phones or tablets in the proposal.
• "Unlimited revisions" with no definition of a revision.
• The code stays on the developer's account and you get only a link.
• Full payment asked for upfront.
• A portfolio of screenshots with no live addresses.
• Every question answered with "yes, no problem".

The cheapest listing in the cost table charges per page, and that model can work well for a simple brochure site. It works badly when your pages share parts, because nobody is being paid to build those parts properly once.

Is React or Next.js the right target, or should it be WordPress?

Choose React or Next.js when speed, custom interactions or a web app are the point. Choose WordPress when a non-technical team needs to add pages and move sections around every week without help.

A rough guide:

• A marketing site with a handful of layouts and a blog: either works. Next.js will usually be faster. WordPress will usually be easier for your team to edit.
• A web app, dashboard or anything with logins and custom logic: React or Next.js.
• An online store: WooCommerce or Shopify for a standard shop, Next.js when the storefront itself needs to be custom.
• A team that wants drag-and-drop editing: WordPress with a page builder.

The Figma file is the same starting point in every case. If WordPress sounds closer to what you need, I've covered what Figma to WordPress conversion costs separately.

How can I help with your Figma to React or Next.js project?

I'm a freelance senior web developer based in Gurugram, India, and I work with clients in India, the UK and the US. I build marketing sites and web apps with Next.js, React, TypeScript and Tailwind CSS, and I've built client sites from Figma files many times.

What I can honestly say about my experience:

• I've been building websites from Figma designs for over three years. That includes a WooCommerce store for Nortek LED, the Orilite product site and a restaurant site revamp for Cyprianis, all built from the client's Figma files. Those three were WordPress builds, and the skill of matching a design carries straight over.
• On the React side, my own site runs on React with TanStack Start, and Next.js and React websites are one of my main services.
• I care about speed. I work on Core Web Vitals as a service in its own right, so a site I build from your design is tested for load time before it goes live.

How I'd handle your project: I read the whole Figma file before quoting and send back a list of questions and gaps. You get a written scope, a preview link while I build, and the code in a repository you own. If the design is missing phone layouts or states, I'll tell you before I start, not after.

If you don't have a design yet, my design partners create it in Figma with you and I build it, with me as your one point of contact.

I won't quote a price here, because I haven't seen your file. Send it and I'll give you a fixed quote with the reasoning behind it.

What should you do next?

Before you ask anyone for a quote, do three small things:

1. Count the unique layouts in your Figma file and check each has a phone version.
2. Write down what the site must do beyond looking right: forms, payments, logins, who edits content.
3. Decide your launch date and who on your side approves work.

Then send me the Figma link and those notes through the contact page. I'll reply with questions, a scope and a quote. If you'd sooner talk it through first, you can book a 20-minute call and share your screen.