HTML to Frames documentation

1. Open Figma (desktop app or browser) and go to the Community page of HTML to Frames.
2. Click Open in… or Try it out and pick a file. The plugin is saved to your account.
3. Next time, start it from the menu: Plugins → HTML to Frames — or press ⌘/ (Ctrl / on Windows) and type HTML to Frames.

The plugin works in Figma Design files. It needs no account: the Free plan starts automatically, and Pro is bought inside Figma.

1. In the Import tab, keep the source on Link and paste a URL, for example your own homepage.
2. Under Screens, Desktop is selected and shows Site width — the plugin will measure the page's real design width during import. On Pro, click Responsive set to add Tablet and Mobile.
3. Leave Auto Layout on. Click Import.
4. Watch the progress: the page is rendered, images are prepared, layers are built and Auto Layout is applied and verified.
5. The result screen shows the number of frames and layers, the share of frames with Auto Layout, missing fonts and any warnings.

Your page appears on the canvas as a row of frames named like yoursite.com — Desktop (1920). Every text, image and vector is editable.

Link

Any public page. Pages that need a login, live on localhost or in a private network can't be reached by the capture service — use the Chrome extension for those.

Multiple

Paste up to 10 links, one per line. They're imported one after another, each as its own row. Pages of the same site share one measured width so they line up.

Local file

Choose an HTML file, a site folder or a .zip (up to 30 MB). For folders, pick which pages to import. You can also choose Paste code and paste HTML with inline or embedded CSS. Files are opened from memory in an isolated browser and deleted right after the import.

Browser

Paste a capture made with the HTML to Frames Chrome extension (⌘V), drop a .h2f file, or connect the extension once and use Send to Figma. See Chrome extension.

AI tools

Connect an MCP client in the AI tab and let your AI tool send pages. See AI tools (MCP).

Site width is measured at import time: layouts with edge-to-edge sections are placed in a 1920 frame with the content box centered; truly boxed sites use their box width (for example 1200 or 1280); fluid layouts use 1440. Free imports one screen per page; Pro and Team up to four. All screens of one page count as one import.

Before building, the plugin checks which fonts on the page are not available in Figma on your computer. The Missing fonts screen suggests a replacement for each one — first a family that starts with the same word, then the first installed font of the CSS font stack, then Inter. Search and choose another family if you like, then decide whether to remember the choice for this site or every site. Skip uses the suggestions once without saving. Clear saved choices with forget saved under the option.

With Styles & variables on (Pro):

• Colors used at least twice — and colors that match the site's CSS custom properties — become variables in a collection called Colors · yoursite.com. Names come from the site's tokens when possible (--brand-primary → brand/primary), otherwise from hue and shade (blue/500).
• Typography used at least twice, or 20 px and larger, becomes text styles named like yoursite.com/Heading/32/40 Bold.
• Repeated shadows become shadow styles sm, md, lg, xl.
• If your file already contains a variable or style with the same value, it is reused.

Snap to my file's styles goes one step further and maps near-matches onto your own design system.

With Components & hover states on, repeated structures become components placed in a Components · yoursite.com frame next to the page, and each occurrence becomes an instance with its own text and images. Elements with a hover look become component sets with State=Default and State=Hover variants.

Choose Color scheme → Light + Dark (Pro). The page is read twice — with prefers-color-scheme: light and dark — without reloading. Every color that changes becomes a variable with a Light and a Dark value, and a dark copy of each screen is placed next to it with the collection set to Dark. Figma files on the Starter plan allow one mode per collection; in that case the plugin tells you dark mode was skipped. Sites that switch themes only with a JavaScript toggle (not the system setting) will import in their default theme.

• Links keep working in Present mode: external links open their URL; links to pages you also imported become Navigate interactions.
• Fixed and sticky headers stay in place while you scroll; horizontal carousels and scroll areas scroll.
• After an import, Import linked pages lists other pages of the same site found on the page. Tick the ones you want and they're imported as a Multiple import with the same settings.
• Select an imported frame and click Re-import to fetch a fresh version from the stored source URL.

Use the free HTML to Frames Chrome extension for pages the capture service can't reach: logged-in pages, localhost, intranets and the exact state of a page (an open dropdown, a filled form).

1. Install the extension and pin it to the toolbar.
2. Open the page and click the extension → Capture this page, or Select an element to capture just one part (move the mouse, ↑ for the parent, ↓ back, Enter to choose, Esc to cancel).
3. The capture is copied to your clipboard (or downloaded as a .h2f file).
4. In Figma, open the plugin → Browser tab → press ⌘V or drop the file.

Send to Figma: in the plugin's Browser tab click Connect to get a one-time code, enter it in the extension under Connect to Figma. From then on the main button is Send to Figma and captures go straight into your open plugin.

The extension captures one screen at the current window width — resize the window for tablet or mobile layouts. Each capture counts as one import.

1. Open the plugin → AI tab → Connect an AI tool. A personal token is created and shown once.
2. Copy the setup for your client: Claude Code (a claude mcp add command), Claude Desktop (a config using mcp-remote) or Cursor & others (JSON with URL and header).
3. Keep the plugin open in Figma and ask your AI tool to import a page, for example: “Build a pricing page with three plans and send it to Figma with HTML to Frames.”

Available tools: import_html (HTML up to 2 MB, optional name and screens), import_url (any public URL) and import_status. The import runs in your plugin with your plan and the tool receives a summary — frames, layers, Auto Layout share and missing fonts. Create a new token invalidates the old one; Disconnect removes it. Web connectors in claude.ai are not supported yet.

One import = one page with all its screens. Counters reset monthly (UTC). If a very long page is cut by a plan limit, the frame gets a purple Capture limit strip so you always know. Buy Pro in the Plan tab with Figma's checkout; Team members enter their license key in the same tab and can remove it from an account to free the seat.

The page looks different from my browser. Turn on Hide cookie banners & popups, try Extra wait for slow animations, or use the Chrome extension to capture exactly what you see.

“This address can't be reached.” The capture service only opens public addresses. For localhost, staging behind a VPN or logged-in pages, use the Chrome extension.

Text wraps differently. Usually a font difference — map the missing font to the right family on the Missing fonts screen.

Some frames have no Auto Layout. That's deliberate when Auto Layout would move things. Open the diagnostics list on the result screen to see the reason (uneven gaps, overlap, text size).

Something is blank. Maps, iframes and WebGL scenes are captured as images; if one is still blank, the content probably needed a user action or a login.

“Limit reached.” You've used this month's Free imports. They reset on the 1st (UTC), or upgrade to Pro for unlimited imports.

Still stuck? Write to [email protected] with the URL and a screenshot.