Designs often look different when users interact with it. States allow you to change the appearance of an element when you interact with it:

• None. This is the default state without interacting with it.
• Hover. When you hover over an element with a pointing device (such as a mouse.)
• Press. When an element is pressed. Often used with buttons and other controls.
• Focus. When an element receives focus. For example by using the tab key or when using assistive devices.

Transitioning between states

From a UX perspective, it is often preferred to make transitioning between states less sudden. A typical example is a button that fades to another background color when hovering or pressing it. Luckily, Handoff has built-in support for basic Transitions.

Animating between states

It is not yet possible to define complex, timeline animations between states, for example, making other elements appear when clicking a button.

Continue reading

Size