From install to canvas in two minutes.
Copy a live page with the extension, or bring in an HTML file or a snippet of code. Here is each way, step by step.
01 · Start here
Install the plugin and the extension.
- Add the Figma plugin from Figma Community. Run it from the plugins menu in any design file.
- Add the Chrome extension and pin it to the toolbar. It also installs in Edge and Brave.
- Both are free, with no account. You only need the extension to copy live pages; files and code go straight into the plugin.
any-website.com
Chrome extension
Chrome Web Store
Added · FreeFigma plugin
Figma Community
Added · Free02 · Live page · Extension
Copy the page as you see it.
- Open the page, click the extension icon and choose Copy page for Figma.
- It scrolls to the bottom so lazy images and scroll animations load, then puts you back where you were.
- The page is captured at your window's current width. For another width, resize the window and copy again.
- The first time, it asks for access to all sites. That is only for images hosted on other domains; if you decline, they come in as gray placeholders.
Web2DesignCopy page for FigmaScrolling page, loading lazy images0%03 · Live page · Extension
Or copy just one element.
- Choose Pick an element to copy. The popup closes and whatever is under the cursor is highlighted.
- Click or press Enter to copy it. ↑ and ↓ move to the parent or child, Esc cancels.
- The frame is named after the page and the element, like
Northwind — Pricing.
HeaderNorthwindProductPricingDocsSign inHeroPlan the week
in five minutes.Calendars, tasks and notes in one quiet place.Button/PrimaryStart freeSee pricingImageCardsCalendarTasksNotes↑ ↓ parent / childEnter copyEsc cancel
04 · Live page · Plugin
Paste it into the plugin.
- Open Web2Design in Figma and go to the Extension tab.
- Press Ctrl V (⌘ V on Mac). You will see the page title, its size and how many images it has.
- Click Import to Figma. Large pages are built in chunks, so Figma stays responsive.
Web2DesignExtensionFileCodeNNorthwind — Plan the weeknorthwind.app · 1440 × 900 · 12 imagesChangeViewport
The page is imported at the size of your Chrome window (1440 × 900).
OptionsReset to defaults
LayoutAuto layout · Semantic names›ComponentsRepeated · Header & footer›StylesColors · Text styles›Import to Figma♥ Support Web2Design ♥
05 · HTML file · Plugin
Drop in HTML files.
- In the File tab, drop one or more
.htmlfiles. - Pick the viewports you want: 4K, desktop, laptop, tablet, mobile. Each file gets its own row, its viewports side by side.
- Use full URLs or data URIs for images. Relative paths like
img/a.pngcan't be loaded.
Drop an .html file- In the File tab, drop one or more
06 · Code · Plugin
Or paste the code itself.
- In the Code tab, paste HTML with its
<style>and import it. No file needed. - Handy for snippets from an AI tool or a component you are building.
hero.html- In the Code tab, paste HTML with its
07 · Before you import
Choose what comes in.
- Layout: auto layout,
::before/::after, overlays and semantic layer names. - Components: repeated elements, and header & footer.
- Styles: colors, text styles and effects. Create new ones, match the ones in your file, or save them as variables.
- Your last settings are remembered. See every option.
Layout
- Layout: auto layout,
Tips & known limits.
- Infinite feeds stop scrolling after one minute or 60,000 px; what has loaded by then is copied.
- Fonts that aren't installed in Figma fall back to Inter. Install the font and import again.
- Icon fonts like Font Awesome come in as images, not editable vectors.
- Match existing looks at this file's local styles and variables, not team libraries.
- Gradients aren't saved as styles; only solid colors are.
- Only rotation is kept from transforms; skew and 3D are ignored.
Still stuck? Read the FAQ or check which CSS comes through.
Questions while getting started.
You always need the Figma plugin. The Chrome extension is only for copying live pages, such as sites behind a login, single-page apps or pages with web fonts. HTML files and pasted code go straight into the plugin.