Improve image quality

When importing webpages into Figma, html.to.design automatically detects if the images on the page are low resolution and can be improved. If they have a higher resolution source available, the plugin offers the option to import these high-resolution versions instead.

How to improve image quality

1. Import a webpage via URL or the Chrome extension

Import the webpage into Figma as usual, either by entering the public URL or using our Chrome extension for pages behind a log-in.

2. Select to import high-res images

After the import, if the plugin detects images available in higher resolutions, a dialog will appear with suggestions to improve the webpage you’ve just imported.

Simply click Import high-res versions and the plugin will instantly improve the images’ quality to the highest resolution available.

3. Alternatively, use the side-menu shortcut

If you skip the image resolution notification, or want to improve images in a webpage you already imported, you can also improve an image’s quality at any time from Figma’s bottom-right options menu.

With the entire webpage or any individual image selected, check the bottom-right side panel in Figma. If the images have a higher resolution available, you will see the option Import high-res images.

This feature is great for image-heavy pages such as Pinterest boards, your portfolio, a blog… For professional, accurate designs, it’s important to have good image quality.

html.to.design helps you create high-fidelity prototypes by importing the best quality images available.

ℹ️ This feature is only available with a PRO subscription.