العربيةStart free

Pageloa®—Guide

Install the Pageloa Chrome extension and Figma plugin, capture the page in Chrome, then paste it into Figma. You get an editable Figma file with screens for each device, a design system and components, not a screenshot.

Convert your first website freeDownload

How to convert a website to Figma

Pageloa®—Guide

Website to Figma in six steps

  1. 01.

    Install both apps

    Add the Pageloa Chrome extension and the Pageloa Figma plugin. The free plan includes 5 captures a month.

  2. 02.

    Open the page in Chrome

    Any page you can open in a normal Chrome tab, including staging or local development addresses.

  3. 03.

    Choose devices, theme and area

    Pick Desktop, Tablet and Mobile widths, light or dark theme, and the visible screen, the full page or sections.

  4. 04.

    Capture for Figma

    The capture is copied to your clipboard, on your computer. Nothing about the page is uploaded.

  5. 05.

    Paste in Figma

    Run Pageloa in Figma, press ⌘V or Ctrl+V, choose what to create and select Create Figma file.

  6. 06.

    Review and reuse

    Check the Quality Report page for anything approximated, then work from the screens, design system and components.

What the Figma file contains

  • 01 Cover: The site, its source, the capture date and what the file contains.
  • 02 Site Architecture: The captured pages, grouped by the website’s own categories.
  • 03 Screens: Editable screens with named layers and real text, sizes side by side: Desktop → Tablet → Mobile.
  • 04 Motion: A storyboard of the states the page went through while scrolling.
  • 05 Design System: Colour variables, paint and text styles, spacing, radius and effects, documented on boards.
  • 06 Components: Masters built from what the site repeats: buttons, inputs, cards and more.
  • 07 Assets: Images and media used in the screens, stored once.
  • 08 Handoff: A handoff page, plus design tokens, components, screen map and rules as files.
  • 09 Quality Report: What was measured, approximated or flattened, and how close Figma got to the site.

Why not just take a screenshot?

  • Real text with text styles, so copy can be edited and translated.
  • Named layers and shapes with their fills and radii, instead of one flat image.
  • Colours bound to variables, plus text, paint and effect styles.
  • Components built from the interface elements the site repeats.
  • Desktop, tablet and mobile screens side by side from one capture.

Good to know

  • Browser pages such as chrome:// cannot be captured. Canvas, WebGL and video come in as images.
  • Results depend on how each website is built; the Quality Report shows what was measured or approximated.
  • It works on Figma’s free Starter plan.
  • Only capture websites you own, have permission to reproduce, or are studying.

Pricing · FAQ

Convert your first website freeDownload