Variables for dynamic number of elements?

I’m building a component for a list of checkboxes, and I’d like the component to allow designers to select how many options it should contain so it can dynamically resize. Just adding a bunch and letting designers hide the ones they don’t want doesn’t work because the layers are still there, so the “hug” setting doesn’t shrink the bounding box. I’m looking to allow designers to truly dynamically set the number of elements in each instance. (Hopefully that makes sense.)

Is there a way to use variables in a component to replicate a certain element X times?

Variable modes are I think the designed solution for this, even though you’d have to define them beforehand. Sadly the amount is limited to 4 in a plan less than Enterprise.

Regarding the hug issue, you might be running into this known issue: "Empty" Auto Layout Frame keeps the size of last hidden child - #21 by Averyy

I’ve made an example:

I wasn’t able to piece together how you constructed that example, but I don’t think that solves what I’m looking for anyway. I’m looking to just have an input field as a property where I can enter a number, and a given element inside my component will be replicated that many times with the containing auto-layout frame adjusting height accordingly.

Hello @Damon_Tolhurst,

“an input field as a property where I can enter a number, and a given element inside my component will be replicated that many times”

What you just described above isn’t possible through Figma at this time.

Ah I think I understand now. You’re talking about during designing, not from inside a prototype. Indeed not possible. People are populating dropdown list components with many items. Users then need to hide the items they don’t use.

That’s what I figured, but still a bummer. Wasn’t sure if there was some tricky way to coax variables into such a function. Thanks for the info.

I am using that method of hiding the instances and hug still works. Can you share your component’s layer structure? Are the designers breaking the auto-layout?

Thanks for the follow-up. I did actually get that to work. I think I was just mixed up in my layers and how they needed to be set up between hugging and filling.

1 Like

The way that we handle our Checkbox List component is to create a Checkbox component, then setup the Checkbox list with a single Variant that allows for users to select what number of Checkboxes they would like. We provide just 1-7 and encourage our designers to detach if they need more than that :slight_smile:

That looks like about what I’m looking for. How did you set up that # of Checkboxes property to replicate checkboxes like that with a single variant?

Ah, my apologies, I mis-typed. What I meant to say was “…with a single Variant property…”. So we create the property for “# of Checkboxes”, and then add a variant for 1, 2, 3, 4, 5, 6, 7, and 8. As far as I am aware, there is no way to “dynamically” generate any number of an item using Figma. It all has to be explicit!

1 Like