I have numerous pages that are basically 6 questions per page. The questions of each page with have check boxes for multiple choice but may have a different amount of answers depending on the questions.
So user has question one could be:
How old are you?
( ) Below 50
( ) 51 to 60
( ) 61 to 74
( ) 75 and above
[ Next button ]
Question two could be:
Are you currently retired?
( ) Yes
( ) No
[ Next Button ]
So say around six page like this, I’m thinking the designs are pretty much the same, just different questions and text
How can I make the local variables in the best way to handle this?
If I understand correctly, then I think you’d need a unique variable for each checkbox to have it select/unselect, and you can’t do a radio button set unless you have each state of the set as a separate frame and maybe make the set into a component with states using modes with the variables. Things soon start to get complicated pretty quickly.
Yeah think @gilgongo is on the right track. Curious what exactly you’re tying solve for with variables here? I feel like a component set with some variants would work for this but not sure what you’re looking to improve on
I think the issue might be the sheer number of variants you’d need to cope with all the combinations of checkboxes/radios. 6 questions per page with maybe 2 to 6 possible answers is something like 200 variants? Oh actually maybe if it’s variants per question, then it would be less, but still pretty hard to mange for each combination when using the variables to switch between them.
I think until Figma has some kind of “component local variant” function, then it’s not practical.
This is a rough example of a section. I have just started a role and looking to fine tune the designs to reduce the spaghetti prototypes. I have also started using components for different sections, like the “Why are we asking” expanded section rather than having duplicate pages.
But yeah the question I have is there are multiple questions in pages like this. The user checks a box then moves onto the next page.
The questions vary in the amount of answers, some may have a few like the ages in the example I have posted, some may just be Yes or No answers.
Once they select the answer they then move to another page with a new question.
Sorry, what I’m trying to solve with variables here is one page design, and maybe the option that later down the line if certain questions were answered in certain ways, then at the end the results would show specific text based on those answers.
Maybe I’m typically over complicating a simple process here
Got it. Yeah not sure how much variables will help here. You could simply the question component though by using variants. Here’s an example where you would have a variant for each option set (2 possible answers, 3, etc.)
Ah yeah I think this would be a bit tough. It may be possible but would be quite complex and probably a pain to maintain. I’ll try a few things out though later to see if I can come up with something.
@gilgongo Yeah, but the designs are so repetitive I was wondering the best way to approach it. Seems silly to have multiple designs. I started making a ‘page’ component with nested components inside of it. This might be the best route but was curious if with the new updates there might be a better way to do things.
Oh actually maybe if it’s variants per question, then it would be less, but still pretty hard to mange for each combination when using the variables to switch between them.
