Getting started

This walks you from nothing to a page on your canvas. It assumes the plugin and its server are already installed — if not, do Requirements & installation first.

Your first import

• Start the server. Double-click start-server.bat in the plugin folder. A console window opens and stays open — that's the render server running at localhost:3847.
• Run the plugin. In the Figma desktop app, open a Design file and run Plugins ▸ Development ▸ HTML → Frames.
• Check the connection. The status pill at the top should read Server connected. If it says Server not running, click Check after the console window finishes starting up.
• Pick an input. Drop an .html file on the Local File tab, or switch to Website URL and paste a link — the field validates as you type.
• Import. Leave the viewport at 1280 × 1024 for now and click Import to Canvas. The log fills with progress; when it reports Import complete, the new frame is selected and zoomed into view.

The result is a single frame named Imported (1280) — the number is the viewport width you imported at. Everything inside is regular Figma layers: select, restyle, and rearrange as usual.

Choosing a viewport

The viewport is the browser window the page is rendered in, so it decides which layout you get — the same URL imports differently at phone and desktop widths.

Field	Default	Range
Viewport Width (px)	1280	320 – 3840
Viewport Height (px)	1024	480 – 2160

Height matters less than width: the page is captured at full length regardless, so the frame grows to fit the content. Width is what triggers responsive breakpoints.

Parse Only — the dry run

Parse Only runs the entire render and extraction but creates nothing on the canvas. The log reports what would be imported — how many nodes, which fonts, any warnings. Use it to sanity-check a heavy page or debug a problem import before committing it to your file.

Next

• Auto Layout, vector icons, and local styles are all opt-in or tunable — read Settings.
• Importing a live site? Import a website URL covers lazy loading, logged-in pages, and the Chrome extension.