All designers create complex sliders, tabs or large menus from time to time. It sounds like long hours spent on managing interactions in order to create such complicated elements, but pain has just ended!By means of Multistate Elements you can achieve such effects easily.
Multistate Elements (MSEs) are sets of items, like boxes, buttons, and images, that change between configurations upon interaction.
Creating a MSE makes copies of the selected elements. You can move, resize, recolor, or otherwise change the copies per state. For example, two configurations — states — may each show a different icon. Clicking the element could flip between the states.
By using multistates, creating carousels will be a piece of cake now, let’s get started.
Creating a Multistate Element
Choose elements you want to work with and select them (these can be singular elements, groups, images, etc.). As soon as you do it, you’ll see States menu on the top right of the properties panel. By adding ‘New state’ you’ll change your element(s) into a Multistate Element. As a result the elements you chose will now be grouped and named “Multistate” in the layers section.
You may want to change ‘First state’ to your own name. To do so, just double click on the name and start writing.
The radio button next to state’s name indicates which one is the default state. You can change it effortlessly anytime!
When the state is added, enter its Edit mode by clicking the boxy “edit state” icon in properties menu or just by double-clicking on your Multistate element.
You’ll see State switcher (marked in purple) at the top of the editor indicating that you’re in the Multistate element edit mode. In this mode you can change particular states or add interactions that should only be activated on that one state instead of having them on the entire element.
What’s more, around your Multistate element you’ll see a purple dashed line (hint: a blue line appears around the group).
It’s important to note that elements in different states are copies of the original items you selected for the MSE, which means you can edit their properties freely per state. When viewing a particular state, you can move elements within that state, change their styles like color and opacity, hide them altogether, or give them interactions. To leave “edit” mode, click outside of the MSE — either on another element or the canvas.
Switching Between States
By themselves, MSEs don’t do anything. They need an interaction to make them change states. You can easily switch between particular States of your element. Just enter interactions menu and define your action from the dropdown.
You have three multistates-specific actions available: Next, Previous, and Set State. “Next” advances the currently visible state, much like advancing a slide in a presentation. When a MSE reaches the last state, and an interaction says “next,” then the MSE will show its first state. Thus a MSE with only two states will toggle between them with a “next” action.“Previous” does the opposite of Next, moving the MSE one step back through its states. “Set State” will let you specify which step the MSE will show.
Please note that you can add various interactions to the whole Multistate element as well as to the separate elements within a given state!
The difference between MSEs and simply showing or hiding elements with basic interactions is that MSEs can animate between states. Specifically, they can fade, spin, or slide from the top, left, right, or bottom.
What are MSEs best at? Anything that requires sets of elements to change on demand.
- Toggling icons, as seen above
- Modal windows that appear or disappear
- Revealing more information about an item
- Showing groups, like optional form elements, on demand
- Image carousels
- Changing text in buttons on click or hover
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. They’re editable, so 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!