Hi all. I’m pretty sure this topic was discussed a million times before, but every answer I came across so far kind if “dodged” the real issue… or at least not giving me what I need :)
So, first of all, I’m new to Figma.
To clarify my level of understanding:
- I understand what a master component is.
- I also understand what a component instance is.
- I know how to set and use component properties.
- I also know how to use place holders that you can set to “instance swap”, so you can replace these bits when you use an instance of a master component.
- I also understand nested components.
With the above out of the way, let me explain my issue. Let’s talk about a simple thing, Form.
I would think the very purpose of building a “design system” (or a component library) is to be able to control design “from above”. Therefor I set up a Form master component, that controls everything about a form, i.e. padding between columns, padding between controls like input fields, dropddowns, etc (these are also all components). So now when a designer uses this Form component (places a component instance on a design), everything will look as it should, with the added benefit of if the master component is changing, all the instances will change with it. All good so far.
But…. in our system, we have many different forms. Some of them only contain a few bits, others contain many things. It’s not something we can predict, so the natural solution would be that the master component is only giving you the rules, I would just set up an example dropping in few bits, and then when the instance is used, the designer can add /remove/instance swap as many items as they want to.Of course we all know that all this is possible… except adding new bits. And this is the issue here… why is that not possible???
I understand that I could try to predict that the max number of items in a form is 35, so I could add 35 items into the master form component. Then the designer would place an instance of the master component on the screen, easily could remove 22 not needed items from the instance (as for some strange reason we are allowed to remove, but not to add?!), and then use instance swap on the remaining 13, to achieve the desired result/setup. But this solution doesn’t just sound silly, but also fails as soon as we have a form with 36 items…..
I also understand that I could build a “slot” (basically a place holder component) into the master component, then allow the designer to build the form up and create a “local component” of it, then the designer would instance swap the placeholder with this local form component. But with this, the top down library driven control is lost, beating the whole point of using a library.
The above issue is exactly the same for any other complex components, where the number of internal bits are not predictable, and I have a lot of those….
So…. I’m I missing something here? How others deal with this issue? And most importantly: Why can’t we simply add components into a component instance, to achieve the above? Especially in the light of we can remove items from it without affecting the master component?