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.
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.
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.
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
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!
