Convert 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.
Learn more ?
html.to.design
How it works:
- Install this plugin, html.to.design
- On a blank Figma file, search for “html.to.design” under Plugins, or using cmd+/
- In your browser, open the website you want to convert and copy the URL
- Paste the URL into the plugin, select device and dimensions, and click ‘Import’ to convert html to Figma designs.
Import private website or behind login?
-
Download our
Chrome extension
. -
Follow instructions in
documentation
.
Why use html.to.design?
- Redesign an existing website, without building a single thing from scratch.
- Capture websites for a benchmark or moodboard in Figma, without a single screenshot.
- Load an editable webpage in Figma for collaboration, providing comments and feedback.
- Improve your UX writing with different copy, and get a snapshot of exactly how it’ll look.
- Scrap a website to import missing design assets for ongoing projects.
FREE
version includes up to 10 imports every 30 days
PRO plan
The html.to.design
PRO plan
helps us to continually improve the plugin and make its transformations of much higher quality. This plan is designed for professionals and includes:
- Unlimited imports
- Custom viewport sizing
- Multiple viewports/themes at once
- Multiple URLs or .h2d files at once
- Re-import URLs in one click
- Priority feature request
- Premium support
Get support anytime
Have any questions or rendering issues? Reach out and chat with us on
Discord
!
———————
This plugin is powered by our exclusive
code.to.design
technology. ?
Learn how you can use the code.to.design API in your own plugin
!
———————
