You can turn a Figma design into code three ways: an export plugin that generates HTML or React, an AI tool that builds a first version for you to refine, or hand-coding with exact values from Figma's inspect panel. Auto layout maps to CSS flexbox, and Figma variables map to CSS variables. Paste Figma's CSS below to get Tailwind classes.
| If you need | Use |
|---|---|
| A clickable prototype today | An export plugin or AI tool |
| A production site you will maintain | Hand-code, or refine generated code |
| A live website without writing code | A website builder, using the design as reference |
Updated
Copy the CSS for a layer from Figma's inspect panel or Dev Mode, paste it into the converter, and copy the Tailwind classes it writes. It handles the common layout, spacing, colour and type properties; anything it does not recognise is listed so you can handle it yourself.
Auto layout is flexbox; brush up with the flexbox and grid cheat sheet.
Paste the CSS from Figma's inspect panel. Example input is filled in.
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 24px 20px;
gap: 12px;
width: 320px;
background: #FFFFFF;
border: 1px solid #E5E5E5;
border-radius: 16px;
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 26px;
letter-spacing: -0.01em;
color: #1F1F1F;| Way | What you get | Good for | Watch out for |
|---|---|---|---|
| Export plugins | Generated HTML/CSS or React from the frames | Quick prototypes, simple static layouts | Absolute positioning, odd class names, hard to maintain |
| AI tools | Code or a working page built from a screenshot, a frame or a description | A fast first version you then refine | Spacing and responsive rules drift from the design; review it |
| By hand from Inspect / Dev Mode | Code you write, reading exact values from the design | Production sites and design systems | Slowest; needs a developer |
| In Figma | In CSS / Tailwind |
|---|---|
| Auto layout, horizontal | display: flex (flex) |
| Auto layout, vertical | flex-direction: column (flex-col) |
| Gap between items | gap (gap-4, gap-[18px]) |
| Padding | padding (p-6, px-4 py-2) |
| Hug contents | width: fit-content or no fixed width (w-fit) |
| Fill container | flex: 1 or width: 100% (flex-1, w-full) |
| Corner radius | border-radius (rounded-xl) |
| Variables / styles | CSS custom properties or Tailwind theme tokens |
| Constraints | Responsive rules: max-width, media queries, flex wrap |
Name tokens by role, not by value, so a rebrand changes one line. Tailwind can read them through its theme.
:root {
--color-brand: #4f98fb;
--color-text: #1f1f1f;
--radius-card: 16px;
--space-section: 96px;
}
/* tailwind (v4) */
@theme {
--color-brand: #4f98fb;
--radius-card: 16px;
}Auto layout becomes flex with a gap; padding and radius come straight from the inspect panel. Edit the values and the card updates.
<article style="display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:16px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);max-width:320px;font-family:system-ui">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='160'><rect width='100%' height='100%' fill='%23dbeafe'/></svg>" alt="" style="width:100%;height:auto;border-radius:12px">
<h3 style="margin:0;font-size:20px;line-height:28px">Weekend workshop</h3>
<p style="margin:0;color:#525252;font-size:15px;line-height:22px">Learn to shape and bake two loaves.</p>
<a href="#" style="align-self:flex-start;padding:10px 16px;border-radius:999px;background:#4f98fb;color:#fff;text-decoration:none">Book a place</a>
</article>If the goal is a business website rather than an app, rebuilding the design in a website builder, with the Figma file open as a reference, is often faster than coding it. Keep the colours, fonts and spacing from the design and let the builder handle hosting and responsive layout.
Figma shows CSS for each layer in its inspect panel but does not export a whole page as a working website. Plugins and AI tools fill that gap, with varying code quality.
Sometimes for simple pages. Generated code often uses fixed sizes and absolute positions that break on other screens, so plan time to clean up structure, responsiveness and accessibility.
Auto layout is flexbox: direction becomes flex-direction, spacing becomes gap, padding stays padding, and hug or fill sizing becomes fit-content or flex: 1.
Yes. It runs entirely in your browser; the CSS you paste is not sent anywhere.
Related: CSS flexbox and grid cheat sheet, shadcn/ui examples, CSS formatter, UI components, All free tools.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.