In UXPin each element can have several states with a different set of properties and interactions. For example, you’ll be able to create a single button which has a default, hover, active and disabled state and switch between these states once a specific action is triggered. States let you also build complex components like drop-down menus or navigations.
For each state, you can determine an alternative set of properties — in the case of a button, it could be different fill and content. The important fact is that you’ll still have the same elements, just with various styling options.
You can also use states in symbols to create reusable components and animate elements between states easily with interactions.
Each element with states has a base state. It’s a primary state of an element — a foundation on top of which other states are built. The base state is marked with the flag icon, so you can easily see it in the States menu.
Whenever you update the base state, the changes will automatically appear in all other states of the element too.
However, if the changed properties have been edited in the other states before, they won’t be updated. Please note that in such cases, you’ll be still able to use Reset selected props to base state option.
In case of the interactions, you’ll be able to set them:
- for the base state — the interaction will be automatically added to for all states unless there are some interactions already set for other states;
- for the other states — the interaction will be added to the specific state only.
Adding and removing elements to states
Adding or removing elements in any state will add or remove them in all states.
If you add an extra element to the base state, it’ll be automatically included in other states as well. However, if the element is added to any other state, it will be visible for this state only — it will be included as a hidden layer for other states and you’ll be able to make it visible by clicking the eye icon in the Layers panel.
Also, since you’re not able to delete elements from the selected states only, you can simply hide them in the Layers panel.
Please note that including elements is possible only for groups – if you’ve added a state to a single object, you won’t be able to add more elements.
Resetting to base state
You’ll be able to reset the selected properties for an element or even the whole state with all its elements to the base state properties.
To reset the state, click the Reset all changes (marked with the arrow icon) from the States drop-down menu.
If you want to make sure that some changes on the base state are not being overridden on the state, you can reset the specific properties only. To do that, first, select the element inside that you want to reset. Next, click Reset props to the base state button on top of the Properties panel and choose the property from the list or use Reset all option to restore all the properties at once.
Moving Single Elements
The position of a single element with several states always stays the same for all states. Therefore, even if you move an element in a non-base state it will be moved in every state. A best practice here is to use states with groups, even if it’s a single element.
Here are three easy steps to make:
- Group the element
- Add a state
- Move one state of the element to the desired position
An active state is a state you are currently editing on canvas. It will be also displayed as the default state in the Preview mode. It’s marked with a checkmark by its name in the States menu.
To set a state as active, you need to select it from the States menu — you’ll find it in the top right corner of the canvas or in the layers panel.
You can also use Active State option from the context menu or a keyboard shortcuts Shift + < or Shift +> to switch between active states quickly.
To add a state to the element, select it on the canvas and click the Add new state icon in the top bar (cmd+shift+S). You can access it also in the context menu.
Next, set the name of the state and confirm with Enter.
You can manage states from the States menu.
Once you open the menu, you can do the following actions:
- Switch between the states — click on a state from the list to set it as an active state on the canvas;
- Add state — click +New state;
- Rename — double-click the state’s name;
- Reorder — grab the first icon next to the state’s name and drag it to the desired place;
- Delete — click on the red x icon;
- Reset all changes to base state — click the arrow icon to reset properties to the base state.
You can create nested structures with states. Consider building a form component which consists of an input with 2 states (empty and with added email) and a button with an active and inactive state.
By setting the active states in the Layers panel, you can determine which state of the nested elements should be displayed once the state of the parent element is changed. This way, you’ll be able to build a relationship between the state of an input and state of a button to display a proper combination.
Controlling states with interactions
If you want to show transitions between the states, you need to add interactions.
There are two types of interactions related to states — changing state from one to another and triggering an interaction when the state changes.
You can also create the life-like animations on the spot, based on the changes between the states. You’ll be able to fine-tune the easing and duration and preview the animation easily inside the editor — just press Preview animation button in the Interaction section.