Figma Support Forum

Is it possible to have an instance of a component and duplicate/add items inside it?

Hello,

I have a table component set up with 4 rows and 6 columns to start with. I’m using auto layout with a vertical direction for rows. When I drag an instance of the table component from the Assets panel into my project, I want to then duplicate/add additional rows, say up to 25 in this instance. However, when duplicating a row in an instance of the table component, it puts the row outside of the component instance.

I have a similar setup for a vertical menu using auto layout with 4 navigation items in that component to start with. When I’m using an instance of the menu and duplicate a navigation item, it duplicates it outside of the component instance.

My question is, is it possible to have an instance of a component with minimal items to start with, and duplicate/add additional items inside it and maintain the auto layout and the core styling/variants functionality of the main component—in my instances adding more rows to my table and more navigation items to my menu?

Demo link:

Thanks!

Hi @Justin_Brown this is not possible at the moment no.
I think I explained it here:

1 Like

Thanks, @Bruno_Figueiredo. Bummer. :cry: I appreciate the input!

You can vote for this suggestion: Fully Editable Component Instances

1 Like

Hi @Justin_Brown :wave:, I’ve also run into this many times with components. I’ve noticed this comes up for pieces of interface where it’s nearly impossible to account for every possible permutation or future use-case. Some other examples that come to mind are modals and cards.

I recently have been using component swapping to get around this dilemma. It’s not without it’s own tradeoffs, but if you take a liberal approach to componentizing things (componentizing almost anything and everything), and build components on atomic design principles, I think it can work well.

Here are the steps I’d recommend based on the file you shared in your original post:

  1. Create a “Row” component made up of a few of your existing cell components. The number of cells does not matter. It is important that the entire row is componentized because this is what you’ll be swapping later to inject more rows into the table instance.
  2. Similar to your current set up, create a few instances of your row component (again, the number of rows doesn’t matter; perhaps keep it small for now, like 3 or 4 rows), and then componentize them all together for your “Starter table” component. This would look like what you currently have, except each row is a component instance rather than a frame of table cell components (forgive me if my assumption is wrong on your set up, I’m just going off of what I can see through the embedded view).
  3. When you create an instance of this “Starter table” component, and you need more rows than the 3 or 4 that exist, make duplicates outside the instance (just as you originally described). Then make any necessary overrides and adjustments, and then componentize this new set of rows… you could name this component something like “Extra rows”, and its sole purpose is to be used in this single instance, and likely no where else.
  4. Finally, choose a row in your instance of “Starter table” and use component swapping to swap it with the newly made “Extra rows” component. You should now have more rows in the instance of “Starter table” than what exist in the main component of “Starter table.”

Hope this is helpful! Happy to explain further, or provide a different example if need be. I know the pain of needing to “expand” upon instances well :sweat_smile: