Use html.to.design to import a competitor’s public landing page into Figma as editable layers: paste its URL into the plugin’s Web tab, choose an import configuration, and import. For pages that depend on a login or browser session, capture the visible page with the html.to.design browser extension instead. Treat the result as a reference for studying layout and behavior—not as permission to publish someone else’s copy, imagery, illustrations, or logo.
Choose the right way to capture the page
The public-URL route is simplest when the landing page is accessible without signing in. The browser extension is intended for content or states that are visible in your browser but not available from a public URL, including login-gated pages. It can send a capture to the plugin or save it as a local .h2d file. The private-page guide recommends local download when you want the captured page data not to reach the service operator’s servers. See html.to.design documentation and its browser extension guide for current instructions.
As an Amazon Associate I earn from qualifying purchases.
Public landing page
- Open the target URL in the html.to.design plugin’s Web tab.
- Choose the import configuration you need, such as viewport or theme options.
- Import the page into Figma and inspect the resulting layers.
The vendor’s instruction is to paste the website URL in the Web tab and select Import. A public URL import may not reflect a state that requires a particular account, consent choice, or other browser session.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteLogin- or session-dependent page
- Open the page in your browser and establish the state you want to inspect, such as signing in if you are authorized to do so.
- Use the html.to.design browser extension to capture the whole page or a selection.
- Send the capture to the Figma plugin, or download the
.h2dfile and import it locally.
Only capture pages and account content you are authorized to access. A browser-visible capture is a snapshot of the state you prepared, not a substitute for testing every interaction in the original site.
#1 Best Overall
Import desktop and mobile before studying the design
A single desktop screenshot can hide how a landing page’s hierarchy changes on narrower screens. html.to.design documents desktop, tablet, and mobile imports, as well as theme options. Import the relevant viewport states separately, then compare the actual page and its Figma layers.
- Check whether navigation collapses, changes position, or is replaced by a menu.
- Compare heading line breaks, text width, and the order of sections.
- Note whether calls to action move, stack, or change emphasis.
- Look for content that is added, removed, or reordered at smaller widths.
- If the site offers multiple themes, capture the theme relevant to your analysis rather than assuming one appearance represents all users.
The product documents these options, but that does not establish perfect visual fidelity. No independent accuracy benchmark is established here. Treat imported output as a starting point to inspect and clean up, not a pixel-perfect record.
Rank #2
Organize the imported Figma file for analysis
html.to.design describes its output as editable Figma layers and documents local text and color styles, optional auto layout, and font mapping or handling for missing fonts. These tools can make the file easier to navigate, but they do not remove the need to review the import.
- Rename important frames and sections so the page structure is clear.
- Check text and color styles, and map missing fonts where needed.
- Use auto layout where it helps clarify repeated spacing or component structure; inspect the result before relying on it.
- Compare the imported frame with the browser page for missing, shifted, or incorrectly represented content.
Keep a separate set of notes about what you are learning: information hierarchy, section sequence, spacing rhythm, interaction cues, and responsive behavior. That record is more useful for an original redesign than preserving every imported visual detail.
Turn the reference into an original landing page
Use the imported design to understand how the competitor communicates, then build a distinct execution. Draft fresh copy and use imagery, illustrations, and logos that you own, have licensed, or have permission to use. Do not assume that editing an imported layer makes the underlying material yours.
For U.S. context, the U.S. Copyright Office explains that original authorship on a website may be protected, including writing, artwork, and photographs. Its fair-use guidance describes a fact-specific analysis involving purpose and character, nature of the work, amount and substantiality, and market effect. There is no fixed percentage or number of words that is automatically safe to reuse. This general U.S. information does not decide the rights that apply in other jurisdictions or resolve any particular project; seek qualified advice if you need a legal assessment.
Also check the service terms before using html.to.design at scale. Its terms restrict bots, scripts, and other mass imports without authorization, and separately address distributing or monetizing collections of designs generated through the service. Those service rules do not settle whether you have rights to third-party content. See html.to.design terms.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Know the current import limits before planning a batch
The vendor-listed plan details below were checked on October 3, 2026. Prices and quotas can change, so verify the current html.to.design pricing page before purchasing.
Best Value
| Plan | Listed price | Import allowance |
|---|---|---|
| Free | $0 | Up to 10 imports every 30 days |
| Pro, annual billing | $12 per user/month, billed annually | Described as unlimited, subject to a fair-use limit of 1,000 imports per month |
| Pro, monthly billing | $18 per user/month, billed monthly | Described as unlimited, subject to a fair-use limit of 1,000 imports per month |
A single ordinary page import does not, by itself, establish a need for Pro. Compare the allowance with your intended workload and check the vendor’s current plan details for any other features relevant to you.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need a clean screenshot rather than editable Figma layers, ScreenshotNeo can capture a URL with one request. It is a screenshot API and MCP server for developers; it is not a replacement for importing a page into Figma as editable layers. The request below saves a WebP capture of Stripe’s homepage; replace the target URL with a page you are authorized to capture. See the ScreenshotNeo API documentation for request options.
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; responses indicate the page verdict and billing status. Its MCP server provides screenshot tools for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Visit ScreenshotNeo or sign up free for 1,000 screenshots a month with no card.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Troubleshooting common import problems
- The public import does not show the state you expected: The state may depend on a session or browser interaction. Open it in your browser and use the extension capture route instead.
- The result differs from the live page: Check that you captured the intended viewport and theme, then compare the imported frame with the browser. The documented options do not guarantee exact reproduction.
- Fonts or text appearance differ: Review missing-font handling and mapping, then inspect text styles and line breaks in Figma.
- The file is difficult to work with: Rename frames and layers, organize page sections, and apply local styles or auto layout selectively; verify that these edits have not obscured meaningful differences.
- You need to import many pages: Check your current allowance and terms before proceeding. Pro’s vendor-listed monthly fair-use limit is 1,000 imports, and the terms restrict unauthorized mass-import methods.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
