From Figma to website: how design becomes code without losing the details

The designer has delivered 40 beautiful screens in Figma, and everyone is delighted. Then the developer asks the first questions: What does the menu look like on mobile? What happens when a heading runs to three lines? What does an error in the contact form look like? Which of the four nearly identical blues is the right one? Two weeks go on emails back and forth, and the budget slips. It is a common story, and the usual cause is a thin handoff. This guide is about getting the design safely into code.

How does a Figma design become a website?

The key idea is that a website is built from components: a button, a card, a section with an image and text, a footer. Each component is built once in code and reused everywhere. When the Figma file is organised the same way, the developer can translate it almost directly. When every screen is drawn on its own, the developer has to find the patterns and guess which differences are intentional. That is the single biggest factor in how long the build takes.

What should the designer deliver to the developer?

• Every page type at two widths at least: mobile (about 375 px) and desktop (about 1440 px), ideally tablet too.
• A component page with every button, field, card and section and their variants.
• States: hover, focus, active, disabled, loading, error and empty.
• Colours, typography and spacing as Figma variables with clear names.
• Real copy or realistic lengths, including the longest heading and the shortest card.
• Mobile menu and navigation: open, closed and with sub-menus.
• Forms with labels, helper text, error messages and confirmation.
• Icons as SVG, high-resolution images and fonts licensed for the web.
• Notes on animation and transitions: what moves, how fast and when.
• A prototype of the key flows, so the developer can see the sequence.

What is most often missing, and what it costs

What are design tokens, and why do they matter?

Design tokens are the smallest design decisions stored as named values: a colour, a font size, a spacing, a corner radius. Instead of writing a colour code 200 times in the code, both Figma and the code use the same name, such as "color.primary". When the primary colour changes, it changes in one place, and the whole site follows. In Figma, tokens are created as variables, and they can be exported to code. There is also a shared file format, drawn up by a W3C community group, so tools can exchange tokens. Tokens are also what make dark mode and multiple brands possible without building everything twice.

Tokens are the foundation of a design system. If you only need one website, a small set of tokens and a component page can be enough. If several products, apps and teams have to share a design, it is time for a proper design system. We explain the difference in design system vs style guide.

How do you make a Figma file ready for development?

1. Use auto layout everywhere, so elements behave as in a browser when content changes.
2. Build everything that repeats as components with variants, such as a button in three sizes and four states.
3. Create variables for colours, typography and spacing, and use them consistently.
4. Name layers and components with words a developer can reuse in the code.
5. Keep a "ready for development" page and move work-in-progress sketches to another page.
6. Add notes directly in the file on behaviour you can’t see: animation, validation, what is clickable.
7. Hold a short handoff meeting where the designer walks through the file and the developer asks questions.

Can AI tools turn Figma into code?

AI has made the path from design to code much shorter. Figma itself has launched tools that can produce prototypes and code from designs, and there are plugins and AI coding assistants that read a Figma file and generate React components. Developers working with Figma’s Dev Mode and AI assistants in the editor can build a first version of a section in minutes. That changes where the time goes: less on writing layout code, more on structure, content, accessibility, speed and the things the design doesn’t show.

If you already have a site or app generated with AI and want to know whether it can go live, we have written a guide to going from AI prototype to production, with the typical gaps and how to close them.

Which mistakes make the Figma-to-code step expensive?

• The design is approved before anyone has thought about mobile.
• Every page is drawn separately without shared components.
• The developer is only involved once the design is "finished".
• There is no agreement on a design review, so small deviations pile up.
• The design keeps changing in the same file during the build, without anyone saying so.
• Fonts without a web licence or images without rights.
• No decision on the CMS: what should editors be able to change themselves?

What does it cost to get a website built from a Figma design?

A worked example: a 20-person consultancy has a design from a freelancer with eight page types, a blog and a contact form, in Danish and English. The file has components and variables but lacks a mobile menu and error states. The developer spends half a day reviewing the file and clarifying the gaps with the designer, then estimates 70–90 hours including the CMS and design review. Had the file lacked components, the estimate would be closer to 120 hours. With us, a site like this typically fits one of our web packages at a fixed price, and if we do the design ourselves, the handoff disappears entirely.

Which technology should the Figma design be built in?

The choice depends on what the site needs to do and who will maintain it. A component-based framework such as Next.js with React maps directly onto Figma’s component thinking and gives high speed and full control. WordPress is widespread with many plugins, but a precise design usually needs a custom theme. Webflow is visual and good for marketing teams who want to build pages themselves. We compare them in Next.js vs WordPress and Webflow vs WordPress. Whatever you choose, the design has to work on every screen size, which we cover in responsive web design.

How do we go from Figma to a finished website at Ceptiv?

We have design and development under one roof, so most of our projects have no classic handoff at all. The designer and developer work in the same Figma file from day one, tokens go straight into the code, and the design review happens continuously. If you have a design from someone else, we review the file before we give a price, so you know what is missing. We build from scratch in Next.js and TypeScript, and you own both the code and the data. Read more about our web development, or send us your Figma link and get a fixed price within 24 hours.