How to Import a Website into Figma Using HTML.to.design in India

To import a public website into Figma with html.to.design, open the plugin, paste the page URL into its Web tab, choose the viewport and theme you need, and click Import. For a page that requires a login, lives on a private network, or must be captured in a particular browser state, use the html.to.design browser extension to capture the rendered page and bring that capture into the plugin. URL import does not use your signed-in browser session. html.to.design’s Web-tab guide documents the public URL workflow.

For India, the vendor’s plan page checked on 2026-10-03 lists a free allowance of 10 imports every 30 days. It also says Figma cannot accept Indian or Russian-based credit cards for html.to.design Pro at this time, and suggests a Pro for teams license for a single user. Check the current Pro plan details before purchasing; payment handling and plan terms can change.

1. Choose the right import method

What you need to import	Use this method	What to know
A public page that opens without signing in	Plugin Web tab	Paste the page URL, select a viewport and theme, then import.
A page behind a login, on a private network, or in a specific browser state	Browser extension capture	Capture the page while it is rendered in your browser, then send or import that capture in the plugin.
Your own HTML/CSS source	Plugin code editor	The vendor lists importing user-provided HTML and CSS as a feature.
Local website files	Upload a file	The vendor lists local `.html`, `.htm`, and `.zip` uploads.

The plugin and browser extension are separate parts of the html.to.design workflow. The vendor describes the extension route for logged-in pages, private pages, and pages where the browser state matters. See the product overview and html.to.design homepage for the documented workflow.

2. Import a public website URL

Open Figma and launch the html.to.design plugin.
Select the Web tab.
Paste the full URL of the public page, including its path and query string if those are part of the page you need.
Choose the viewport size and theme for the design you want to recreate. If you need responsive variants, plan to import each required viewport.
Click Import and inspect the result in the Figma canvas.
Repeat for other pages or viewport sizes as needed.

This route is intended for pages with an open, publicly accessible URL. If the URL redirects to a login, returns an access-denied page, or depends on a signed-in session, use the browser extension instead of expecting the plugin to inherit your browser login.

3. Import a logged-in page or a specific browser state

Install or open the html.to.design browser extension using the product’s official instructions.
In your browser, sign in and navigate to the exact page and state you need, such as an expanded menu or a populated dashboard.
Use the extension to capture the rendered page.
Pass that capture to the html.to.design plugin and import it into Figma.
Review the imported result for missing or state-dependent content.

This is the documented path for login-protected or private-network pages. It also fits cases where the page depends on a particular browser state. The exact extension controls and transfer steps may change; consult the vendor’s current product instructions.

4. Choose viewports, themes, and other input options

The official overview describes choosing viewport sizes and themes before importing. The feature page also lists multilingual import, an HTML/CSS code editor, and local-file upload. Available workflow options include:

Multiple viewport sizes: import the page at the widths you need to represent responsive layouts.
Theme selection: choose the theme corresponding to the rendered variant you need, where applicable.
HTML and CSS input: use the code editor when you have source markup and styles rather than a page you need to fetch.
Local files: upload supported .html, .htm, or .zip files when your site is available locally.
Multilingual content: the vendor lists multilingual import as a feature; inspect language-specific text and layout after conversion.

These are vendor-documented capabilities, not a guarantee that every page or asset will reproduce perfectly. Confirm the current details on the features page.

5. Check the India plan and payment details

Plan information below reflects the official html.to.design plan page as checked on 2026-10-03. These are vendor terms and may change.

Plan detail	Published terms checked
Free	$0; up to 10 imports every 30 days; the page says no signup or credit card is required.
Pro, annual billing	$12 per user per month, billed annually.
Pro, monthly billing	$18 per user per month.
Pro usage	“Unlimited” use is subject to fair use; the documentation describes a limit of 1,000 imports per month for typical individual use.
India payment note	The page says Figma cannot accept Indian or Russian-based credit cards for html.to.design Pro at this time. It suggests purchasing a Pro for teams license for a single user.

