Figma to Code: Convert Figma to React or Next.js

Description

Service Figma to production code

WavX builds the front end from an approved Figma design in React or Next.js for the web, and React Native or Flutter for mobile. The build matches the design at the breakpoints that were designed and follows agreed rules in between. It cannot be identical on every device, and this page explains why, what the file needs to contain, and how the handoff runs.

Request a project estimate Last updated 2 October 2026

What the service is

A Figma file is a picture of the product at a few fixed sizes with ideal content. Production code has to work at every size, with real content, slow networks, keyboards, screen readers and errors. Figma to code is the work of turning the first into the second without losing the design.

WavX builds from an approved Figma design in React or Next.js with Tailwind CSS and TypeScript for the web, and React Native or Flutter for mobile apps. The output is a set of reusable components and pages in a repository you own, connected to your data or API. If the design does not exist yet, that is UI/UX design , which comes first.

What a developer needs in the Figma file

The quality of the file decides how much of the build is construction and how much is guesswork. The Figma features named below are as described in Figma's help centre in October 2026.

In the file

Why the developer needs it

If it is missing

Auto layout on frames

Figma arranges elements by direction, spacing, padding and alignment, and each element is set to hug its contents, fill its container or stay fixed. That states how the layout should grow and shrink

The developer guesses which elements stretch and which stay fixed

Variables

Colours, spacing, radii and type sizes stored as named values. Figma supports colour, number, string and boolean variables, grouped in collections

Values are copied by hand and drift apart

Modes

A mode stores a different value for the same variable, for example light and dark

Dark mode or a second brand becomes a rebuild

Components and variants

Each button, input and card defined once, with its variants

The same element is built several times with small differences

All states

Hover, focus, pressed, disabled, loading, error and empty states

States are invented during the build and may not match the brand

Frames at more than one width

At least a phone and a desktop width for each page type

Mobile layout is decided by the developer, not the designer

Real content

The longest name, the longest price, a long Hindi string, a list with one item and with fifty

The layout breaks the first day real data arrives

Assets

Icons as vectors, photographs at source resolution, marked for export

Blurry images and icons redrawn by hand

Fonts

The font files or the service they come from, licensed for web or app use

A substitute font changes every line break

Interaction notes

Annotations or prototype links for menus, modals, transitions and validation

Behaviour is guessed

Ready for dev status

Figma lets a designer mark frames and sections as ready for development

Developers build from screens that are still changing

A file does not need all of these to start. WavX begins with a file review and returns a list of gaps, each marked as a question for the designer or a decision WavX can propose. If the gaps are large, a short UX audit or a design round closes them before the build starts.

Dev Mode and what it gives a developer

Dev Mode is Figma's inspection view for developers. As of October 2026 Figma states that it is available on all paid plans and requires a Full or Dev seat. In it a developer can inspect measurements and properties, read generated code snippets, see which frames are marked ready for dev, compare a frame with its earlier versions, read designer annotations and download detected assets. Code Connect, which shows a team's real component code inside Dev Mode, is limited to Organization and Enterprise plans.

Figma also offers an MCP server that passes design context, such as variables, components and layout data, to code editors. Figma states that the remote server is available on all seats and plans.

These tools shorten inspection. They do not write the product. A generated snippet describes one frame at one size. It does not decide where component boundaries fall, how data loads, what happens on error, or how the layout behaves at widths nobody drew. Those decisions are the build.

What pixel-perfect does and does not mean

It means

It does not mean

Spacing, sizes, radii and colours use the design's values, taken from its variables

Identical pixels on every phone, browser and operating system

Type sizes, weights and line heights follow the design's type scale

Identical line breaks everywhere. Text is rendered differently by each operating system and browser

At each designed width, the build laid over the design lines up

A match at widths that were never designed. Those follow responsive rules

Every designed state is implemented

States that were not designed look as the designer imagined them

Images and icons are sharp on high-density screens

The page ignores the user's own settings, such as larger text, zoom, dark mode or reduced motion

Real devices differ from the canvas in ways no build can remove. Fonts are drawn differently on Android, iOS, Windows and macOS. A phone browser's address bar changes the visible height as the user scrolls. Content from a database is longer or shorter than the sample. Users enlarge text. A build that forces the design's exact pixels against all of these is fragile and harder to use.

The workable acceptance test is this: the build matches the design at the designed widths, behaves sensibly between them, and the designer has reviewed it on real devices. WavX runs that review side by side before sign-off.

Responsive behaviour

A design drawn at two or three widths leaves the rest to rules. These are agreed before the build:

Breakpoints. The widths at which the layout changes, and what changes at each.

Fluid or fixed. Which elements scale with the screen and which keep a fixed size, with minimum and maximum widths.

Stacking order. When columns collapse, which content comes first.

Tables and wide content. Scroll sideways, collapse into cards, or hide columns.

Images. Crop, scale or swap for a different image on small screens.

