How to use the Figma CSS to Webflow
- In Figma, select a layer and open Dev Mode → Code → CSS (or right-click → Copy as → Copy as code → CSS). Copy several layers at once if you like.
- Paste the CSS here. Each
/* Layer name */comment becomes its own block. - Choose whether to convert px to rem and whether to keep fixed sizes (usually you don’t want them).
- Copy individual values from the Style panel table, or the clean CSS for custom code.
Why Figma’s CSS needs cleaning before Webflow
Figma generates CSS that describes the layer exactly as drawn on the canvas — including position: absolute with left/top coordinates, fixed pixel widths and heights, and auto-layout leftovers such as flex: none; order: 0; flex-grow: 0;. Copying those into Webflow produces rigid layouts that break on smaller screens. What you actually need from a design hand-off are the design decisions: type sizes, weights, line heights, colours, spacing, radii and shadows.
What gets converted
| Figma output | Becomes | Why |
|---|---|---|
font-size: 32px | 2rem | rem respects users’ browser font size and scales consistently. |
line-height: 120% or 38.4px | 1.2 | Unitless line-height scales with the font size everywhere it’s inherited. |
letter-spacing: -0.64px | -0.02em | em tracking stays proportional when the font size changes (fluid type). |
var(--Text-Primary, #141827) | #141827 + variable list | Shows which Figma variables to recreate in Webflow’s Variables panel. |
position: absolute; left; top, flex: none | removed | Canvas positioning, not layout intent. |
Mapping to Webflow’s Style panel
Values are grouped by the Style panel section where you enter them — Layout (display, direction, gap, alignment), Spacing (padding, margin), Size, Typography, Backgrounds, Borders and Effects (shadows, opacity). In Webflow you can type units directly into fields, so 2rem or 1.2 work as-is.
Going further
For spacing and type that adapts between mobile and desktop, convert pairs of Figma values into fluid clamp() with the Clamp Calculator. For single conversions use PX to REM, and for icons use SVG to Webflow.
Tools that pair well with the Figma CSS to Webflow
- Color Converter — Paste any CSS colour — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.
- Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
- HTML & CSS to Webflow — Paste HTML and its CSS, click Copy to Webflow and paste into the Designer — you get real Div Blocks, Headings, Links, Images and Lists with classes, combo classes, tablet/mobile breakpoints and hover states instead of one big Code Embed.
- Class Name Generator — Describe a section in plain words — “hero with tagline, heading, two buttons and an image on the right” — and get a consistent class structure in Client-First, BEM or simple kebab-case, ready to copy into Webflow as elements.
Frequently asked questions
Where do I find CSS in Figma?
Why are width and height removed?
Can I paste several layers at once?
/* Layer name */ comment starts a new block, and each block gets its own Style panel table.