Not capturing full page

Last updated

html.to.design always captures the full length of a webpage. However, some sites have different ways of handling the body height, scrolling and item display. So, it may happen that the plugin only captures what you see, as opposed to the full length of the page.

Workaround to capture the full page

1. Install the browser extension

If you haven’t already, install the html.to.design browser extension.

2. Go to Developer Tools

Open your developer tools and activate Device Mode by clicking on the icon that depicts a laptop and mobile phone. This will open the device toolbar with editable dimensions.

Chrome DevTools with the cursor on the Toggle device toolbar button (Ctrl+Shift+M).

3. Set a very large viewport height

In order to work around the website’s settings, select a very large height in the viewport dimensions.

Chrome's device toolbar with the dimensions set to 1920 × 6000, the page shown full length.

4. Capture the full page and bring it into Figma

Click the html.to.design icon, keep Browser ticked in Viewports (it uses the size you set in DevTools) and click Capture Full Page. Then copy the capture to Figma, send it to the plugin or download it as an .h2d file: you get editable designs of the full page length.

The html.to.design extension popup with the Browser viewport ticked and the Capture Full Page button.