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.
You need to have a bunch of slots in the main component to accommodate the designs with the highest requirements, which pollutes the layers panel for designs with fewer slots needed.
Items cannot be rearranged easily.
Slots should be just an arbitrary number of repeated components within a container component. The order and quantity of these slots should be freely managed.
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.
Hey @Equinusocio, Thanks for bringing this back to our attention!
We like to use votes as a way to measure interest and prioritize features, so we’re eager to see what the rest of the community thinks.
We think this idea could really benefit others in our community. If you’re on board with this idea, don’t forget to give it a thumbs up!
This feature almost exits in that you can replace inner component instance with another. There’s a few problems with it.
It doesn’t work the way you would expect it to work with variants.
The replacements are a pain to do from the combo-box. There should be some way to drag-and-drop replacement component instance into the “slot”.
The “slot” content needs to be it’s own component which gets annoying. An analogous problem in programming has been solved with lambda functions. Maybe that could serve as an inspiration for a one-off anonymous component in a “slot”.
Hi, we already voted on the closed topic linked above. If the platform keeps closing the topics without comment we can’t vote anymore and we lose previous votes, forcing us to open a new one from scratch.
A smart solution to this could be the one adopted by Framer. A container/slot to which you can link another frame that should be rendered inside.
Please! I feel like this is desperately needed and I saw a reddit post with a response from Figma saying they were working on it for autolayout over 4 years ago. Need to be able to fill a card/component ‘slot’ with anything be it a library component/local component/ad hoc non component content as needed.
Something as simple as being able to have a component that dictates the corner radius, border and padding of a content container! Seems so obviously necessary and basic that I’m baffled as to why it hasn’t been implemented yet. The instance workarounds are OK, but not great and don’t cover every use case.
Still very much need this!
Working with slots is okay with elements like Buttons, where there are a fixed amount of options, but having this would make Forms or even Page Layouts so easier to work with!
I believe this could save up to 30% of design time while helping with consistency across large projects.
Yes, this would still make managing design systems much better.
You build design systems based on the smallest-possible elements and build it out to larger, composite elements. We have Variables, we have Components, we have Nested Components. But to truly be flexible, a component slot would allow for arbitrary amounts of child components. It would be like allowing arbitrary amounts of Atoms in Molecules/Organisms when talking about Atomic Design Systems.
Maybe in the shape of an “Instance Slot”-type of property?
…which you can apply to a nested component instance like you can with Instance Swap?
This would result in additional controls in the properties:
