Prototyping: Interactions, Smart Animate and Overlays

A static mock-up shows what Steady looks like. A prototype shows how it feels: does tapping the check button give a satisfying response, does the New habit sheet come from where people expect, can someone find their way back? Testing those questions with a prototype costs an afternoon. Testing them after development costs a sprint.

Interactions: trigger, action, animation

Switch the right sidebar to the Prototype tab. Select a layer, drag the connection handle that appears onto a destination frame, and you have created an interaction. Every interaction has three parts.

The trigger is what the person does. At the time of writing, the triggers include On click/On tap, On drag, While hovering, While pressing, Key/Gamepad, Mouse enter, Mouse leave, Mouse down, Mouse up and After delay. For a phone app you mostly use On tap, plus On drag for swipe gestures.

The action is what happens. The common ones are Navigate to another frame, Back, Change to another variant of a component, Open overlay, Swap overlay, Close overlay and Scroll to. Advanced prototypes can also set variables and use conditionals, which are plan-dependent.

The animation is how it moves: Instant, Dissolve, Smart animate, or directional ones such as Move in, Push and Slide in, each with easing and a duration. For Steady, short and calm works best: Smart animate or Push, Ease out, about 250 to 300 ms.

Here is the check-in flow you will build:

Interactive components: the check button

You could draw a connection from every check button to a copy of the screen with that row checked. With five habits that is 32 combinations of screens. Instead, open the Check button component set and add the interaction between its variants: on the To do variant, On tap, Change to Done, Smart animate, 200 ms. Add the reverse on Done.

Now every instance of the check button, on every screen, toggles on its own when tapped in the prototype. This is an interactive component, and it is why Lesson 3.2’s careful variants pay off twice.

Overlays: the New habit sheet

The add button opens the New habit sheet, which slides up over Today rather than replacing it. Connect the add button to the sheet frame with Open overlay. In the overlay settings, choose a bottom center position, turn on closing when clicking outside, and add a background behind the overlay (a dark color at about 40% opacity dims the screen). Use a Move in from bottom animation.

Overlay settings belong to the overlay frame, not to the connection, so every button that opens the sheet reuses them. Inside the sheet, wire Save habit and Cancel to Close overlay.

Smart animate: matching layers

Smart animate looks at two frames, finds layers that match, and animates the differences. A layer matches when it has the same name and sits in the same place in the layer hierarchy in both frames. It can animate position, size, rotation, opacity and fills.

For the streak celebration on Habit detail, duplicate the frame (duplicating keeps the names identical), then in the second frame enlarge the streak number and fade in a “New best!” badge. Connect with Smart animate, Ease out, 300 ms.

Presenting and scrolling

Set Today as a flow starting point and press the play button to present. On a long list, set the content frame to scroll vertically and keep the tab bar fixed in place, both from the Prototype tab at the time of writing. Test on a real phone with the Figma mobile app; a 300 ms animation that looks slow on a monitor often feels right in the hand.

Next you make sure the screens you just animated work for everyone, including people who cannot see the teal, cannot tap small targets or use a screen reader.