Object States give you the ability to assign various “states” to an element on the canvas. So for example, you can tell the Studio that you’d like your shapes and images to look one way by default, but a different way when you hover over or click on the object. With Object States, you can easily change things like canvas position, opacity, size, rotation, image effects (brightness, hue, saturation, etc.), and the color of an object when a user interacts with it in a certain way.
Why use Object States?
Suppose you wanted an object in Studio to transform upon user interaction. In that case, you’d want to duplicate the object, apply the visual transformation to the duplicated object, turn off the duplicate object's visibility, and then utilize an “On Hover/Click/View –> Show –> duplicate object” interaction to reveal the adjusted duplicate object. This isn't the most straightforward process. You can certainly still follow this workflow if you’d like, but we desired to streamline this process. Using Object States will eliminate the need for almost all of these steps! Read on to learn how incorporating Object States can speed up your workflow.
Here’s how:
Select the element that you’d like to transform upon a hover or click interaction. This can be a jpeg, png, svg, an in-studio shape, or a text box.
Navigate to the Design tab and click the plus sign next to States.
Default is the default state of the object. This will dictate how the object looks on the canvas without any user interaction.
In the dropdown menu, you’ll see options for “Hover”, “Click”, or “Add New State.”
Hover - If you select hover from the dropdown and apply changes to the object’s attributes, this will impact what happens when a user hovers over that object. This allows you to make subtle design changes without requiring an entirely new layer.
Click - If you select click from the dropdown and apply changes to the object’s attributes, this will impact what happens when a user clicks on that object. Keep in mind that this state change will be applied and stay visible once a user clicks similar to how an “On Click -> Show” interaction currently works.
Add New State - This enables you to apply multiple states to the object that you can then target from a different object or hotspot. Instead of being labeled as “Hover” or “Click”, these are generally labeled as State 1, State 2, etc. Since they are not triggered by hover or click interactions by default, you are also free to trigger these using "On View" interactions. These states can then be triggered by “On Click/On Hover/On View -> Change Target State” interactions.
Please note: if you’d like to layer additional interactions on an object (for example, a CTA that changes color on hover and then links to an external site on click) you can either apply multiple interactions directly to the object/group or use a hotspot over the element to add the additional interactions. Just ensure that if you choose to use a hotspot, it also targets your Object States, otherwise, it would cover up your ability to activate the state.
Wait …so when should I be using a hotspot??
While it’s perfectly acceptable to apply interactions and states directly to an object or group of objects, there are a few instances when using a hotspot could result in a better experience. And while this is by no means an exhaustive list, we’ve outlined a few of those potential cases below.
You’ve always used hotspots to trigger your interactions and you feel more comfortable doing it this way. That’s totally fine! You can use hotspots to trigger the object state change and any additional interactions as well.
You need to increase the clickable area of an object. This can be achieved in one of two ways. You can use a hotspot like we’ve outlined above to trigger both the object state and the interaction. Alternatively, you can place the hotspot within your group (increasing the clickable area of that group) and then apply the Object State to the elements within the group, and the interaction directly to the group. Be sure to toggle Use group as trigger.
You want to clearly distinguish which layers in your Layers Panel have interactions applied to them. Unless you rename your layers, there is no clear way to indicate which assets have a state or interaction applied to them from your Layers Panel. So if maintaining the ability to quickly scan your Layers Panel to find interactions and states is a priority, we suggest you use hotspots to target/trigger both.