My suggestion for Figma is to add a “slot” functionality to components.
This would allow designers to create more flexible and customizable components, by adding empty slots or placeholders within a component. Users could then insert their own content or elements into these slots, without having to ungroup or modify the component itself.
This functionality would save time and increase efficiency for designers, while also promoting a more consistent design system across a project or organization.
I believe this feature would greatly enhance the flexibility and usability of Figma’s component system, and would be a valuable addition to the platform.
Love the idea, I have been trying to override nested instances inside of parent instances without success! But along that vein: how would these slots affect nested instances? Would it expand the nested instances feature with for example a toggle to “open up” the instance swap feature for overrides? It could be pretty elegant; toggle overrides on/off, and default to one of the preferred values for the instance swap
Great idea! We can add a special attribute called “slot” to the component to enable the functionality of inserting other content or components into the component.
This will make the component more flexible and reusable, while also improving the efficiency and consistency of the design system.
This approach is similar to the slot and component-based development patterns in modern web development.
I’m begging for this functionality. It’s such a basic and common design/development pattern and functionality, and yet, it’s missing.
In terms of how it would look and be used in Figma’s interface, it can simply be an addition to the already present “Boolean”, “Instance Swap” and “Text”. Just add a “Slot” option, and you simply select an element within a component, and make it a “Slot”. Or go to component’s properties and create new “Slot” and then assign an element to it.
There is a ton of use cases for slots. Basically, every container should be a slot. Every modal or a dialog box we design, should just be that: modal or a dialog box, and they should be free of content in terms of logic. You add content to it, because they shouldn’t be concerned with content, just the layout structure and design.
I think this feature can’t come soon enough, and I think there isn’t a single designer who wouldn’t be overjoyed with having this feature available, seeing there are already numerous videos and tutorials explaining how to do something similar, but in an extremely “hacky” way.
I was just thinking about this “extensible” possibility, too. Like being able to truly create modular components in atomic design systems. Like a segmented control component which accommodates N amount of segments:
Would love to see this as well. Our team has worked around this using instance swap and a ‘default content instance’ that’s an example, but the big limitation we run up against is that original example instance always dictates the size of what you swap it out with. For example if it’s a 200 x 200 container and I need to put something 300 x 300 in there, I always have to do some tweaking and experimenting to get where I need to be with the Hug and Fill and the size of the main component. If I had multiple slots that could be swapped, even worse / impossible.
I came here to look for this exact request. I am so tired of having ten hidden items in components. My other workaround is to have dozens of properties, one for each slot. I agree that there is probably not a single designer who wouldn’t benefit from this. It’s my #1 request by far.
