Using States

You can enhance the interactivity of your prototype by using states. States allow you to hide or show components based on actions you perform in the design such as clicking a button or mousing over an image. Using states, you can create pop-ups, mega menus, and much more.

For example, here is a simple interaction where clicking a button shows a pop-up window:

A State-Based Interaction

Visibility

Pop-Up Visibility Inspector

You dynamically show or hide a component by setting it to be visible (or hidden) only when a certain state has a specific value.

To do this for the pop-up window in the example above:

  1. Right-click the pop-up and select Inspect Component from the menu.
    • This opens the Component Inspector window.
  2. In the Visibility section of the inspector, click the field labelled “…only when”.
    • This opens the State Values window.
  3. Click the New button in the toolbar to create a new state.
    • This opens the State Inspector window.
  4. Name the state “Pop-Up” and save your changes.
    • This creates a new state. A new field appears in the state values window, labelled “Pop-Up”,
  5. Select the second value, “ON”, and save your changes.
    • The component is now visible only when the “Pop-Up” state is set to “ON”.

Note: For more complex interactions, you can select multiple values of multiple states. The component will only be visible when each selected state has one of its selected values.

Actions

Button Actions Inspector

You make a component appear or disappear by changing state values when the user performs a certain action.

To do this for the button in the example above:

  1. Right-click the button and select Inspect Component from the menu.
    • This opens the Component Inspector window.
  2. In the Actions section of the inspector, click the field labelled “On Click (States)”.
    • This opens the State Values window.
  3. Find the field labelled “Pop-Up” that corresponds to the state you created above, select the second value, “ON”, and save your changes.
    • The component will now set the “Pop-Up” state to “ON” when it is clicked.

Note: For more complex interactions you can select values for multiple states. Clicking the component will set each selected state to its selected value.