How to Use HTML.to.design to Recreate a Competitor’s Landing Page in Figma

Use html.to.design’s Figma plugin to import a public landing-page URL as editable layers. For a page that depends on a login or a browser-visible state, capture it with the html.to.design browser extension and send the capture to the plugin or import its local .h2d file. Import desktop and mobile versions, inspect the hierarchy and responsive changes, then build an original design with copy and assets you have rights to use.

The goal is a useful reference for analysis, not a ready-made license to publish a clone. Website text, artwork, and photographs may be protected. In the United States, fair use depends on the facts and considers four factors; there is no fixed percentage that is automatically safe. This general information is not legal advice, and laws vary by jurisdiction. U.S. Copyright Office: Fair Use; Copyright Office guidance on website content.

1. Choose the right capture method

Page or goal	Use	Why
Public landing page with a stable URL	Plugin Web tab	Paste the URL, choose import settings, and import.
Login, VPN, CAPTCHA, or a state already visible in your browser	Browser extension	Capture the browser-visible page after reaching the desired state.
Keep the capture file local during transfer	Extension, save as `.h2d`	Import the downloaded file in the plugin. The vendor recommends this route when you want captured page data to remain off its servers.
Study responsive behavior	Separate viewport imports	Compare desktop, tablet, and mobile layouts as separate references.

The vendor documents public URL import, browser capture, multiple viewports and themes, editable layers, local styles, optional auto layout, and font mapping. These are documented capabilities, not an independent guarantee that every page will import with pixel-perfect fidelity. See Web import instructions, extension instructions, and the product overview.

2. Import a public landing page by URL

Open Figma and launch the html.to.design plugin.
Open its Web tab and paste the complete public landing-page URL, including the relevant path and query parameters if they affect the visible page.
Choose the viewport and theme you want to study. Start with desktop, then repeat for mobile; add tablet when the page has a distinct intermediate layout.
Review the available import options. Select only what helps with your analysis: options can include local text and color styles, optional auto layout, and font handling.
Start the import and wait for the layers to appear in Figma.
Rename the imported frame with the source, viewport, theme, and capture date so you can distinguish it from your own design.

The documented public-page flow is to paste the URL in the Web tab and import it. For details, see Import any page from the Web.

3. Capture a page that needs a browser session

Open the page in a browser where you can access it. Sign in or resolve a challenge yourself if authorized to do so.
Open the html.to.design browser extension and choose the page capture and viewport options you need.
Capture the whole page or the visible selection, depending on what you need to inspect.
Choose to send the capture to the Figma plugin or download a local .h2d file.
For a local file, open the plugin and drag the .h2d file into it, or use its file picker. For a direct transfer, open the plugin’s Extension tab if the capture is not imported automatically.
Choose the import settings, map missing fonts when needed, and import.

The extension workflow and both transfer options are described in the vendor’s extension guide and .h2d file guide. Use this only for pages and accounts you are permitted to access.

4. Compare desktop, tablet, and mobile deliberately

A single desktop frame hides many of the most useful design decisions. Import the same URL at relevant widths and compare what changes.

Navigation: Does the full menu collapse, disappear, or become a drawer?
Hero: Does the image move below the headline? Do the headline’s line breaks or button arrangement change?
Section order: Are testimonials, feature cards, or pricing rearranged or removed?
Grid behavior: Do columns stack, become horizontal carousels, or retain a two-column layout?
Spacing and readability: Which gaps tighten? Do body text and button targets remain legible?
Theme and state: If a dark or light theme or a menu state matters to your analysis, capture the state that is actually available and label it clearly.

Keep each viewport in a separate, named frame. Avoid treating the imported frame as a responsive system: it is a reference for the captured state. The vendor documents viewport and theme options, but the reviewed documentation does not establish independent fidelity measurements. See the overview of viewport and theme options.

5. Turn the import into an original Figma study

Preserve a reference copy. Put the imported frames on a clearly labeled page or section and avoid overwriting them during exploration.
Map the page structure. Record the order of sections, each section’s purpose, the main action, and how supporting proof is presented.
Annotate patterns, not borrowed expression. Note hierarchy, spacing rhythm, responsive behavior, and interaction cues. Write your observations in your own words.
Build a fresh brief. Decide which audience, product promise, and conversion action your page serves. Use that brief to create a distinct information hierarchy and layout.
Replace content and assets. Write original copy and use photography, illustrations, icons, and logos you own, have licensed, or have permission to use.
Clean up the working file. Group related sections, rename layers, check mapped fonts, and use local styles or optional auto layout if they help you continue editing.
Review the new design at each viewport. Test the hierarchy and action at mobile and desktop widths instead of assuming the reference’s behavior fits your product.

