Bring your own website into Framer with a few clicks. Once you have installed the extension, simply hover over any element such as text, images, buttons, or entire layouts. Click to copy, then go to Framer and press βV (or Ctrl V on Windows) to paste.
Hi everyone! Weβre excited to introduce our new Chrome extension: HTML to Framer. Effortlessly copy and paste web elements from any of your own sites, whether they are made with HTML & CSS or any other no-code website builders, and edit them directly in Framer. When you paste a section with multiple items, empty divs will be discarded leaving an ultra clean layer hierarchy, making it easy to further edit the page, add breakpoints, and publish your website right away.
- Install the extension, go to your site and hover on an item to copy.
- Hold Shift to copy multiple elements, for even greater speed.
- To select a parent element of an item, hit Esc while hovering it.
- In Framer, use βV to paste on Mac, or Ctrl V on Windows.
Very cool Edoardo! Been using Framer for a few months and I love it. This extension will be very useful when I'm redesigning some of my client's website. Keep up the good work πͺ
Oh my gosh this would have been SO helpful for me as I was making Framer sites for startup clients last year!! Literally that back and forth is so tricky and this would have cut out many steps. Congratulations to the team; great idea and execution!
HTML to Framer is a promising bridge between design and development. Can you share some examples of projects created with it?
Report
Congratulations! You are fantastic. I will share this tool with my designer, and it's an incredibly useful tool for all designers. Do you have plans to integrate it with Figma?
Hey there, congrats on the launch! How does the extentions handle complex websites with dynamic content? Are there any limitations or considerations we should keep in mind?
@darya_antonyuk hi! The extension imports static elements with all their styles, as well as entire layouts with a clean layer hierarchy, for now. Animations and interactive elements won't be imported, so you'll have to re-add them in Framer manually.
HTML to Framer
Tab Text
Cloaked
Promomix
Blocks
HTML to Framer
klemmbrett β early access