HTML to Figma - by Builder.io

How to install an extension Open in Chrome Web Store

CRX ID

efjcmgblfpkhbjpkpopkgeomfkokpaim

Status

Live on Store

Description from extension meta

Import a web page to Figma layers

Image from store

Description from store

Use this extension to capture your current page and import it as editable Figma layers!

What it's useful for

- Easily import real live site styles for a starting point for designs and prototypes
- Quickly turn real site components into design components
- Easy import components from storybook, etc
- Import a great live web design as a starting point for inspiration for your mockups

View and contribute to the source code here: https://github.com/builderio/html-to-figma/issues

Latest reviews

Hendrik Heidstra 2025-03-26: As Heath Daniel said before me, this plugin is deprecated and has been replaced by "builder.io". Not sure why they haven't removed this and/or mentioned it in the description.
Heath Daniel 2025-03-20: This seems to have stopped working recently and been replaced by the Builder.io extension
Mohamad Nizam Saidin 2025-01-22: Its really work! Not 100% but i can say around 90% accuracy. But it really save my time.
Liz Lucas 2024-02-12: This is super useful! You do have to use their figma plugin, which is not really noted here. If you go to the github for it (https://github.com/builderio/html-to-figma) and scroll down, it will show you which plugins to install to Figma (I used this one that was linked there - https://www.figma.com/community/plugin/747985167520967365/builder-io-ai-powered-figma-to-code-react-vue-tailwind-more) in order to upload the JSON file. Saved me a lot of time since I'm just now learning figma!
Seth Pratt 2023-12-13: This is literally the best thing since sliced bread.
Bhanu Pratap Singh 2023-12-13: Could anyone guide me on how to use it? Which Figma plugin do I need to import the Figma JSON file created by this extension?
mardi utomo 2023-11-19: Thank You ... Life saver
Akbar Akhmadjonov 2023-11-03: Can anybody explain me how to use it ?
Akbar Akhmadjonov 2023-11-03: Can anybody explain me how to use it ?
Anonymous 2023-08-22: 10/10
Eve 2023-08-20: Easy to use! Just click the "capture page" button in the extension, and it will download a Figma.json file. Import the Figma.json file to the Figma plugin, and voila! The Figma file that is created by the extension does require some management, but overall it's awesome.
Eve 2023-08-20: Easy to use! Just click the "capture page" button in the extension, and it will download a Figma.json file. Import the Figma.json file to the Figma plugin, and voila! The Figma file that is created by the extension does require some management, but overall it's awesome.
Alec Dewitz 2023-04-25: All I can say is...wow. Thank you.
Alec Dewitz 2023-04-25: All I can say is...wow. Thank you.
RAON 2022-11-29: Thankyou so much
RAON 2022-11-29: Thankyou so much
Toby Jimmy 2022-11-09: This shouldn't be free but the least i can do is leave a good review.
Toby Jimmy 2022-11-09: This shouldn't be free but the least i can do is leave a good review.
Edouard Mehlman (eddie) 2022-10-14: Work 90% perfectly in my case. Mindblowing.
Edouard Mehlman (eddie) 2022-10-14: Work 90% perfectly in my case. Mindblowing.
Josz Garcini Lara 2022-08-12: Funciona tanto que da miedo. Hay que tener la extensión en Chrome y agregar el Plugin en Figma, se llama igual: "Figma to html" con el mismo logo, descargar el plugin en Figma y ahí importar el json (se importa el jason en la pestaña de "Import to Figma" y hasta abajo en donde dice "Step 2: here"). El json lo tuvo que haber descargado la extensión en Chrome, ¡bum! Se hace la magia. Geeenial. La adoré
Pranav Pandey 2022-03-08: very Poor
Pranav Pandey 2022-03-08: very Poor
Arunav Malhotra 2022-03-08: Poor
Arunav Malhotra 2022-03-08: Poor
Daniel Patterson 2021-12-09: I have never reviewed a plugin before. This is SUPER AMAZING PLUGIN. Thank you so much for creating such a useful tool.
Daniel Patterson 2021-12-09: I have never reviewed a plugin before. This is SUPER AMAZING PLUGIN. Thank you so much for creating such a useful tool.
Tomás Nascimento 2021-10-29: Priceless...
Tomás Nascimento 2021-10-29: Priceless...
Ryan Reed 2021-10-26: This is pretty cool, but could use more improvements around images and fonts not coming through (which is an understandable challenge, but would take it to the next level).
Ryan Reed 2021-10-26: This is pretty cool, but could use more improvements around images and fonts not coming through (which is an understandable challenge, but would take it to the next level).
Juan Pablo Jou-Valencia 2021-10-13: Making tables in Figma is super clunky and time consuming. Not so much in HTML/CSS. This is going to save me SO much time and heartache. Thank you a million times. note: this needs the page to be hosted, can't do local html/css files
Juan Pablo Jou-Valencia 2021-10-13: Making tables in Figma is super clunky and time consuming. Not so much in HTML/CSS. This is going to save me SO much time and heartache. Thank you a million times. note: this needs the page to be hosted, can't do local html/css files
JM Serna 2021-09-07: Awesome
Octavio Viera Molina 2021-08-12: Yesssss it's great It converts more than 95% of the web pages, and the layout, itsss amazing, you save me money and a lot of time, thanks !!
Octavio Viera Molina 2021-08-12: Yesssss it's great It converts more than 95% of the web pages, and the layout, itsss amazing, you save me money and a lot of time, thanks !!
Caleb Rudnick 2021-07-28: Genuine question, is this powered by magic?
Caleb Rudnick 2021-07-28: Genuine question, is this powered by magic?
zd Q 2021-07-08: The seeds of a new era
zd Q 2021-07-08: The seeds of a new era
Jonathan 2021-05-23: Hi, nice plugin there, still need a lot of improvement, but looks promising so far. By the way is there any documentation for manual upload .json files? I'd like to customize the json files for design purpose but it's so hard without the documentation.
Jonathan 2021-05-23: Hi, nice plugin there, still need a lot of improvement, but looks promising so far. By the way is there any documentation for manual upload .json files? I'd like to customize the json files for design purpose but it's so hard without the documentation.
Stefan Hermann 2021-03-25: This plugin is changing everything! It now is so easy to import the status quo and saves days of work! Thank you folks :-)
Mark Newton 2021-03-15: Been waiting for this for my whole life, feels like it. well done builder.io
Mark Newton 2021-03-15: Been waiting for this for my whole life, feels like it. well done builder.io
Gear 2021-03-15: Font Awesome的東西出不來，和中文有點瑕疵， (中文是預設字型的關係，選好字型之後就會顯示，不確定日文或其他非英語語系的語言有沒有問題)，不然其他都幾乎一模一樣，很驚人的好用
Olja S 2021-02-11: Captures are in 90% distorted, messy and out of proportion. Can change a circle to a square, change fonts, dis-align whole paragraphs, all of which makes the results useless. Another big problem - often when deleting already saved .json file the extension is unwilling to make another one of the same page. Just writes "it's done" but no file is offered for saving. Very interested in listening to solutions if the problem is on my part
Olja S 2021-02-11: Captures are in 90% distorted, messy and out of proportion. Can change a circle to a square, change fonts, dis-align whole paragraphs, all of which makes the results useless. Another big problem - often when deleting already saved .json file the extension is unwilling to make another one of the same page. Just writes "it's done" but no file is offered for saving. Very interested in listening to solutions if the problem is on my part
Nazar Lysyi 2021-01-03: Це супер рішення, виручає
Javier Silveira 2020-09-07: The conversion was very good (not perfect) but it sill saved me a TON of work!!! Beautiful extension. I didn't find how to import the generated json in Figma, then I read the comment about the figma plugin, so I ended up using the figma plugin. But it is so useful it deserves a five star rating right here. Thanks

Extension Actions