Add a "slot" functionality to components

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.

6 Likes

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.

4 Likes

(emphasis is mine)

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:

4 Likes

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’ve been pining for slot/children support for years. I think it is hand-down the most important feature Figma is missing at the moment.

4 Likes

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.

1 Like

I discovered the request regarding a repeater functionality. I think that request relieves the pain a bit for components that are not extensible.

1 Like

With slots, we can achieve a solution for everything, and components with multiple items inside like menus, tabs/sections buttons, navigations, etc.

This feature is so important, please don’t forget to vote for it!

1 Like

I made my own request here, but I’ll piggyback on this one since it has gained some traction already.

One key aspect of the feature would be that the “slots” are reorderable in the layers panel.

There are two problems with @Adam_Przewoski’s solution:

  1. 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.
  2. 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.

This feature can’t come soon enough.

1 Like