---
name: web-import-master
description: Get a live web page -- public, behind a login, localhost or staging -- into Figma as editable layers with Web Import Master; use when a user asks to import, clone or convert a website, landing page or UI into Figma.
compatibility: A person runs the steps in Google Chrome and Figma; the agent guides them. No headless path, no API.
metadata:
  author: Evgenii Shmoish
  homepage: https://evgeniiarts.github.io/web-import-master/
---

# Web Import Master

Turns the page open in a Chrome tab into native Figma layers: frames, text, fills, gradients,
shadows and masks, with Auto Layout, variables and text styles as per-import options. Two parts:
the free Chrome extension **Web Import Master: Scanner** writes one local `.SHMOISH` file; the
Figma plugin **Web Import Master** rebuilds it on the canvas. Nothing is uploaded.

## Use when

- The user wants a website, landing page, competitor UI, logged-in app screen, localhost or
  staging page in Figma as editable layers, or a site's colors and type as Figma variables and
  text styles.
- Prompts of the shape "import website to Figma", "html to figma", "clone this landing page into
  Figma", "redesign an existing site in Figma".

## Not for

- A single screenshot or image: there is no DOM to rebuild from.
- PDFs, Sketch or XD files.
- Pages the user cannot open in Chrome.
- Headless automation: no public API or CLI. The `.SHMOISH` format is produced by the extension
  and read by the plugin only. A pipeline that needs one: open a feature request (link below).

## Prerequisites

- Google Chrome with the free extension **Web Import Master: Scanner**:
  https://chromewebstore.google.com/detail/lcbapmgigajdpechghjnkbaidfhenbhl
- Figma with the plugin **Web Import Master**:
  https://www.figma.com/community/plugin/1630132577257927426
- Price: extension free; plugin 7-day free trial with every capability enabled, then $15 once
  through Figma's own payments. No subscription, no credits.

## Procedure

Hand the user these steps with the button labels as written.

1. Open the page in Chrome. Put it in the state to capture first -- open the menu, modal or tab
   you want; the scan records what is visible at that moment.
2. Click the extension icon, then **Scan this page**. A `.SHMOISH` file lands in Downloads.
   - Breakpoints: before scanning, tick **Mobile 390**, **Tablet 768**, **Desktop 1440** and/or the
     current viewport. One file carries all of them. A breakpoint scan attaches Chrome's
     `debugger` permission for its duration (Chrome shows its "is debugging this browser" notice);
     a plain Scan this page never does.
3. In Figma, open the target file and page, run the plugin **Web Import Master**, drop the
   `.SHMOISH` file in.
4. Tick the capabilities for this import:
   - **Auto Layout** (on by default): flex and grid flow become Figma Auto Layout, so frames reflow
     on resize. Off: absolute positions, the closest pixel match.
   - **Variables & text styles**: colors land in a collection named after the host (for example
     `example.com__Colors`) with nodes bound to them; repeated typography becomes text styles.
5. Click **Import as design**. Fonts not installed in Figma are mapped in the font-check step
   before conversion: install the font, or pick a replacement there (default Inter).

Light and dark: scan the site in one theme, switch its theme (the site's own switch or the OS
setting), scan again. In the plugin drop the first file, click **+ Add mode**, drop the second,
then Import as design. Result: one color collection with a `light` and a `dark` mode, the
imported frame bound to it; Figma's mode selector switches the whole design. The Scanner
captures the page as it looks now and emulates no color scheme, since sites with their own
theme switch ignore the browser's.

## Output

- Native layers on the user's current Figma page, inside one wrapper frame centered on the
  viewport; the plugin creates no pages and stays on the current one.
- Layer tree nested as on the page; every element a frame, shape or text node.
- Typography: family, size, weight, letter spacing, decoration, alignment.
- Fills and all six CSS gradient families (linear, radial, conic and repeating variants);
  shadows, blend modes, corner radius, rotation, strokes; `clip-path` and `mask-image` as masks.
- Form controls (inputs, buttons, checkboxes, radios, selects, progress, meters) as frames.
- Breakpoint captures side by side as labeled frames.
- With Variables & text styles: a color collection (light and dark as modes when a second theme
  was added) and text styles.

## Limits

- Canvas, WebGL and video: still frames of what was rendered at scan time.
- Hover menus, dropdowns, modals: only the state visible when Scan this page was clicked.
- Fonts render exactly only when installed in Figma; otherwise the replacement applies.
- Very large pages give large `.SHMOISH` files; import time scales with node count.

## Privacy

- The extension reads a page only on Scan this page and writes the file to the user's machine. No
  server, no analytics, no telemetry; its only network activity is fetching the scanned page's
  own assets, as the browser already does to render it.
- The Figma plugin declares no allowed domains, so it has no network access at all.
- Policy: https://github.com/evgeniiarts/web-import-master/blob/main/PRIVACY.md

## When the import does not match the page

Open an **Import fidelity** issue: https://github.com/evgeniiarts/web-import-master/issues/new/choose
Attach the page URL (or a description if private), the `.SHMOISH` file if shareable, screenshots
of page and result, plugin and extension versions, and which capabilities were on. Fixes land in
the generator, generically, not per site.

## Links

- Figma plugin: https://www.figma.com/community/plugin/1630132577257927426
- Chrome extension: https://chromewebstore.google.com/detail/lcbapmgigajdpechghjnkbaidfhenbhl
- Demo video: https://youtu.be/Ms3HrUkAosc
- Landing page: https://evgeniiarts.github.io/web-import-master/
- FAQ: https://github.com/evgeniiarts/web-import-master/blob/main/FAQ.md
- Full text for LLMs: https://evgeniiarts.github.io/web-import-master/llms-full.txt
- Feature requests and issues: https://github.com/evgeniiarts/web-import-master/issues/new/choose
- Other plugins by the author: https://www.figma.com/@evgeniishmoish