The Weblify Figma plugin links to the free Weblify Chrome Extension for website importing. The extension works directly in your browser, including on pages that use your current login or browser session.
Import a website
- Install the Weblify Chrome Extension.
- Open the webpage you want to copy in Chrome.
- Select the Weblify extension icon to open its toolbar on the page.
- Keep Current Window Size, or open the size control to choose one or more capture sizes.
- Choose Copy page to copy the whole page, or Pick element to select one element.
- Wait for the Copied to clipboard confirmation. When copying a page, let Weblify finish scrolling and preparing the content.
- Return to your Figma file and paste with Command + V on macOS or Ctrl + V on Windows.
You can also open the Import Website tab in the Weblify Figma plugin and select the Chrome extension download link.
Choosing capture sizes
Open the size control beside the Weblify logo to see Capture sizes. The control shows the selected size, or a count such as 2 sizes when several are selected.
| Size | Browser viewport |
|---|---|
| Current Window Size | Your current browser window's content width and height. The dimensions update when you resize the window. |
| Desktop | 1440 × 900 pixels |
| Tablet | 768 × 1024 pixels |
| Mobile | 390 × 844 pixels |
| Custom | Enter a width from 280–2560 pixels and a height from 320–2400 pixels. |
Select multiple checkboxes to copy separate, named frames side by side into Figma. At least one size stays selected. Your choices remain selected when you use Restart, until you reload the webpage.
Copy page includes the full page height at each selected width. The height setting controls the viewport used to lay out the page; it does not crop the result to that height. Pick element copies the selected element as it appears at each chosen size.
Use Current Window Size on its own to capture the live page as it is currently laid out. Other sizes reflow a copy of the page, so content controlled by JavaScript, embedded content, or canvas graphics may differ.
Loading content before copying
Copy page automatically scrolls through the page before capturing it. This gives lazy-loaded images and sections that appear on scroll a chance to load. Weblify then restores your original scroll position and captures the prepared page at your selected sizes.
Preparation has a time and scroll limit so pages with an endless feed do not keep loading forever. Very slow content, later items in an endless feed, or content a site removes as you scroll can still be missing. Pick element does not automatically scroll the page first.
If something is missing, scroll to it yourself, wait for it to appear, and try Pick element with Current Window Size selected on its own.
Choosing an element
Select Pick element, then hover over the page and click the element you want to copy. Use the up and down controls to move to a parent or child element before copying it.
If the selected element is hidden at one of your chosen sizes, Weblify reports an error instead of copying an empty frame. Choose a size where the element is visible and try again.
After a successful copy, select Restart to return to the toolbar with your size choices intact, or close the confirmation notice.
Browser-internal pages and the Chrome Web Store do not allow extensions to inject page controls. Open a regular website tab before selecting the Weblify extension icon.