Need Help With Prototyping

Hi Kyndal 👋🏽

You can do it by making one of these profile as a component, and make 2 variants for it (default state, and selected state).

Then you add “click” interaction for both buttons, and copy these component as much as you want.

Check this example, and you can see the file here.

Attached screenshots as well. Good luck!

I would ask why.

What is your end-game here? You say you want to select more than one profile. But then what? That is the key…depending on how they interact with the list they have built, or if something is going to display below depending on selection? What is the greater screen flow?

If you have some more information on how you are using these, we might be able to provide some better guidance. I love @eldurini response…but that was when I realized that we do not know what this is doing.

If we can help more, let us know more detail about the rest of the action. 👍

Hi! first thank you for responding! I did realize after making this post I definitely could have explained things better and I was going to do that the following day. So I’m designing a family scheduling app and this process is for my frame that I have titled “Adding event” (I’ll have a picture down below.)

So when the user is creating the event, let’s say the event applies for two people. For example the event is hiking with friends and it includes Lauren and Rob, so I want the user to be able to click on both Lauren and rob.

However with my prototype, I seem to be missing a interaction somewhere I believe because when I click on Lauren once it selects her profile but then when I click on it twice it highlights rob as well even though I didn’t click on him and then when I click a third time it unselects them both. Same thing with Rob, I tap once and he’s selected, I tap again and both he and Lauren are selected and then a third time and they’re both unselected. But when you see the prototype I’m unable to click on both of them which is what I would like to do.

I hope this was able to clear some things up and if not do let me know!

Thank you for responding! I will definitely be trying this and let you know how it goes!

Thanks for the clarification.

Definitely @eldurini nailed it. Even provided you a file to reverse engineer or use as-is. Great component and good stuff.

But that is the way to do it. This will give the component that has a variant for selected and not selected. Then put in multiple instances like in the example. Each will interact seperately.

Post again if you have trouble implementing that.

Thank you for your help! It did exactly what you showed and what I was aiming for! I am curious though, is there a way to do it like I originally had it set up? I had all 4 profiles set as a component instead of a singular one or is the correct practice doing it for one and just doing multiple instances?

No problems I was able to recreate it and got it to function just like the example. Thank you for your help!

Hi again

Yes, it’s possible, actually this is how we had to do it earlier in Adobe Xd with its limited capabilities.

To do this in the way you provided initially, you need to the Factorial of the number of profiles you want to add (A factorial is used to find how many ways objects can be arranged in order), then add +1 to it (which is the empty state).

In your case, creating variants for 4 profiles requires you to create the total of 4! +1 variants, which is (4 * 3 * 2 * 1) +1 = 25 variant.

So it’s not efficient, but in terms of possibility, it’s possible to do.

To know more about Factorial of a number, follow this link.

In all cases, variants what made Figma distinguished from other competitors, because it reduces time spent on the technical implementation and make you focus on the design itself.

I recommend to use the method I provided you earlier, but of course it’s up to you.

For advanced actions, such as making some profiles hide or unhide by clicking on them, you can use “variables”, but that’s a different question and thread.

Thanks, and good luck!

Note: the “!” symbol after a number means the factorial of that number.

Got it! Thank you again!