builderio / figma-html Goto Github PK

Font weights specified as:

font-weight: 600; default to standard font weight rather than mapping to how they render.

I think it would be wise to add somewhere in the README ( and maybe the plugin description ), where builder.io fits into the plugin.

How does it work? Is something happening on the builder.io servers - if so, what? Is there any data stored over there? Is it a service? Will it have a pricing tag?

With the Chrome extension and the plugin for Figma it does not import any images or svg's of the page anymore.

The imported designs look very broken.

Happens on windows and mac.

Example:

The "Download as JSON" is not working.

Using Figma in Chrome on Windows 10. When pressing download as JSON nothing happens.

If we could specify a pixel width value, it'd allow us to capture mobile responsive versions, and more easily map to screen sizes we might be designing for on desktop also.

Hello Steve,
First of all congrats! You do a fantastic job with Builder.io! Your drag-drop interface and JSX-lite blew my mind!
Though, when I export my figma frame (others are different size):

I get everything on one line:

Maybe auto-layout and/or frame -> block issue?
Any idea?

Have a great day!

Figma's desktop app (at least for Windows) is no longer compatiable with the current Figma's UI and as beginner in Figma it is unclear how you import a json document. I think it is what is trying to be communicated in #68

Current UI:

And when searching for html there are no place to import the json file:

So at the current moment following the documentation it is not posible to import the HTML into Figma

Selecting an object and importing into Figma would be great for those quick and simple changes when you want to show something or a design change proposal.

This would be a massive time saver.

https://www.figma.com/file/zi94yBRIXN1t9UIlxDfAbd/Untitled

There were 3 days worth of designs on this page. I uploaded the plugin and now they are gone. The background for the whole project is still there but everything else is gone.

It just doesn't download anything when used with local html files.

The heart looks to be missing some spacing, it's too close to by.

Would be cool if you could choose which size screen to import. This would mean you could import the mobile/tablet page too.

All are converting to Roboto.

1. Only visible area content is converted into figma not the full page from few sites, EX: https://feathericons.com/
2. And unable to get some internal pages content instead it's just grabs home page into figma. EX: https://www.akveo.com/ngx-admin/pages/layout/accordion
3. And if i have a frame grabbed already it gets overlapped by new design (from diff url) running plugin creates new frame but in same position so i have manually move it aside.
4. lastly some times it grabs excess of empty rectangle layers. it will be helpful if we get rid of those as finding them & removing 100's them is pain.

And yeah this plugin is Awesome thank you for making it.

Video recording for reference.
https://www.loom.com/share/3cc63b8a1f4c420eabf70437244a63f9

NO RESULTS FOUND When search for "html to figma" in the search box of figma.

What can i do to fix it ?

Imagine a use case where you want to import the cart page from an ecommerce site populated with items. Allowing the user to add a "cart_id" cookie would allow the plugin to return a screenshot from an existing cart.

Other use cases:

• Sites/apps protected by log ins
• Sites that have dynamic content based on a cookie (e.g. popups/promos)

SVGs in <svg> tags aren't being imported.

Example:
See Login button icon and navbar arrows on https://onfido.com/kyc/

Could this be possible in the future?

I'm really excited about this plugin! I have a use case where I'd like to create a plugin that generates HTML, and uses this plugin's functionality to render that HTML into a figma scene. Just curious if you know whether this is possible, or have thoughts for how to do it?

Thanks! 😊

It still works via Chrome extension, however, the extension is not grouping elements automatically yet, which is not very convenient.

Apart from that the tool is AMAZING

Hi,

looks like that plugin in Figma is not working anymore.
Can somebody have a look on this pls?

Thanks!

pepę

Absolutely love this plugin. It's an absolute gamechanger for me.

One piece of feedback, please remove the default builder.io url when you run the plugin. I can't tell you how many times I've accidently clicked import by accident for that URL (instead of uploading the .json or the right url) and then the plugin just locks up and I have to exit figma.

All accounted for this has easily taken up at least a few hours of my time and taken me out of my design state.

I know it's my fault, but you need to account for idiots like me who don't think before they push buttons.

After importing a URL, the document I import into seems to get stuck in an unsaved state. Closing Figma completely and reopening it never seem to lose any changes, but I need to click to discard any changes which is a bit scary.

Caveat that I have NO idea how complex this would be, but it'd be amazing if there was an option that when checked, was aware of component names eg: main-nav, and when it encountered an ID or class in the code that matched that name, inserted the matching component in it's place.

This is a really useful plugin for me because I'm working on a project which tries to calculate as much of the design, spacing font sizes etc dynamically. Because it's calculated dynamically it's hard to replicate in a design tool, so being able to import these into a design tool is really useful. So thank you!

One thing I noticed was that my project has a very loose style reset and so some default user-agent styles pass through. However, when the site is imported using the plugin to Figma those styles are not imported (at least this is what I think is happening), one example was font weights for headers.

This isn't too much of a pain for me as I can be more implicit in my reset to support these missing styles, but it made me think that there may be some sites that don't have an aggressive style reset and therefore will rely on those user agent styles. Is this something that's easy to support? You may then find more accurate results when you import websites. I guess the difficult part would be which user agent styles you import, at most maybe just any would be better than none.

Anyway, it's just an idea. I'd be interested to hear your thoughts.

Such a great feature, but it doesn't work with Web Components. It is possible to implement this?Would be so great!
Kind regards,
Keanja

The CSS property border-radius will not be respected, at least not when it has a percentage value (e.g. 50% to create a circle).

this plugin is the best software i've seen in a long time, great job!

When I use the chrome extension on GMail logged in web interface:

• extension shows a loading animation for half a second
• the page blinks
• there is no success message and no json file downloaded

It works however on Google Drive logged in interface.

As the title says, it'd be good to have the reference to the right, that's the next thing I want to do unless I want to alt-tab or use a separate screen.

This could be an option or the default, I think either way works because of the nature of the plugin. It's not meant to be 1:1 because that's too complicated (TM), so until it somehow is, perhaps the reference is useful.

I'd like this a lot!

Thoughts?

I would love to see Storybook supported so it is possible to import single or all components out of a Storybook instance and treat them as components in Figma as a cool alternative to import whole webpages into Figma.

is possible to get several urls from a json or google sheet at same time? It would be wonderful!! Thanks!!

I just tried to use the plugin on figma and i got the error "TypeError: Failed to fetch"
Also, the main website is down.

Is there a problem?

Hey there! First of all, let me thank you for this plugin, it had helped me a lot!
From my experience usage, I suggest a few changes to the interface to make it even better:

• Possibility to add multiple widths to import several designs at once.
• Possibility to have presets so the user doesn't have to type the width all the time.
• User interface closer to the native Figma experience

Example:

What do you think?

Paragraphs of text seem to be in the wrong font size, and have loads of spaces added causing really strange text flow.

Tested on https://onfido.com/kyc/ which the text was working fine last week with.

(I just realised what I did - move along - nothing to see here..)

I've tried to download page to figma - https://production.family/
But it did not work. The width I tried to download is 1200 900 400 px.

UPD. HTML to Figma plugin for chrome works for me&

Hello,

I was trying to run chrome extension and I'm stuck because when I tried to run it with npm run watch command, it threw this error as soon as I clicked on the "Capture Current Page" button:

Uncaught TypeError: html_to_figma_1.htmlToFigma is not a function

Do you have any idea what I can do now? Please advise.

Thank you.

The placeholder for text input fields and textarea is not imported.

am facing issue in which the plugin froze https://prnt.sc/sus730 it's just loading nothing come up no error in console nothing happening

When I import my website, the font-weight doesn't seem to be being picked up.

This is a screenshot of the website

And below a screenshot of the import

Would you happen to know what might be causing this issue?

Many thanks.

I really like the Chrome extension and it works perfectly, but my main browser is firefox, so I would really appreciate it if there was a Firefox version for the extension.

Just wanted to report a limitation I found.

Seems if an element features multiple backgrounds, e.g.

  background-image: 
    url('./img/big-t.svg'),
    linear-gradient(0deg, rgba(1,165,175,1) 0%, rgba(1,81,107,1) 100%);

Doesn't import any visuals. But elements with a single background work fine.

I cannot overstate the value of this to designers working to maintain prototypes of site pages or user flows in a large web application. Without this, there is only one pathway to maintaining 1:1 product-prototype parity: manual composition - or if you're lucky you have pre-created components to use.

For me personally, my team has hundreds of pages to account for in prototype form. This was a HUGE TIME SAVER. Does it pull a perfect 1:1 recreation of the page every single time? No. But it gets most of the way there, almost every single time. After evaluating other options for going from HTML to vectorization, they were all extremely inconsistent, and all I wanted was to go from "html to figma". Then after all that I find this! Dang.

Thanks for making this.

Syntax error on line 10: Unexpected token
import { traverseLayers } from "./functions/traverse-layers";