How to design a website in Figma: a walkthrough from the first frame to the production build

The short answer

To design a website in Figma: set up frames at the widths you'll build (for example 1440 and 390 pixels wide), wireframe the pages with real content, turn colour, type and spacing into variables and styles, build reusable components with auto layout, design every page at each width, prototype and test, then hand the file to developers in Dev Mode or publish it.

Figma Sites can publish straight from Figma. As of 12 November 2026 it is still in open beta, publishing needs a Full seat on a Professional plan or higher, and Figma's help centre says the code can't be exported. Below is each step, with a real example from this site: how its type scale goes from two frame widths to one line of CSS.

Before you open Figma

• A site map and real content. Designs built on placeholder text break when real headlines arrive. Get at least the home page, one service or product page and the contact page in near-final words.
• The build route. Decide early whether the site will be published from Figma Sites, rebuilt in a platform such as Webflow, or coded. It changes what you need to specify: a coded site needs tokens and states; Figma Sites needs HTML tags set on layers.
• The right seats. You can design on Figma's free Starter plan. Dev Mode's code snippets need a paid plan and a Full or Dev seat; publishing a Figma Site needs a Professional plan or higher and a Full seat.

Step 1: Set up the file and the widths

Create pages for the site map and wireframes, the design system, the page designs and the prototype. Then pick the widths you'll design at. A common setup is one desktop width and one phone width, with a layout grid on each.

Dardo's site specifies every display size at two widths, 1440 and 390 pixels, and lets the browser scale between them. Whatever you choose, design at the widths the developers will test against, and agree how things scale in between before you design pages.

Step 2: Wireframe with real content

Wireframe in greys with auto layout, one frame per page template, using the real headings from your content document. This is where you test the structure: does each page answer what a visitor came for in the first screen, and does the navigation hold every page in the site map? Fix structure here; it's cheaper than fixing it in finished designs.

Step 3: Turn decisions into variables and styles

Colours, spacing, corner radii and type sizes become variables and text styles, named for their job ("Page title", "Card title"), not their value ("Serif 92"). Colour variables can carry light and dark modes. These names are the bridge to code: a developer should find the same name in the CSS.

Here is how that works on this site. Each display role has a size at 1440 and at 390 pixels, and one CSS clamp() line scales it in a straight line between them:

The arithmetic is simple. For the page title, the size grows 48 pixels over 1,050 pixels of width, or 4.57 pixels per 100 pixels of viewport (4.57vw), and starts from 26.2 pixels so that it lands on exactly 44 at 390. The last number caps it, so the title stops growing at 104 pixels on wide screens. In Figma, that means two text styles per role, one per width; in code, one line.

Two lessons from the same scale. First, design for real content lengths: titles over 48 characters step down to the long-title role so they don't fill the first screen. Second, check the font licence covers the website, not just desktop use; the display face here is a commercial typeface licensed for the web.

Step 4: Build components with auto layout and states

Make every repeated piece a component: buttons, links, cards, navigation, footer, form fields, notices. Use auto layout so they reflow when text grows or a translation runs longer, and set minimum and maximum widths. Then add variants for each state: default, hover, focus, pressed, disabled, error and empty. Focus states are the ones most often forgotten, and keyboard users depend on them.

Step 5: Design every page at every width

Design each template at both widths with real content: the home page, a long page, a short page, a listing, a form, the 404. Look for the uncomfortable cases: the longest title, a card without an image, a price with three lines of conditions, a page in your longest language.

Step 6: Check accessibility in the design

Most accessibility problems can be caught before a line of code:

• Contrast. WCAG 2.2 asks for at least 4.5:1 for body text and 3:1 for large text.
• Target size. Interactive targets should be at least 24 by 24 CSS pixels, or spaced so a 24-pixel circle around each doesn't overlap another.
• Headings. One H1 per page, then levels in order. Write them on the layers so the developer or Figma Sites gets them right.
• Focus and motion. A visible focus state on every control, and a version of each animation that respects reduced motion.

Step 7: Prototype, test and hand off

Link the main paths in a prototype (land, compare, contact) and watch a few people use it before the build starts. Then hand off. In Dev Mode, developers inspect layers and get code snippets in CSS, with units in px or rem; Code Connect shows your real component code instead of generated snippets. The Figma MCP server passes variables and components into AI coding tools, which helps them keep the code consistent with the design system.

Step 8: Choose how the design gets to the web

What Figma Sites can and can't do

Figma's help centre describes the beta in detail. What matters before you commit a real website to it:

• What it does: responsive layouts with breakpoints, the same design tools as Figma Design, copy and paste from Figma Design, interactions such as marquee and parallax, a CMS with collections and CSV import, site settings for titles, meta descriptions, language, Google Analytics, noindex, password protection, a cookie banner and custom code in the head or body.
• Publishing: a Full seat on a Professional, Education, Organization or Enterprise plan. Sites go to a random figma.site subdomain first, then a custom domain if you add one; Professional plans can connect up to 10 custom domains, and Figma says the limits are free "through 2025" and "subject to change".
• Hosting: on Amazon Web Services in the United States, with domains and routing served by Cloudflare.
• Code: "It's not currently possible to export your site's code for external publishing." If you leave, you rebuild.
• HTML: most layers become div tags; text layers become paragraphs and linked layers become links. Headings, landmarks and alt text are set by hand in the Accessibility section.
• Redirects: we found no redirect settings in Figma's Sites documentation. If you're moving a site that already gets search traffic, confirm how old URLs will be redirected before you switch.

How Dardo works

Dardo designs in Figma and builds in Astro, Webflow, Framer or Next.js, depending on who will edit the site and what it has to do; its default stack is Astro on Cloudflare with a headless CMS. See the web design and web development services, and, if you're choosing a platform, Webflow vs Framer.