WHAT ARE MULTISTATES?
With Multistates, UXPin displays different states in a wireframe or prototype. If, for example, an element is clicked, the color may change, another element may appear, text may be faded in and much more.
Before creating an interaction with multistates, one should think carefully about which elements it concerns. This is important so that you do not include too many elements that have nothing to do with the interaction. If you would make a whole design (whole page) to a multistate, would change the default layout (First State) all other multistates to be adjusted; and that's hard to realize, because any change that has not been adjusted in the other multistates will be immediately negative.
Rule: Only transform elements into multistates that have something to do with interaction.
The first thing we want to do is click on an icon (flower) to display another element and then click on the icon again to make the second element disappear again. To do this, we go to the "Icons" area in the left-hand navigation and drag the published icon (flower) to the center of the image area. Now we can zoom in a bit and turn it into a multi-state element.
To do this, we click on the flower and go to the upper right corner of the user interface, next to "First-state", on the plus sign. In the new field we now see all existing states for the element; We enter the name of the new state in the bottom field (flower and house) and press the Enter key.
In the next step, we double-click on the flower - by the way, multistates always have a purple border. Now we are in the working level of the multistate. This can always be recognized by the purple border that surrounds the entire content area in UXPin. Now click on the purple button above UXPin and all available states will be displayed.
We click on States Number Two "Flower and House" and add a house icon to this page. To do this, we click on the icon library in the left navigation, select a house and drag it next to the flower. Now we have two states with two different content but no interaction - we'll integrate that in the next section.
We go back to the multistates in the backend and select "First-State". In the navigation on the right, we now go to the area "Interaction". Once there, we click on the blue button "New interaction" and then on the tab "More". In the newly opened black box we go to "Set state" (we say that we want to change from one state to another).
In the newly opened window we select our element, in the tutorial it is "Multistate 1". Thereafter, further fields appear, here we enter the interaction type in the field "Trigger" (Click), then under "States" (Flower and House) - because we want to show this by clicking on the flower. Under Animation we leave the value on "none" and confirm the whole thing by clicking on the blue button "Add".
Now we test our first interaction. To do this we go to "Preview" in the upper navigation and click on the flower. If you have done everything right, you will now see the house next to the flower. But we want to leave the house, which is why we insert a new interaction in the second state "Flower and House".
So we go back to the UXPin backend, double click on the flower to get into the States and pick up the "flower and house" element at the top of Multistate. Now we proceed as in the first interaction: Select the icon that triggers the interaction (flower), press the blue button "Interaction", go to "More", select "Set state". Then select the element (Multistate 1), with trigger select "Click" and at State "First state" (because we want to go there) and then click on the blue button "Add" to confirm.
Now we check the whole thing by clicking on "Preview" in the upper navigation. If you have done everything right, you can switch between both states with one click.