The teams-license suggestion is the vendor’s published workaround, not a guarantee that every account or payment method will work. Check the plan page at checkout. The sources reviewed do not establish regional plugin availability, Figma account-tier requirements, workspace permissions, or the acceptance of other payment methods in India.

6. Review and refine the imported design

Check that the imported page is the intended route and state, especially after redirects or authentication.
Inspect the frame dimensions and compare them with the viewport you selected.
Look for missing images, fonts, or content that loads only after interaction.
For responsive work, compare separate imports at the intended viewport sizes rather than assuming one import represents every layout.
Review multilingual pages for text wrapping and layout changes.
Use your source HTML/CSS or a browser capture when a public URL import cannot represent the needed state.

7. Or skip the browser setup

If your goal is to capture a clean reference image of a public page, ScreenshotNeo can return a screenshot with one GET request. It is a website screenshot API and MCP server from ScreenshotNeo; the API does not import a page into Figma as editable layers.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Equivalent Python and Node.js examples, plus the available request options, are in the ScreenshotNeo API documentation.

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 import('node:fs/promises').then(fs => fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer())));

ScreenshotNeo removes cookie banners, popups, and chat widgets before capture. Bot checks, blank pages, and failed loads are never billed; an 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. Sign up for 1,000 free screenshots a month, with no card required.

8. Troubleshooting

Problem	Likely cause	What to do
The URL import shows a login or access-denied page	The URL method is fetching a public page and does not inherit your browser’s authenticated session.	Capture the signed-in page with the browser extension and transfer the capture to the plugin.
A private URL cannot be reached	The page is on a private network or otherwise unavailable to the URL workflow.	Use the extension on a browser that can reach the page, or import local HTML files if you have them.
The imported content is the wrong page	The URL redirected, or the intended page state was not active at capture time.	Verify the final URL and page state in the browser; use extension capture when the rendered state matters.
Some content or assets are absent	The page may rely on state, delayed loading, or resources not represented in the capture.	Wait for the page to render, confirm the state in the browser, and capture again. Inspect the result after import.
The layout does not match another screen size	The import used a different viewport or the page responds differently at that width.	Select the intended viewport and import a separate variant for each required size.
The India card is declined for Pro	The vendor states that Indian-based credit cards cannot currently be accepted for this purchase.	Check the current plan page and its suggested Pro for teams license for a single user. Do not assume another payment method will work without checking.
You reach the Free allowance	The published Free plan includes up to 10 imports every 30 days.	Check the current plan terms and decide whether Pro fits your import needs and payment situation.

9. Cost, workflow, and reliability considerations

Cost: use the Free allowance to evaluate the import flow. The vendor lists Pro at $12 per user/month billed annually or $18 per user/month billed monthly, with fair-use limits; verify current terms before buying.
Capture fidelity: choose URL import for open public pages and extension capture when authentication, private access, or a particular rendered state matters.
Responsive coverage: account for each viewport you need to design. One viewport should not be treated as a complete responsive specification.
Repeatability: record the page URL, viewport, theme, and browser state used for each capture so a later import can be compared consistently.
Limitations in available evidence: the reviewed official pages do not provide a universal fidelity guarantee, import-time benchmark, or India-specific workspace eligibility details.

10. Frequently asked questions

Can I import a website URL directly into Figma?

Yes, for a public page with an open URL: paste it into the plugin’s Web tab, select the options you need, and import.

Can html.to.design access my Figma or website password?

The documented URL flow does not use your authenticated browser session. For a login-protected page, capture the rendered view with the browser extension.

How many free imports are available?

The official plan page checked on 2026-10-03 lists up to 10 imports every 30 days on Free. Check the linked plan page for current terms.

Will ScreenshotNeo create editable Figma layers?

No. ScreenshotNeo returns a screenshot image or PDF. Use html.to.design when you need to convert a website into an editable Figma design.