Sometimes it doesn’t render like on a real mobile phone because the websites are not responsive the viewport sizes but try to detect if the device is a mobile phone or not. For these sites, what you see in the browser and what is captured by html.to.design is different from what you would have in a real phone.
How capture a mobile version of the website with a custom user-agent
1. Install our Chrome extension
Changing the user-agent is only possible with imports via the Chrome extension.
If you haven’t already, go to our Chrome extension page and click on
Add to Chrome.
2. Follow the same steps as capturing a mobile version
Open devtools and activate
Device Mode to be able to set your own viewport dimensions. You can see the full step-by-step here.
3. Change the user-agent
Go to the triple dot menu
More tools >
Use browser default and select a
Custom user agent.
The webpage should be rending like a real mobile phone. If it’s not the case, then change to another user-agent until you find a valid one.
4. Capture page and import the
.h2d file into Figma
Capture full page in the html.to.design extension, and drop the generated
.h2d file into the plugin.