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?
Hi @Justin_Brown, 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:
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.
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).
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.
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
@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:
Perhaps even more relevant to this thread: Adam’s video series on table components. Here’s his introduction video where he talked about what gets covered.
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
I just wanted to weigh in here because I think what is being described here is what a tool called ‘Pinegrow’ can support: Editable areas | Pinegrow Web Editor
When creating a component, you basically say which elements within the component can be ‘repeatable’ and when creating an instance of the component, you can basically copy-paste as many times as you want that element which was marked as ‘repeatable’ in the original component.
Hopefully the Figma team can use this as a reference for how it might have been accomplished in other tools.
just wondering if you found a solution for this problem?
I have a similar problem and it’s really hard to keep altering the original component, only to have more options when it’s needed.
We have many drop-down through our system, and when number of options for nested or multi select dropdown menus change, each Tim I have to alter the original component.
I appreciate if you can share any better solution that you might have found.
I appreciate the input!
, 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.
