BuilderIO
Request: Map classes/ids to component names
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.
Oh that's interesting, can you elaborate a bit on what you mean and what you would use that for? I think I get what you are saying but a bit more detail could help me understand fully
Sure thing, I'll give a specific example.
So we have this shared component called `primary-nav' in our website UI kit:
My suggestion is that when the code encounters an ID (or maybe class? not fully thought through yet) that matches an available component name as shown here:
...that rather than importing that div as unnamed rectangles and frames, it instead places the component from the design system onto the canvas.
Oh this makes total sense and is very interesting - I will keep this issue open to keep it in mind!
This is a very interesting feature request. I can see some use cases where this would be useful; however, I find myself wondering if this is something that we really want? Allow me to explain.
Right now, when we do something in Figma we're just focusing look and function. You use frames and groups as little as possible to avoid adding noise. When you do the hand-over, the engineer will go through the design file and of course will make some calls. For instance:
- What should this be named?
- How should this component be implemented?
For this feature to work, we're going to have to do one of two options.
Option 1:
The Designer defines the component names in a simple way that translates well into existing class names. This is not ideal, because when you name components in the real world you don't name them something you name them something/variant for organizational purposes.
This isn't ideal because you're adding more burden to both, the designer and the engineer. And you might even say you add friction in there. Engineer Me would laugh so hard if Designer Me said "Stick to my naming convention so I can use this html-to-figma plugin."
Option 2:
The Engineer does that he does best and comes up with the DOM and naming convention during implementation effectively not affecting his workflow. Once he's done you rename your Figma Components to match whatever he picked.
There are some issues here: You're going to have to do work AFTER the implementation, and chances are you are not going to be happy with that. You'd ideally want your component names and states to be as readable as possible, so now the designer probably hates the engineer a little. Opposite of option 1.
If you asked Designer Me, if I want to circle back to do this to use this Plugin. I'd say "Uh... that's too much work." And then we go into trying to convince whoever pays the bills that this Yak Shaving Mission is justified. Possible, but such a chore.
Hidden Option 3:
We don't talk about this one. We don't do it. NOPE. This one would involve adding some new identifier that the engineer can drop into the HTML. Let's say in the form of a data-attr. But that's insane, crazy and it's a HUGE NO.
We don't do this. Please. Seriously.
Hey @steve8708 , are there any plans for this?
My use case is a bit different but somehow related. I would like to use this plugin to import my design system components which are already built and embeded in HTML.
Perhaps importIng html with some custom attrs. When specified attr is found, corresponding component would be created (or connected if it is already defined)
This functionality would be very similar to react-sketchapp and html-sketchapp in sketch ecosystem.
what do you think?
Hey everyone - apologies for the delay here! Busy doing a lot of work in prep for holidays but this is definitely very interesting
Once I can find a moment, I need to look into if figma plugins can register components (I recall them not being able to but this may have changed)
Also worth pointing out - we gladly take pull requests / contributions if you would like to add this feature in yourself!
Just want to add an update here as this thread is still top of mind.
One of the next significant things we want to do with this plugin is integrate with JSX Lite to read and generate code from.
This could also map well to Figmas components system so I think there is an opportunity there to tackle these two things at a time, so currently focusing on getting that project to a stable v1 and then will be looking deeper here again