How to Import a Local HTML File into Figma with HTML.to.design

To import a local HTML file into Figma with HTML.to.design, open the plugin, select its File tab, then drag in a .html or .htm file—or click the drop zone and choose the file. The plugin renders the page and imports the result into Figma. Check the imported design afterward: externally referenced images, CSS, or JavaScript may not load if they are missing or unavailable publicly.

Import a single local HTML file

1. Open the HTML.to.design plugin in Figma.
2. Select the File tab.
3. Drag your .html or .htm file into the drop zone. Alternatively, click the drop zone and select the file from your computer.
4. Wait for the plugin to render and import the page.
5. Review the resulting layers and appearance. Check images, fonts, styles, and interactive or dynamically loaded content against the browser-rendered page.

The File workflow is designed for local HTML files. The plugin will try to import resources referenced by the HTML, but that is not guaranteed: resources may be absent or inaccessible. The vendor describes this limitation in its local file documentation.

Choose the right import path

Your situation	Recommended path	What to know
One standalone HTML file and its referenced assets are accessible	Upload the file in the plugin’s File tab	This is the direct local-file workflow. Verify the rendering after import.
A page consists of HTML, CSS, images, and JavaScript files	Package the webpage files as a ZIP and upload it in File	The vendor says ZIP uploads should be smaller than 32 MB.
The page needs a browser session, local access, or a login	Open it in a browser with the HTML.to.design extension and capture it	The extension can send the capture to the plugin or save a local .h2d capture for import.
External references in the HTML upload are missing or unavailable	Try capturing the page as rendered in a browser	The extension is the documented route for capturing local or private pages.

Import a webpage bundle with a ZIP

If the HTML depends on neighboring files, include them in the archive rather than uploading only the HTML. The vendor documents ZIP uploads containing HTML, CSS, images, and JavaScript, with a size limit below 32 MB.

1. Put the HTML file and the resources it references into a folder, preserving their relative paths.
2. Create a ZIP archive of the webpage files.
3. Keep the ZIP smaller than 32 MB.
4. In the plugin, choose File and upload the ZIP through the drop zone.
5. Inspect the imported page for missing assets and layout differences.

Preserving relative paths matters because an HTML file may reference assets such as ./styles/main.css or ./images/hero.png. A missing file or a path that no longer matches can prevent a resource from appearing. A ZIP upload can carry the files together, but it does not guarantee that every resource or browser behavior will reproduce exactly.

Capture a local or private page with the browser extension

Use the extension when the page must be opened in a browser to render correctly—for example, because it is local, private, or depends on browser state. The extension captures the page as rendered in the browser, then lets you send the capture to the plugin or save a local .h2d file to import.

1. Install and open the HTML.to.design browser extension using the vendor’s extension documentation.
2. Open the local or private page in the browser where the extension is available.
3. Capture the page with the extension.
4. Send the capture to the Figma plugin, or save the capture as a local .h2d file and import that file into the plugin.
5. Review the imported result in Figma.

The vendor’s privacy statement about data remaining on your computer applies specifically to the downloaded local .h2d option. Do not assume it describes every extension workflow.

What to check after import

• Images: compare each image with the browser page. Confirm referenced files exist and their paths are correct.
• CSS and layout: check spacing, fonts, colors, and responsive behavior. Imported rendering can differ from the browser.
• JavaScript-driven content: verify that the relevant content was visible when captured or rendered.
• Browser state: if the page depends on a login, local server, or browser session, try the extension workflow.
• Figma structure: inspect the imported layers and adjust them as needed for the design work that follows.

Or skip the browser setup

If the page is publicly reachable and you need a screenshot reference, ScreenshotNeo can capture its URL through one API request. This returns an image or PDF; it does not import editable HTML layers into Figma. See the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

Replace the example URL with a publicly accessible page you want to capture. Cookie banners, popups, and chat widgets are removed before the shot; those cleanup steps can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers report the page verdict and billing status. An MCP server provides screenshot tools for AI agents. The free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots.

Sign up for 1,000 free screenshots a month, with no card required.

Troubleshooting

Problem	Likely cause	What to try
The file is not accepted	The upload is not a standard HTML file or the wrong plugin tab is open.	Choose the File tab and use a .html or .htm file.
Images or styles are missing	Referenced resources are absent, their paths do not resolve, or they are not publicly available.	Include the required files in a ZIP with their relative paths intact. If the page needs browser access, capture it with the extension.
The page looks different from the browser	The upload renderer may not reproduce all external resources or browser-dependent state.	Compare the page in a browser and try the extension capture workflow for the rendered page.
The page is private or only accessible locally	A direct file import may not have access to the page’s browser session or local environment.	Open the page in a browser and capture it using the HTML.to.design extension.
The ZIP upload is rejected	The archive may exceed the documented 32 MB limit.	Reduce the archive size and upload a ZIP smaller than 32 MB.

Performance, reliability, and limits

For a single self-contained file, direct upload is the shortest path. For a page with local dependencies, bundling the resources can avoid missing-file problems. Browser capture is useful when rendering depends on a live browser session or private/local access. These paths address different inputs; none should be treated as a guarantee of pixel-perfect rendering or complete transfer of every external resource.

Before spending time adjusting the imported design, compare it with the page at the intended viewport and verify important content and assets. If a resource cannot be accessed by the import workflow, fix its availability or use a browser capture. The available vendor material does not specify import-time guarantees or a promise that all third-party scripts will run.

FAQ

Can I import an HTML file into Figma?

Yes. Open HTML.to.design, select File, and upload a standard .html or .htm file.

Will the result be fully editable?

The workflow imports the rendered page into Figma, but the cited documentation does not promise that every browser behavior or external resource will transfer perfectly. Inspect the resulting design and adjust it for your needs.

Can I import a page that requires a login?

The vendor documents the browser extension for local or private pages. Capture the page in the browser, then send the capture to the plugin or save a local .h2d file.

Does ScreenshotNeo replace HTML.to.design?

No. ScreenshotNeo returns a screenshot or PDF from a URL. It is useful when you need a clean visual reference without setting up a browser capture, but it does not import editable HTML into Figma.