How to Import a Website into Figma Without Losing Fonts and Images

Use Figma’s Chrome extension to capture a whole webpage or a selected element, then paste the result into a Figma Design file. The capture becomes editable layers, but it is not a guaranteed pixel-perfect reconstruction: check fonts, line breaks, image fills, and page sections after pasting. Install or otherwise make missing fonts available to Figma; import missing image files separately.

What you need

Google Chrome with Figma’s Chrome extension.
A Figma Design file or FigJam board where you can paste the capture.
Access to the target webpage and, if assets do not transfer, its original image files and font styles.

Figma describes the extension as a way to capture a webpage or element and bring it into Figma Design or FigJam as editable layers. The available webpage code and rendered content determine what can be translated. See Figma’s Chrome extension guide and its guide to turning coded screens into editable design layers.

Import the webpage into Figma

Open the page in Chrome. Load the page at the state you want to capture. If it has content that appears only after interaction or scrolling, make that content visible first where possible.
Launch the Figma Chrome extension. Choose Select element for a component or region, or Capture page for the full page, including content beyond the current viewport.
Paste into Figma. Open a Figma Design file or FigJam board and use the standard paste shortcut for your operating system.
Inspect the result. Check that sections, text, font styles, line breaks, and image fills are present. Treat the result as editable starting material and clean up any mismatches.
Repair missing fonts or images. Follow the font and image steps below, then review the affected layers again.

Use a selected-element capture when you need one component and want to limit cleanup to that region. Use a full-page capture when you need the page structure beyond the visible viewport. Either way, the capture can only translate content and properties that are available from the page.

Keep fonts from going missing

A font can be specified by the website but unavailable to Figma on your computer. Figma includes Google fonts and Apple fonts by default; additional fonts must be available in the environment where the design is opened.

Identify the font style used by the missing text in the source design or website.
Install the font locally if it is not already available. Figma’s desktop app includes its font installer. If you work in a browser, install Figma’s font installer, FigmaAgent.
Reload the open browser design file after installing the font. If you use the desktop app, restart it if the font does not appear.
Inspect the pasted text again for missing-font indicators, changed line breaks, or altered text wrapping.
For collaborative files, confirm that other editors also have access to the same font styles. A font available only on your computer may still appear missing to a collaborator.

Figma’s instructions for adding fonts are in Add a font to Figma. Do not confuse importing a webpage into Figma Design with publishing a Figma Sites project: the requirement for a WOFF or WOFF2 file applies to adding a custom font to a published Figma Site, not to the documented website-capture workflow.

Restore missing or altered images

If a capture leaves out an image or its fill is wrong, import the original asset into Figma and place it in the relevant layer’s fill. This gives you more control over which source image is used than relying on the webpage capture to reproduce every image perfectly.

Locate and save the original image file you need.
Import it into the Figma file.
Select the layer that should display the image and replace or update its fill with the imported asset.
Check the crop, scale, and placement against the intended composition.

Figma Design documents support for JPG, PNG, HEIC, WebP, and GIF images; TIFF is supported only in Safari. Imported SVGs become editable vector layers. Figma handles images as layer fills. An uploaded image larger than 4096 × 4096 pixels is scaled proportionally so its longest dimension is no more than 4096 pixels; some metadata may be lost during resizing. See Add images and videos to designs and the Figma Design import guide.

What transfers—and what still needs review

Part of the page	What to expect	What to check
Text and font properties	Some available font properties can be applied to the captured layers.	Font availability, weight, size, line height, and wrapping.
Variables	Available variables may be carried through or bound where the source makes them accessible.	Whether the resulting values match the intended design. Production builds that shorten or scramble CSS variable names can make matching less reliable.
Images	Images may come through as fills, depending on what is available in the rendered page.	Missing assets, incorrect image fills, crops, and scaling.
Components and styles	The capture arrives as layers; it does not automatically map every layer to components and styles in your design library.	Rebuild or assign library components and styles where needed.
Page structure	A full-page capture can include content outside the current viewport.	Sections, spacing, and content that depends on page state or interaction.

The page’s code and rendered content affect what can be translated, so do not treat a capture as a complete design-system reconstruction. Figma’s coded-screen guide explains the editable-layer workflow and its limits.

Troubleshooting

Problem	Likely cause	What to do
Text shows a missing-font warning	The font is not available to Figma on this computer.	Install the font. In a browser, install FigmaAgent; reload the file afterward. In the desktop app, restart if needed.
A collaborator sees a different or missing font	The font is installed only for your account or computer.	Make sure each editor has access to the font styles, then have them reload the file.
Text wraps differently from the webpage	The font, font properties, available width, or translated layout differs from the source.	Confirm the font is available, compare the text properties and layer width, and adjust the resulting layers.
An image is absent or the wrong image appears	The page capture did not translate that image into the expected fill.	Import the original supported image file and replace the layer fill.
An image looks smaller or has changed metadata	A large imported image may have been scaled by Figma.	Check whether its dimensions exceed 4096 × 4096 pixels and review the scaled asset and its crop.
The capture does not match a library component	Captured layers are not automatically mapped to every design-library component or style.	Assign the appropriate library styles and components after pasting.
A CSS variable did not match	The variable may not be available to translate, or a production build may have shortened or scrambled its name.	Review the resulting value and set the intended variable manually where needed.
Some page content is absent	The content may not have been available in the rendered page state when captured.	Load or reveal the relevant content before capture, then capture the page or the specific element again.

Choosing between capture and manual asset import

Use the extension when you want a quick editable starting point from a whole page or a selected component. Use manual imports to restore a particular font or image with more control. In practice, combine them: capture the page structure first, then repair the assets and styles that need exact attention.

Or skip the browser setup

If you need a screenshot as a visual reference before rebuilding the design in Figma, ScreenshotNeo is a website screenshot API and MCP server. Its API returns an image or PDF from one GET request. It does not turn the webpage into editable Figma layers; use the Figma extension workflow above when editable layers are the goal. See the ScreenshotNeo documentation for API details.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

Performance, reliability, and cost notes

For the Figma workflow: capture only the scope you need. A selected element limits the material to inspect; a full-page capture includes off-screen sections and may require more cleanup.
For fidelity: budget time to check typography, image fills, and library mapping. The source page’s available code and rendered state constrain what can transfer.
For asset recovery: keep original image files and font availability in mind. Manual imports are the controlled fallback when an asset does not survive capture.
For ScreenshotNeo: only clean shots are billed. Its response identifies page verdict and billing status in headers; cache hits cost nothing. Plans range from Free at 1,000 shots per month to Business at 1,000,000; yearly billing gives two months free, and every feature is available on every plan. See the documentation for configuration and response details.

FAQ

Can I turn a webpage into editable Figma layers?

Yes. Figma’s Chrome extension captures a page or element for pasting into Figma Design or FigJam as editable layers. You may still need to adjust the result.

Do I need to upload a WOFF file to import a website into Figma Design?

The documented capture workflow does not require that. WOFF or WOFF2 is relevant to adding a custom font to a published Figma Site, which is a separate task.

Will my collaborators see the same fonts?

They need access to the same font styles. If a collaborator sees a missing font, make it available to them and have them reload the file.

Can a screenshot API replace the Figma extension?

No. A screenshot API produces an image or PDF, while the extension provides editable layers. Use a screenshot as a reference when you do not need those layers.