Touch targets. Buttons and links large enough for a thumb, even where the desktop design is dense.

Long text. Truncate, wrap or shrink, decided per component.

If the file uses auto layout with minimum and maximum widths, many of these answers are already in it.

Design tokens

A design token is a named design decision: color-primary , space-4 , radius-card . Figma's documentation describes variables and modes as the way to implement design tokens. In code the same names are defined once and used everywhere.

WavX carries the names across. In a Tailwind CSS project they become theme variables; the Tailwind documentation says design tokens are stored as theme variables defined with the @theme directive, which also generates the matching utility classes. The result is that a change to the brand colour is one edit in Figma and one edit in code, and Figma modes map to themes such as light and dark. Where a file has no variables, WavX proposes a token set from the values it finds and asks the designer to confirm it.

How the handoff runs

File review. WavX reads the file and lists gaps, questions and risks.

Token and component inventory. Tokens, components and page types are listed. This list is the scope.

Foundations. Tokens, typography and the layout grid are set up in code.

Components. Each component is built with all its states, in isolation, before any page.

Pages. Pages are assembled from components at each breakpoint.

Data. Pages are connected to the API or CMS, with loading, empty and error states.

Design review. Designer and developer compare the build with the file on real phones and desktop browsers.

Quality checks. Keyboard access, colour contrast, and performance against Core Web Vitals.

Handover. The repository, with instructions to build and deploy it.

Planning range and timeline

A front-end-only build from a finished file is quoted after the file review. WavX publishes no figure for it, because the price depends on the number of distinct components and page types, the number of states, and how much the file leaves undecided.

When the design is for a whole product, the full build has a planning range. For a website use the website cost calculator . For a web application use the software cost estimator : a custom web application starts from a base of ₹4,50,000, a planning range of ₹3,82,500 to ₹5,62,500 at small scale with standard design and no added features. The estimator prices design level as a multiplier and has no setting for a design you supply, so a project arriving with a finished file is quoted after review.

Timeline is set at the inventory step, when the components and page types have been counted. For orientation, the timelines WavX states are 4 to 6 weeks for a simple website and 3 to 6 months for a complex e-commerce or ERP/CRM platform.

When you should not buy this

The design is not approved. Code is slower to change than a Figma frame. Finish the design first.

You need a demo, not a product. For an investor meeting or a user test, a Figma prototype is enough.

The site is a few simple pages your own team will edit. A hosted site builder may serve better than custom code. See WordPress vs Webflow vs custom .

You expect a one-click export. Export plugins and generated snippets produce markup for a frame. That can be acceptable for a throwaway page and is rarely acceptable for a product that must be maintained.

Figma to production code is part of web application development at WavX, and the approach for Next.js projects is on the Next.js development page.

Frequently asked questions

Can WavX build the front end from our Figma design?

Yes. We build responsive front-end code from an approved Figma design in React or Next.js for the web, and React Native or Flutter for mobile apps. The first step is a review of the file, because the quote depends on what the file contains and what it leaves undecided.

Will the built site look exactly like the design?

At the screen widths that were designed, spacing, sizes, colours and typography should match the design's values. Between those widths, and across different phones and browsers, text rendering and available space differ, so the build follows responsive rules agreed with the designer. We review the build against the design side by side before sign-off.

Our design only has desktop screens. Is that a problem?

It means the mobile layout has not been designed, and someone has to decide it. We can propose the mobile layouts for your approval as design work, or your designer can add them. Building mobile without an agreed layout produces rework.

Do you work from Sketch, Adobe XD or a PDF?

We work in Figma. A design in another tool usually needs to be brought into Figma first, and we assess that case by case before quoting.

How much does Figma to code cost?

A front-end-only build is quoted after the file review, and we publish no figure for it. If the design is for a whole website or application, the website cost calculator and the software cost estimator give planning ranges for the full build.

Do your developers need a paid Figma seat?

Figma's Dev Mode requires a Full or Dev seat on a paid plan, as of October 2026. Agree at the start how the developers will get that access, so the inspection tools are available from the first day.

Sources

Figma Help: Guide to Dev Mode · read 2 October 2026

Figma Help: Overview of variables, collections, and modes · read 2 October 2026

Figma Help: Guide to variables in Figma · read 2 October 2026

Figma Help: Guide to auto layout · read 2 October 2026

Figma Help: Guide to the Figma MCP server · read 2 October 2026

Figma developer docs: Code Connect · read 2 October 2026

Tailwind CSS docs: Theme variables · read 2 October 2026

web.dev: Web Vitals (Core Web Vitals thresholds) · read 2 October 2026

Related

UI/UX design

Web application development

Next.js development

UI/UX design cost in India

Software cost estimator

Build your own software — your way, your pricing.

WavX Solutions is here to create your own software in a fully custom way, built exactly how you work — with a pricing model that fits your business. Connect now and let's build it.

Contact Now helpwavx@gmail.com