Guides · Updated 1 November 2026

Why a website imported into Figma looks wrong, and how to fix it

A browser builds a page at runtime from fonts, scripts and images it downloads as you scroll, while an importer works from one snapshot. Most broken imports come from fonts Figma doesn't have, images that were never loaded, pages built by JavaScript, overlays that sit on top, and elements such as video that cannot become layers.

You paste a URL into an import plugin, wait a few seconds, and get something that is almost the page. The layout is right, but the headline is set in the wrong typeface, half the product photos are grey rectangles, the hero video is frozen on a dark frame and a cookie banner covers the bottom third of every frame. On a single-page app you may get nothing at all, just an empty white frame the width of a desktop.

None of this is random. A web page is a program that runs in the browser, and what you see is the result of that program at one moment: fonts downloaded from a server, images requested as you scroll, content inserted by scripts, banners added by third parties. Figma has none of that machinery. An importer has to take a snapshot of the running page and translate it into layers. Each failure above comes from a specific gap between the two, and most of them have a simple fix.

Fonts Figma doesn’t have

Websites load their typefaces as web fonts, files that the browser downloads and uses for that page only. Figma works with the fonts installed on your computer plus the ones Figma provides itself. When an import names a family Figma cannot find, the text layer keeps its content and size but falls back to another font, which changes line lengths and breaks carefully balanced headings.

Brand typefaces are the usual culprits, because they are licensed and rarely on a designer’s machine by default. The fix is to install the font, or to swap the family across the whole file from Figma’s Missing fonts dialog. In the browser version of Figma, your own fonts also need Figma’s font installer. Figback lists every substitution it made after an import (“Font substitutions: X → Y”), so you know which families to look for. Check the licence first. Many foundries sell web and desktop licences separately, and a webfont licence bought for the site does not always cover using the font in a design tool.

Images that were never loaded

Most modern sites lazy-load images: the browser only requests a picture when it is about to scroll into view. If the importer reads the page without scrolling, everything below the first screen is still a placeholder, and those placeholders become grey boxes.

Two other causes look the same. Some image servers refuse requests that don’t come from the site itself, so a plugin fetching the file directly gets an error. And responsive images offer several files for different screen sizes, so a capture at a mobile width may pick a small, blurry version that looks poor when you scale the frame up.

The reliable fix is to import from a browser that has actually rendered the page. Figback’s Chrome extension, Figback Capture, scrolls through the tab you are looking at before saving it, so lazy images get requested the way they would for a reader. For public pages that block plugins, Figback opens the page on its own server in a real browser, which scrolls the page the same way.

Pages built by JavaScript

Open the source of a React, Vue or Angular app and you often find almost nothing: a <div id="root"> and a few script tags. The content only exists after the scripts run, fetch data and build the page. An importer that reads the raw HTML sees the empty shell, which is where the blank frame comes from.

The page has to run before it can be captured. In Figback, page scripts are off by default when the plugin loads a URL itself. If the result is almost empty, it tells you so and suggests ticking “Run page scripts” or using the extension, and falls back to capturing the page on its server. The extension captures whatever your own tab has already built, including views that need a login.

Banners, pop-ups and other things on top

Cookie consent banners, chat bubbles, newsletter pop-ups and “download our app” bars are real elements of the page, so a faithful capture includes them. A capture taken on a server also sees the page as a first-time visitor from another location, which can mean a different consent banner or a different language.

The simplest answer is to take the capture from your own browser after dismissing what you don’t want. Accept or decline the banner, close the chat window, then capture the tab. Anything that slips through is a layer you can delete in Figma.

Things that can’t become layers

Some parts of a page have no vector equivalent. Video, <canvas> drawings, WebGL scenes, maps and embedded widgets in iframes are rendered pixels or other people’s pages. At best an importer brings them in as still images, which is why the hero video arrives as one frame.

Figback takes the video’s current frame (or its poster image) and the canvas pixels. Embeds, maps and 3D scenes become screenshots when the page is captured on the server; in the plugin and the extension they come in as grey placeholders labelled with what they were, such as “Embed · youtube.com”. If a video frame is dark or mid-transition, pause it where you want it before capturing, or replace the image in Figma with a better poster.

Layout that depends on the window

CSS often describes layout relative to the screen: widths in percentages, heights in viewport units, rules that switch at breakpoints. A capture freezes all of that at one window size. A page captured at 1280 pixels wide is neither your desktop design at 1440 nor your tablet design, and it can catch the layout halfway through a breakpoint change.

Capture at the exact widths you design for. Figback imports several widths in one go (1440, 768 and 390 by default, or your own), so each frame shows a real state of the responsive layout. Absolutely positioned and transformed elements are the other source of surprises: a badge pinned with position: absolute or a card nudged with transform keeps its place visually but sits outside the auto layout flow around it. Our guide on how CSS maps to auto layout goes through those cases.

A short pre-import checklist

1. Install the site’s fonts, if you have the right to use them on your computer.
2. Open the page in your own browser and let it finish loading.
3. Dismiss cookie banners, chat widgets and pop-ups.
4. Pause any video on the frame you want to keep.
5. Capture at the widths you actually design for.

An import done this way will still need cleaning up, because a web page and a Figma file are organised differently. But it starts from the page as people really see it, so the time goes into design decisions: naming layers, tightening spacing, replacing placeholder content.

Questions

Why are some images grey boxes after importing a website into Figma?

Usually the images were lazy-loaded and never requested, because nothing scrolled the page, or the image server refused requests from outside the site. Importing from a real browser tab, where you have scrolled the page, fixes most cases.

Why does Figma show different fonts than the website?

Figma can only use fonts installed on your computer or available in Figma. If the site's web font is not among them, Figma substitutes another one. Install the font (you may need a desktop licence) and replace the missing font in the file.