Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Import a website into Figma - Use the free Weblify Chrome Extension to copy a webpage or selected element into Figma as editable layers.. Machine-readable page: /weblify/advanced/import-website.md.

Import a website into Figma

Use the free Weblify Chrome Extension to copy a webpage or selected element into Figma as editable layers.

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 ​

  1. Install the Weblify Chrome Extension.
  2. Open the webpage you want to copy in Chrome.
  3. Select the Weblify extension icon.
  4. Choose Copy page or Pick element.
  5. Wait for the Copied to clipboard confirmation.
  6. 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 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.

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.