Wrap Variant to Next Line - Same amount of items in row

Ask the community
1

Hi,

I have a large selection of icons, each have varying colour and size. When Figma creates the variants for me, it adds it to auto layout.

I’m wondering how I can make each row have the same icons in it. At the moment I can’t seem to find a artay to make it so tha icons are all lined up. I.e everything should be a house to begin with here.

image
image948×346 20.3 KB

I’ve tried:

  • Using min-width
  • Duplicating the icon set, but this intefers with variants.

image
image912×636 11.7 KB

Any help appreciated.

2

Try Propstar plugin

3

Wrap each icon into a new frame, make it the same size, done!

4

Hey there,

Thanks for your reply @Pavel_Kiselev

Each icon is in a frame itself (a variant). If I wrap each one of these into a new frame it will update the component to make it so the component has a new width. So it doesn’t look like I can group them again once they’re made a variant (I’ve attached a video).

I’m basically wondering how Figma achieves this, highlighted on this page.

3840×1663 375 KB

5

Apologies video here: Watch Screen Recording 2024-11-11 at 14.59.48 | Streamable

6

I usually use regular frames to organize everything.

image
image2480×1494 284 KB

Just give it a bit of a structure

image
image764×1104 38.8 KB

Not sure what you get sizing issues thought

7

Oh, and you use a component set for icons, I would not do that. Harder to discover icons, no search, consumes lots of memory, and harder to maintain them this way.