Skip to main content
Question

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 🙂

4 replies

AlicePackard

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!


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


AlicePackard

You’re very welcome! ✨


joejoe
  • New Member
  • 1 reply
  • March 25, 2025

Going one step further to this, is there an easy way to annotate each row into a nice looking table like you would find in a design system.

 

 

 


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings