How to Import a Long, Scrolling Web Page into Figma with HTML.to.design

To import a long webpage that html.to.design captures only at the visible height, open it in Chrome, increase the viewport height in Developer Tools Device Mode, then use the browser extension’s Capture full page option. Import the resulting .h2d file into the html.to.design Figma plugin. This is the vendor’s documented workaround for pages that do not capture at their full length; it is not guaranteed to work for every site. html.to.design’s full-page troubleshooting guide.

Use the browser extension for a long or session-specific page

1. Install the html.to.design browser extension if you have not already.
2. Open the target page in Chrome. For a private or logged-in page, sign in and navigate to the exact page and state you want to capture.
3. Open Developer Tools and turn on Device Mode using the device toolbar control.
4. In the viewport dimensions, set a very large height. The official guide does not prescribe a universal number, so adjust it for the page rather than relying on a fixed value.
5. Run the html.to.design extension and choose Capture full page.
6. Send the capture to the html.to.design Figma plugin, or save the generated .h2d file and drop it into the plugin.

The goal of the height adjustment is to work around pages whose body height, scrolling behavior, or displayed items cause the plugin to capture only the visible area. html.to.design says it normally captures the full page, but its workaround is a troubleshooting step, not a promise that every page can be captured in full.

Choose the right import route

Page or situation	Recommended route	Handoff
Public page available at an open URL	Paste the URL into the plugin’s Web tab and select Import.	Directly into the plugin.
Private page, local page, logged-in session, or a particular browser state	Open the page in the browser and capture it with the extension.	Send to the plugin or save the .h2d file locally.
The result stops at the visible portion	Use Developer Tools Device Mode, set a very large viewport height, then choose Capture full page.	Import the resulting .h2d file.

Direct URL import is convenient when the page is public and the URL is enough to identify what should be imported. Use the extension when the page depends on your browser session or you need to capture the page as currently presented in the browser. The official import guide covers the URL route, and the capture guide describes extension capture and the local file handoff.

What to expect from the Figma result

html.to.design describes its imports as editable design layers. The imported result is useful as a starting point for inspecting or adapting a page in Figma, but a long capture does not guarantee that every page element will be reconstructed exactly as it behaves in a live browser. The vendor also describes support for overflow scrolling and fixed or sticky elements in prototypes; those features do not guarantee successful capture on every site. See the official feature overview.

For a very long page, inspect the imported frame from top to bottom. Check whether sections are missing, repeated, cut off, or out of sequence before using it as a design reference.

Troubleshooting

Symptom	Likely cause	What to try
Only the visible viewport was imported	The page’s height, scrolling, or item display may not be handled as expected by the normal full-page capture.	Enable Device Mode in Developer Tools, increase the viewport height, and capture again with Capture full page.
The page is inaccessible through the plugin’s Web tab	The page may be private, local, or require an authenticated browser session.	Open and sign in to the page in Chrome, then capture it with the browser extension.
The plugin does not receive the capture	The capture may have been saved locally rather than sent directly, or the handoff may not have completed.	Look for the generated .h2d file and drop it into the html.to.design plugin.
Some content is missing or the result is still incomplete	The workaround is not universal; a site may use unusual scrolling or page-height behavior.	Repeat the capture after adjusting the viewport height. If the page still does not capture correctly, the documented material does not specify a universal fix.

Practical considerations

• Viewport height: The guide says to set a very large height but does not specify a standard value. Treat it as a page-specific troubleshooting adjustment.
• Page state: For session-dependent pages, open the desired state in the browser before capturing; the extension route is intended for private and session-specific pages.
• Handoff: A local .h2d file gives you an explicit artifact to import if direct transfer to the plugin is inconvenient.
• Allowance: html.to.design’s official overview states that the free plan includes 12 imports per month. The page does not state a year for this allowance, so check the current plan details if it affects your workflow.
• Time and reliability: The official material provides no capture-time benchmark or guarantee that the large-viewport workaround succeeds on every site. Check the imported page rather than assuming a successful capture is complete.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. A screenshot can help when you need a visual reference quickly; it does not import a webpage as editable Figma layers or replace the html.to.design workflow above. The one-request example below saves a screenshot of a page. See the ScreenshotNeo API documentation for options.

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

ScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.

Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.

FAQ

Does html.to.design always capture an entire webpage?

The vendor says it normally captures the full page, but documents cases where the result includes only what is visible. The large viewport-height workaround is for those cases and is not guaranteed for every site.

Can I import a page that requires a login?

Use the browser extension with the page open in your authenticated browser session. Direct URL import is the documented route for public pages.

What file does the browser capture produce?

The documented local handoff is a .h2d file, which you can drop into the html.to.design Figma plugin.

How many free imports does html.to.design include?

The official overview states 12 free imports per month. The source does not attach a publication year to that allowance.