For U.S. readers, copyright protection can apply to original website text, artwork, and photographs. Fair use is a case-specific analysis of purpose and character, nature of the work, amount and substantiality, and market effect. A design reference does not by itself settle whether reusing a particular asset or passage is allowed. Read the Copyright Office’s fair use guidance. html.to.design’s own service terms also apply to use of its service; they do not grant rights to a competitor’s content. See html.to.design terms.

6. What to expect from editable layers

The import gives you Figma layers that you can inspect and edit, but you should expect cleanup. Check font substitutions and line wrapping, large or nested groups, image resolution, section spacing, and any visual differences from the browser. Complex behavior such as animation, hover states, personalized content, or interactive forms may not be represented by a static capture. Capture separate browser-visible states when those states matter to your research.

Use local styles to make repeated colors and text easier to inspect, optional auto layout where it makes editing useful, and font mapping for missing typefaces. These options can help organize the imported reference; they do not mean the output is a production-ready component system. Vendor documentation lists these features but offers no independent benchmark of visual accuracy: feature overview.

7. Plan limits and cost

The official Pro page currently lists Free at $0 with up to 10 imports every 30 days. Pro is listed at $12 per user per month billed annually or $18 billed monthly; its “unlimited” imports have a fair-use limit of 1,000 per month. Pro also lists high-resolution images, bulk imports, a re-import shortcut, and premium support. Prices and quotas can change, so confirm the live terms before subscribing. A single ordinary import does not require Pro according to the listed free features. Official Pro plan and pricing.

The vendor terms prohibit bots, scripts, and other mass-import methods without authorization and restrict distributing or monetizing collections of designs generated through the service. Review the terms before automating or redistributing captures.

8. Troubleshooting

Symptom	Likely cause	What to try
URL import cannot open the page	The page is private, requires a session, or presents a challenge.	Open it in your browser and use the extension after accessing the page. Only capture pages you are authorized to access.
The imported page shows the wrong language or state	The URL import did not preserve the browser’s language, session, or interaction state.	Navigate to the exact state in your browser and capture it with the extension.
The page is cut off	The capture did not include the full page or the page uses unusual height behavior.	Use the extension’s full-page capture option where available, or capture the relevant sections separately. Confirm that the target page has finished loading before capture.
Fonts or line breaks differ	A font is missing or mapped differently, changing text metrics.	Map or obtain the correct font when you have rights to use it, then inspect line wrapping at each viewport.
Images are absent or low resolution	The source uses lazy loading, protected assets, or a resolution not available to the importer.	Check the source in the browser, capture after images load, and use available high-resolution import options if your plan includes them.
Mobile frame looks like scaled desktop	The capture used the wrong viewport or the site serves a layout based on browser conditions.	Choose a mobile viewport explicitly and capture the mobile state separately; check the live page in a mobile-sized browser view.
The .h2d capture is not visible in the plugin	The file was downloaded but not opened, or the plugin is on another tab.	Drag the file into the plugin or use its file picker; for direct transfer, check the Extension tab.
A menu or popup is missing	It was not open in the captured state, or the page changed after capture.	Open the desired state in the browser, capture again, and label that state separately.

9. Or skip the browser setup

If you need a rendered reference image rather than editable Figma layers, ScreenshotNeo is a website screenshot API and MCP server. One GET request returns an image or PDF, and its API accepts common screenshot API parameter names. It can be useful for collecting visual references; it does not replace html.to.design when you need editable Figma layers. 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 YOUR_API_KEY and the target URL. The Python example requires requests. The Node.js example uses Bun’s file-writing helper; in Node.js, save the response bytes with Buffer.from(await res.arrayBuffer()) and node:fs/promises. Confirm the response status before treating a body as an image.

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

10. FAQ

Can I import only one section of a landing page?

Yes. Use the browser extension’s selection capture when you need a specific visible area, or keep the full-page import and focus your analysis on one section.

Does the import include a working website prototype?

It is an editable design reference, not a guarantee that the source page’s interactions or application behavior will work in Figma. Capture additional states to study interactions.

Should I recreate the competitor’s exact copy and visuals?

Use the capture to understand structure and behavior. Create original copy and use assets you have rights to use; legal rules depend on the jurisdiction and the specific facts.

Do I need a paid plan for one page?

The listed Free plan includes up to 10 imports every 30 days. Verify the current quota and plan terms on the official page before relying on them.