Creating Multistate Elements in UXPin

Have you ever wished to create complex sliders, tabs or large menus? Have you already spent long hours adding interactions to create such complicated elements?

The pain has just ended! By means of Multistate elements you can achieve such effect easily in UXPin. If you’re not using UXPin yet, you can sign up for a free trial.  With that, let’s get started. 

Creating a Multistate Element

First of all, you should select an element or some elements. As soon as you do it, you’ll see States icon in the properties menu where you can change your element(s) into a Multistate Element.

This is the right place to apply particular States to your element.

Editing States

After adding a State, enter its Edit mode by clicking “Edit State” icon in properties menu or just by double-clicking on your Multistate element.

You’ll see State switcher (marked in blue) at the top of your element indicating that you’re in the Multistate element edit mode. What’s more, around your Multistate element you’ll see a blue dashed line (hint: the same dashed line appears when you edit the group).

In the properties menu you can introduce all changes needed.

Switching Between States

You can easily switch between particular States of your element. Just enter interactions menu, in “Action” dropdown see States: Set state, next state and previous state.

What’s interesting, you can choose some special effects such as flip or fade to switch between your states! Here you can see how they work:

https://live.uxpin.com/1ac48cbcf03055e9944bd382ed3138ac1f73d434#/pages/24143044?mode=cm

Interactive Elements

We’ve prepared a small library based on Multistate elements for you! It’s called “Interactive Elements” and you can find it in the libraries’ dropdown on the left side of the editor.

What’s inside? A ready-made clickable carousel, product thumbnail and tabs. You can adjust them to your needs freely. It’s also a great way to learn how Multistate Elements work — just play with them a bit and you’ll see yourself!

Give what you’ve learned here today a try with a free trial.