Editing Variants

I design lots of tables and lists. The variant feature makes it super easy to drop in a table component, but if I need to add more rows or delete them, I’d need to detach the instance and then modify the table.

Currently the variant master component has a few options for X columns and X rows, which I can toggle on and off. The table variant is also a nested variant, so each row and cell are variants too. However it’s impossible to scale this, if I wanted 10 rows for example.

I wish there was a way to duplicate the rows that’s already part of a variant, without changing the properties of it. Or it would be interesting (but probably more complex) to include a dynamic property which can automatically detect the duplication of nested variants.

Has anyone come across this need? What is your workaround?

3 Likes

I like this idea.

The way that we currently deal with things like this is to place a bunch of hidden copies of the components and wrap them in an auto layout so that the container resizes to only the objects that are viewed. Then when we need more rows, tabs, cards, etc. we go to the layers panel and just unhide more.

*Note this approach is still a little problematic because it doesn’t let you rearrange the order like you can do in a detached component. So our work around for this that sometimes works is that when we start by showing/hiding every other copy. It would be nice if we could override auto layout object order without detaching the components.

Here is an example of out Tabs Bar:

4 Likes

Yes, that’s the common way of doing that at the moment.

Regarding moving there is this @Mr.Biscuit plugin that aims to allow you to move/reorganize elements in an instance without detaching it.

PS: I haven’t tried it yet

3 Likes

I was thinking of doing this too, but was afraid of performance issues with so many hidden elements. Although it would be super cool to add new rows that will refresh with placeholder data.

1 Like

Sadly I can’t use community plugins for work, but this sounds like a great tool.

This 1000%. I use the exact same “solution” and I have the same dilemma of not being able to rearrange order of autolayout children. That kind of override would be a huge improvement.

2 Likes

Thanks Steven, I just installed the Instance Utilis plugin and it worked. It is not perfect because it will revert any component name overrides but it does allow reordering which is super cool. Thanks for the head up on this plugin.

If I can suggest something for tables, don’t make the table itself the variant.

Instead, make the row or column a variant (most commonly rows) that way you can wrap it on a simple auto layout and adjust line positioning. I did this video to explain how I do it. This allows for unlimited table sizes.

Here’s my file: Tables in Figma

10 Likes

Thanks for the suggestions, I have rewritten the entire algorithm and had all the known bugs fixed. Now the plugin performs 5x faster than previous on average.

4 Likes

@Mr.Biscuit
Awesome, I will check it out this afternoon. Thanks for letting creating this plugin and thanks for letting us know about the update.

@Bruno_Figueiredo is there a way to click on the cell and manually change the width or with the cursor, it won’t let me when is an instance of the main component.