FigmaToCode icon indicating copy to clipboard operation
FigmaToCode copied to clipboard

Html to Design #1

Open amazingnerd opened this issue 1 year ago • 5 comments

When the Figma to HTML / React Component done, can you implement the reverse way, such as create a Chrome extension to convert any website to Figma design like: https://chromewebstore.google.com/detail/htmltodesign/ldnheaepmnmbjjjahokphckbpgciiaed

amazingnerd avatar Sep 19 '24 17:09 amazingnerd

I can, but there are some plugins that already do this. Have you tried https://www.builder.io/ ? If there is anything you need that they don't do, sure, I can implement that for you!

bernaferrari avatar Sep 19 '24 17:09 bernaferrari

Hi @bernaferrari , I tested the builder.io plugin but it cannot pull images from website to Figma, and the layout output is kind of buggy. Currently, https://html.to.design/ is doing the best job in this field. It will be awesome to see and learn from the way you implement it, I'm appreciate that so much. Thank you!

amazingnerd avatar Nov 13 '24 13:11 amazingnerd

What do you need that html to design doesn't do?

bernaferrari avatar Nov 13 '24 13:11 bernaferrari

The html to design plugin charges Pro plan when we want to import more than 10 websites to Figma / month, they count each breakpoint is a import time. And it can not pull the style guide of the website in a good way, color is not order in the right shade, and type scale system is not order in a good way.

amazingnerd avatar Nov 13 '24 14:11 amazingnerd

Can you give me example of pages that you would like to see in figma as well as example of the outputs (I guess, text should use predefined styles or not? Color should use variables?)?

bernaferrari avatar Nov 15 '24 23:11 bernaferrari