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!
1 Like

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:

1 Like

Thank you Alice, I was really struggling with this and your reply was the best I have found

1 Like

@Felicity, more than happy to help! Since writing that reply last year more and more folks have gotten on board with this method of expanding the contents of component instances. You might be interested in checking out these videos from @Adam_Przewoski’s, he’s produced some of the best tutorials I’ve seen on this topic:

2 Likes

Hope someone on Figma reads this - we badly need an option to duplicate elements inside components with autolayout. There are so many use-cases for ex. dropdown menus, various lists or breadcrumbs.

Now the only option to make it work is to create a component (for ex dropdown menu) with max number or rows we expect it could ever have and hide the unnecessary ones each time we place an instance. This isn’t smooth way to work with that kind of content.

If you don’t want to make components fully editable how about an optional switch “allow cloning” we could toggle for element inside component that we may want to have multiplied.

In such case if I create a component that consists of title and bulletpoints with autolayout I would allow the “cloning” option for bulletpoints only, making sure no one will mess with the header by duplicating a title.

Please consider this. Without similar solution, creating complex flexible components in Figma is an headache :sweat_smile:

3 Likes