How can we help?

In a Figma design file, open the plugins menu, search for HTML to Figma and run it. You can also start from the plugin's page in Figma Community.

There is nothing else to install: no browser extension and no program on your computer.

1. Open the plugin and choose Continue on website. Your browser opens this site.
2. Sign in with Google.
3. Check that the code on the page is the same as the code in the plugin, then confirm.
4. Go back to Figma. The plugin connects by itself within a few seconds.

Keep the plugin open while you sign in. You only do this once on each computer; after that the plugin remembers you.

1. Copy some HTML, with its CSS.
2. Click inside the plugin and press ⌘V on a Mac or Ctrl+V on Windows. You can also drop an .html file on the plugin window.
3. Click Import to Figma.
4. The new frame appears on your canvas, selected and in view.

A whole page or a small fragment. The styles have to come with the HTML, in one of these ways:

• a <style> block in the HTML,
• inline styles on the elements, or
• a stylesheet link with a full address that starts with https://.

A link to a file that only exists on your computer or on the original site, such as styles.css, cannot be found, and the HTML imports as plain unstyled text.

Importing from a website address is planned. Until then you can copy the page's HTML:

1. Open the page in Chrome or Edge.
2. Right-click the page and choose Inspect.
3. In the Elements panel, right-click the first line that starts with <html and choose Copy, then Copy outerHTML.
4. Paste it into the plugin.

If the result has no styles, the page links to its stylesheets with short addresses. Add this as the first line of what you paste, with the site's own address in it: <base href="https://example.com/">

Only import pages you have the right to use.

• Exact visual mirrors the rendered page with fixed positions. It is the closest match, with the least structure.
• Editable is the default. It keeps real frames, text and vectors with clean styles.
• Auto Layout turns rows and columns from the CSS into Auto Layout frames, with their padding, gaps and alignment.

• Components: a pattern that repeats becomes one component with instances. A repeat that cannot be reproduced exactly stays a normal frame.
• Styles: colors and text settings used more than once become local styles, linked to the layers.
• Click states: the plugin clicks each button and tab and saves every resulting screen as its own frame, joined by a prototype link. This is the slowest step on a large page.
• Interactions: hidden pop-ups, modals and menus are saved as overlay frames.
• Replace previous import: the new frames take the place of the ones from your last import, in the same position.
• Smart names: layers are named by their role, such as Navbar, Button or Card.
• Auto width: the import uses the HTML's own width. Turn it off to set a width yourself.

Figma can only use fonts it has. If a font from your HTML is not available, the plugin uses the closest one, and the closest weight within a family. The report after the import lists every replacement. Install the font and import again to get the exact look.

Images are loaded from their addresses while the layers are built. If a site refuses that, the image becomes a labelled placeholder that you can replace by hand. The report says how many images could not be loaded.

While HTML to Figma is in early access, every account gets 30 imports each month, with every feature. Only successful imports are counted.

On the 1st of every month, at midnight Indian time. Imports you did not use do not carry over. Your dashboard shows how many are left and when they renew.

New imports wait until the 1st. The designs you already imported are not affected. If you often need more, tell us what you are working on.

Paid plans with higher limits will come later. We will tell you before anything changes, and nothing is ever charged unless you choose a plan yourself.

• Keep the plugin open while you sign in on the website. Closing it stops the connection.
• The code on the website must match the code in the plugin. If it does not, start again from the plugin.
• A connection code works once and for a few minutes. If you waited too long, start again.
• Check that Figma can reach the internet. The plugin needs it to check your account.

A failed import does not use one of your imports. The plugin shows a short reason and an error ID.

• Check that you pasted HTML, and that it is complete.
• For a very large page, import one section at a time.
• If it keeps failing, use Report issue in the plugin, or send us the error ID.

• No styles at all: the CSS did not come with the HTML. See What you can paste.
• Different fonts: the font is not available in Figma. See Fonts.
• Grey boxes instead of images: the images could not be loaded. See Images.
• Positions are fixed: CSS Grid is placed by coordinates. Try the Exact visual mode for the closest copy.

The count changes only after a successful import, and the plugin shows the new number straight away. Your dashboard lists every import with its result. If a failed import was counted, tell us and we will correct it.