html.to.design

Converts any website into fully editable Figma designs.

Leverage an existing website and import its HTML to Figma to start your own designs, without building each element from scratch.

👉 Homepage

📖 Documentation

💬 Chat with us

How to import a website into Figma?

1. In Figma, go to the plugin menu and start html.to.design plugin
2. Enter the url of the website to import into Figma
3. Choose the viewports to import (mobile, desktop, tablet...)
4. Click on import

Import private website or behind login websites?

1. Download our Chrome extension.
2. Follow instructions in documentation.

Import files

1. .html and .htm files
2. .mhtml and .mhtm files
3. .zip files with webpages
4. Emails in .eml, .emlx or .msg format

Import HTML+CSS code

1. Use the new "Editor" tab to import HTML/CSS code directly
2. Edit and update incrementally

Import via MCP

1. Fastest MCP server!
2. Connect your AI tool - Claude Desktop and Cursor are supported
3. Generate designs with AI and send them to Figma
4. You can automate URL imports too!

Why use html.to.design?

1. Redesign an existing website, without building a single thing from scratch.
2. Capture websites for a benchmark or moodboard in Figma, without a single screenshot.
3. Load an editable webpage in Figma for collaboration, providing comments and feedback.
4. Improve your UX writing with different copy, and get a snapshot of exactly how it’ll look.
5. Scrap a website to import missing design assets for ongoing projects.
6. Use AI (with MCP) to bootstrap your work or get inspirations

FREE plan

1. Up to 10 imports every 30 days

PRO plan

1. Unlimited imports (fair use)
2. High-resolution images
3. Multiple URLs or .h2d files at once
4. Re-import URLs in one click
5. Premium support

------------------------------

Brought to you by ‹div›RIOTS