Variants in rows within one component

Hi, I’ve tried to search this, but couldn’t quite find what I was after.
I have created a component, and it has 14 variants. The options I can see is that they can follow each other vertically or horizontally, but not both.

At the moment all I can get it to do is go horizontally forever, or vertically forever.

Is there are way to create the variants to start new rows basically - be it horizontally or vertically?

I know this is probably user error, so please help! Thanks in advance :slight_smile:

Hey Caroline!

When you see variants arranged in rows or columns that is typically done manually. Figma’s “tidy up” button and pink handles let you make spacing adjustments help make this go faster, but I personally prefer to use the Simple Sort plugin by @James_Mitchell. It handles the grid-layout for you, with generous spacing in between each variant, and allows you to organize the rows and columns based on your property names!

For these things to work, make sure you remove auto layout from the main component frame!

1 Like

Oh thanks so much! The auto layout was on! I have downloaded the plugin too. Thanks so much Alice! :slight_smile:

You’re very welcome! :sparkles: