Appearance

Requirements & installation ​

HTML → Frames is two parts that work together: the Figma plugin you see, and a local render server that does the heavy lifting in a real headless browser. The plugin cannot import anything without the server running.

Requirements ​

Requirement
FigmaThe Figma desktop app — development plugins can't load in the browser version
EditorFigma Design files (not FigJam or Slides)
Browser engineChrome or Edge installed (the server finds either automatically)
OSWindows (the bundled launcher is a .bat; the server itself is Node and runs anywhere)

The distribution package is self-contained — it bundles its own Node runtime, so there is nothing else to install.

Install the server ​

  1. Extract the plugin package to a folder of your choice — don't run it from inside the zip archive.
  2. Double-click start-server.bat. The first run installs its dependencies, then starts the server at http://localhost:3847. Keep the console window open while you work; closing it stops the server.

Windows SmartScreen

The first launch may trigger a SmartScreen warning because the .bat is unsigned. Click More info ▸ Run anyway. Everything the script does is local — it starts a Node process on port 3847.

The launcher also frees port 3847 if a previous session left a process on it, so re-running the .bat is the universal "restart the server" move.

Install the plugin ​

  1. Open the Figma desktop app.
  2. Go to Plugins ▸ Development ▸ Import plugin from manifest…
  3. Select manifest.json in the plugin folder.
  4. Run Plugins ▸ Development ▸ HTML → Frames.

The plugin window opens with a server status pill at the top. Green Server connected means you're ready; red Server not running means the server isn't up yet — start it and click Check.

Install the Chrome extension (optional) ​

The HTML to Frames Capture extension lets you capture any element from a page in your own browser — including pages behind a login — and import it with one click. It lives in the extension folder of the package:

  1. Open chrome://extensions in Chrome.
  2. Enable Developer mode (top right).
  3. Click Load unpacked and select the extension folder.

How to use it is covered in Import a website URL.

Next ​

With everything green, do your first import.