Variables for dynamic number of elements?

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.

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.

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 🙂

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!