[LAUNCHED] Add a "slot" functionality to components

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.

Reopening this 😕

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!

Thanks,

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:

Every day I’m facing dilemmas regarding how to structure my components, because we lack this basic functionality. You have to improvise, make bunch of unnecessary, place-holder stuff, make components 10x more complex than they should be…

We really, REALLY need proper slots.
If front-end frameworks have this basic functionality, then Figma should have it as well, since it’s supposed to be a place where we design front-end.

HUGE +1 on this. We use modals fairly often in my company (for forms, not bombarding users) and it would be a HUGE improvement in maintaining modal style flexibility. Right now, we have to detach the instance every time we alter what’s in the modal and this means we lose the modal controls themselves (think labels, CTA toggles, Icon toggles, semantic feedback styles, etc). With slots, we could ensure that our modals remain consistent components while gaining the flexibility of adding unique content within.