I’m trying to assign a variable to a component instance so that I can switch instances when clicking. I’m trying to learn how to use variables to create a less intensive way to setup prototypes that have a lot of ‘buttons’ that switch between content. With the screenshot I’ll share, I have it manually rigged up so clicking the pill button on the left panel changes it’s state to selected, makes the clicked pill become selected, and changes the content panel on the right with the related text.
I looked over a few videos and I feel like I could could be done similarly to what’s done in this video, where clicking the color box changes the selected alien character. Just replacing the color box with my pill buttons and the alien with my text. But I’m having trouble seeing how to easily assign the variable to my selection.
How might I be able to do this without manually rigging up a ton of prototype connections? By the way this is my own personal project not actual hired work for the agency shown.
Page 1 / 1
Let me recreate all these things for you, just the first 2 pills for example:
1. Text content
First you have to create a component set of all text content, which would be displayed on the right side when a pill is selected (be sure that you don’t put a comma in variant name).
Then create a String variable to indicate which pill is selected. The default value of the variable should be the default selected pill (maybe the first one).
When you put the instance of that “text content” component in the screen, bind the property with the created string. This will make the instance change variant according to string value.
2. Pill selection
Now let’s get to create the most complex thing in the prototype: single selection among all the pills.
The rule is: there must be one and only pill be selected at a time. That means when you select an other pill, the currently selected pill must be deselected. To do so, you have to create all Boolean variables for every pill...
...and bind each variable to its appropriate pill.
As I said before, when you click a pill, you have to make sure all other pills must be deselected. For example, you click pill 5, the pill 5 would be true, and all other pill would be false.
Do this prototype for all pills. Quick tip: create prototype for one pill, and copy to others, then edit true/false in each pill’s prototype.
3. Change text instance on pill’s click
You have prototype for 2 separate parts, now you connect them by changing the String variable on every click on pills.
For example, add to the first pill one additional “set variable” action, that sets that String to the exact variant name of the “text content” component (check spelling if it does not work). Do the same to the others.
4. Test the prototype
This is the result I get:
Hope this helps.
In the video (which is using the old UI) you can assign the variable to the instance like this. Video screenshot below.
I’m not seeing a similar way to do this in the new UI. Maybe there’s a different way to go about this? Current UI below.
Wow Phu, thanks so much for the step by step. I’m going to read in detail and try this out now!
Hi Phu (or anyone else), I’m able to get the text to switch back and forth when clicking on different pills.
Though, I’m stuck with a few things and after some hours of trying to get things to work, I could use some more guidance! Here’s where I might be going wrong.
I’m unsure of how to setup the pill component (and its boolean) properly. Right now, when I do it it just hides the other pill on click when it’s switched to off.
I’m also unsure if I’m applying the boolean to the pill in the prototype properly. I feel like I’m doing something funky to make it apply and there’s probably something that’s easier.
Also, while messing around trying to figure out how to get this to work, I thought about if there is there a way to have the on click change the instance state with using a variable? I think the only thing that’s limiting from figuring that out is how to apply a variable name to each separate pill. Then when I do the on click interaction I could turn each one into the appropriate instance (Selected, Deselected).
Okay, I solved my problem! Thanks so much for the earlier input Phu.
I was able to apply the variables to the pills instances using strings. Then I started then with the default values of “Selected” and “Deselected” whose names corresponded to my instance names with the selected and deselected button states.
On click, I “set variable” of the target pill (‘Pill 1’ or ‘Pill 2’) to the updated value. With this method I can just keep adding pills and then adding the set variable for each as I add them (just like Phu showed me with the boolean).
I attached a screenshot of the setup.
I wasn’t able to properly attach my variables to the instances on the prototype before because value I used in the variable didn’t match with a name of an instance. Here’s of screenshot of how I set it up so it all matched.
