"It doesn't look like the design" is not one bug. It's usually four or five small ones stacking up, and they have different fixes. Here's the list in the order I'd check them, based on what actually goes wrong in our own Figma-to-web renderer.

Fonts, first, always

Roughly half of all mismatch reports are typography. Two things go wrong and they look different from each other.

If the typeface is right but everything reads a little flat, your weights got lost. Figma stores a family and a style string like SemiBold, not a number. Drop font-weight: SemiBold into CSS and the browser discards it and renders at 400. If the typeface itself is wrong, the font simply never loaded, because Figma doesn't hand out font files and your visitor doesn't have your font installed.

I wrote both of those up properly in Figma fonts not working on your website. Fix fonts before you look at anything else, because bad weights change text width, and changed text width moves everything around it.

Text reflows, boxes don't

In Figma a text layer is a box with the glyphs already laid out. In a browser the same string gets re-laid-out by the font engine at render time, and it will not land on the same pixel. Even with the correct font at the correct weight, hinting and subpixel rounding differ between Figma's renderer and a browser's.

The practical symptom is a headline that fits on one line in Figma and wraps to two on the site, which then pushes everything below it. Our renderer pads text elements by a few pixels of extra width specifically to absorb this, and that's a hack, not a solution. The durable fix is to stop designing text boxes that are exactly as wide as the text. Give every text layer some slack, and check your longest string rather than your prettiest one.

Sub-pixel rounding

Figma will happily give a layer a width of 247.3333px. Browsers accept fractional pixels but round differently when they paint, and a stack of rounded values drifts. If two elements are meant to line up, you'll see a one-pixel seam.

Round your coordinates to whole numbers in the design. Figma has a "Round to pixel" action in the right-click menu on a selection. It takes ten seconds and removes a whole class of these.

Images look soft or cropped

When a design gets published, image layers are rasterized out of Figma as PNGs. Ours export at 1x scale, which means a 400px-wide layer exports a 400px-wide PNG, and that PNG will look soft on a retina display where the browser is drawing at 2x. If your images look fuzzy, that's usually the cause.

Cropping is a separate thing. A raster image in a fixed-size box has to resolve the aspect ratio mismatch somehow. object-fit: cover fills the box and crops the overflow, contain fits the whole image and leaves gaps. Cover is the sane default and it's what we use, but it means a subject near the edge of a photo can get sliced off at a size you didn't check.

The other cost of raster export is weight. A design full of large photographs becomes a page full of large PNGs. Compress your source images before you import them into Figma, because nothing downstream can recover detail you already have and nothing can shrink a file you never optimised.

Effects that CSS doesn't have

Some Figma properties have no clean CSS equivalent, and converters quietly approximate them.

Drop shadow spread is one. Figma gives you offset, blur and spread. Plenty of converters, ours included, emit offset and blur only, so a design that leans on spread comes out with a lighter shadow than intended. Background blur and layer blend modes are similarly lossy. Per-side borders are another: CSS border is one value, so a frame with a 2px top and a 1px bottom can't be expressed in a single shorthand.

If a specific element looks off and it isn't fonts, check whether it's carrying an effect in that category.

No mobile frame

This is the big structural one. Figma positions everything at absolute coordinates on a fixed canvas. A browser window is any width the visitor wants. Scaling a 1440px desktop design down to a 390px phone gives you 9px body text.

There is no automatic answer to this. It's a design decision about what stacks, what hides and what shrinks, and only you can make it. That's why our plugin asks for a desktop frame and a mobile frame per page rather than guessing. If your site looks fine on your laptop and broken on your phone, you're almost certainly missing the second frame. More on that in Figma responsive web design.

How to actually check

Resize your browser window slowly from wide to narrow and watch where things break. Then open the site on a real phone, not just Chrome's device emulator, because emulators use your desktop's installed fonts and will happily show you a typeface your visitors don't have.

If you want to see how a design comes across without hand-writing the conversion, the Figma plugin publishes straight from the file.