Behavior Designer overview

Behaviors are interactions and animations that happen within a single screen of your prototype without transitioning to a new screen. Behaviors can be used to create realistic effects like hover and active states, toggle switches, menus, looping animations, scroll-based animations and more.

Behaviors are attached to groups and affect the layers within. Behaviors are created in the Behavior Designer, a separate view from the canvas where you are focused only on the layers involved in the behavior.

The behavior designer looks a lot like the canvas view, but there is a bar across the top which shows the states which the behavior can be in. Links are created between the states, similar to how links in the canvas are created between screens. Because each state has the same set of layers, the animation between states is automatic, and interruptible.

When you click on a state in the behavior designer, you’ll see the animation happen. Pressing the space bar will toggle to the previous state allowing you to preview the animation repeatedly.

When you create behaviors, start by creating each state you will need, then adjust the layers in each state, then create the appropriate links between the states.

It’s important to understand that behaviors can be applied to multiple groups, and editing the behavior itself will have an effect on all of the groups it is applied to. Duplicating a group with behaviors applied will not duplicate the behaviors, but keep the same behaviors assigned to the new groups.