Allow component instances to have children

When defining components and creating instances of them, I really wish that I could allow them to have other elements as children (like text and non-component frames), without having to turn those into a component and use the instance swap property.

Forgive me if this is just a newbie problem – as I’m a programmer learning Figma for personal use – but it makes it more difficult for me to build components in a way that represents how I would actually build them in code.

I’ll use a modal as an example. In code, I might define a ModalContainer component which is composed of a backdrop and a floating panel (with layout properties), and which accepts children as props that get rendered inside the panel. Then when using it somewhere, I can just put whatever I want in it, like so:

<ModalContainer>
  <Text>Some text</Text>
  <Image />
</ModalContainer>

In Figma though, I can’t seem to do something this. I can create a component for the modal container and makes instances of it, but as far as I’m aware, the only way to put different contents in an instance of it is to use an instance swap property.

The problem with this is that instance swap properties only allow you to use an instance. Instead of being able to put the text and image inside the modal container like above, I have to turn them into a single component that lives somewhere else on the page, then set the instance swap property to that component. And then in order to make changes to (for example) the font of the text, I have to go to and change the main component instead of being able to just change it directly in the modal. (unless I want to allow the instance to fall out of sync with the main component)

For what it’s worth, the only reason this is a problem is because Figma does a great job at letting me create component designs close to how I would implement them in code :slightly_smiling_face: This is really the only grievance that I have with Figma so far, but it is a considerable one, so I hope this feature can get implemented at some point.

1 Like

+1

FYI there are plug-in that allows it. I’ve tried “Instance Utils” but this one allows you to paste content inside a component that is NOT another component (well,you can do it but it gets messy when you tweak the component properties).

I’ve created a component for the body of a modal but I detach it from the master to fill it with content. Not the best way, but it works.

Yeah, I’ve stopped using components for high level items like modals because of this.

Technically I still use them, it’s just that it’s either a UI kit item where everything is pretty much predefined (Icon, Title, body, buttons), or I detach it immediately so I don’t have to make a component just to have a non-standard modal.