Can I place components inside another component instance?

I’ve created a card component (a container with border styles, a header, and sections) that gives me a foundation for quickly building different forms. Still, when I try to place a component (ie. a text field) inside a card component instance it automatically puts it outside.

The only workaround I can think of is creating a variant for the card with ALL the forms in our system, but I don’t want to do that as I need it to be flexible and work like building blocks. Do you know of any smart way to have a card component that can be used as the foundation to build different forms with different components inside?

This is what happens when I try to place different components inside the card/pane instance:

2 Likes

The whole point of component instances is you can’t add things inside, only override existing children.

In your case I would advise to have a component for your card header, and wrap contents inside a non-component Frame with adequate styling.

If you really need to have a component for your container, you can design it with several (as much as you maximum use cas has) form elements inside that you can then show/hide/instance swap in instances for the desired result.

1 Like

Thanks for the response!

I figured there was no way around it. Would’ve been nice if Figma allowed you to add things to an instance while somehow keeping component properties for the original parts of the instance. That would’ve eased the process of designing new pages and forms much faster and more streamlined.

6 Likes