Skip to main content
Question

Can I place components inside another component instance?

  • October 21, 2022
  • 2 replies
  • 10767 views

k3vin

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 replies

Antoine
  • 144 replies
  • October 21, 2022

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.


k3vin
  • Author
  • 1 reply
  • October 24, 2022

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.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings