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.
\nSwitch 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.
\nThe 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.
\nThe 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.
\nThe 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.
\nHere is the check-in flow you will build:
\nYou 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.
\nNow 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.
\nThe 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.
\nOverlay 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.
\nSmart 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.
\nFor 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.
\n\nSet 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.
\n\nNext 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.
\n","toc":[{"id":"sec-1","text":"Interactions: trigger, action, animation","level":2},{"id":"sec-2","text":"Interactive components: the check button","level":2},{"id":"sec-3","text":"Overlays: the New habit sheet","level":2},{"id":"sec-4","text":"Smart animate: matching layers","level":2},{"id":"sec-5","text":"Presenting and scrolling","level":2}],"takeaways":["Every prototype interaction is a trigger (such as On tap) plus an action (such as Navigate to or Open overlay) plus an animation.","Interactive components put interactions between variants inside the component, so every instance of the check button toggles on its own.","Overlays show content such as a bottom sheet above the current screen, with settings for position, closing on outside tap and a background.","Smart animate pairs layers by name and position in the layer tree, then animates position, size, rotation, opacity and fills between them.","Prototype the moments you need to test or explain, not every screen, and keep each flow short enough to finish in a minute."],"further":[{"title":"Guide to prototyping in Figma","url":"https://help.figma.com/hc/en-us/articles/360040314193-Guide-to-prototyping-in-Figma"},{"title":"Prototype triggers","url":"https://help.figma.com/hc/en-us/articles/360040035834-Prototype-triggers"},{"title":"Smart animate layers between frames","url":"https://help.figma.com/hc/en-us/articles/360039818874-Smart-animate-layers-between-frames"},{"title":"Create overlays in your prototypes","url":"https://help.figma.com/hc/en-us/articles/360039818254-Create-overlays-in-your-prototypes"}],"quiz":[{"q":"You want every habit row’s check button to toggle between To do and Done in the prototype, on every screen. What is the most efficient setup?
","options":[{"text":"Draw a connection from each check button on each screen to a copy of that screen with the button checked.","why":"That needs a new screen for every combination of checked rows, which explodes quickly."},{"text":"Add an On tap, Change to Done interaction between the variants inside the Check button component set.","why":"Correct. Interactions inside the component make every instance interactive, with no extra screens."},{"text":"Use After delay so buttons check themselves.","why":"Testers need to tap. A timed change does not test whether people find the button."},{"text":"Export the screens and add interactions in a video editor.","why":"A video cannot respond to taps, so you lose what makes a prototype useful."}],"answer":1},{"q":"The New habit sheet should slide up from the bottom over the Today screen and close when someone taps the dimmed area. Which setup fits?
","options":[{"text":"Navigate to a copy of Today with the sheet drawn on it, using Instant.","why":"It looks similar but the sheet cannot be dismissed by tapping outside, and you maintain a second Today screen."},{"text":"Scroll to the sheet’s position on a long Today frame.","why":"Scrolling would move the whole screen, not slide a sheet over it."},{"text":"Open overlay with the sheet frame, positioned at the bottom center, with a background behind it and closing on outside click turned on.","why":"Correct. That is exactly what overlays are for, and the settings live on the overlay so every connection reuses them."},{"text":"Change to a variant of the Today frame.","why":"Change to works on component variants, and the Today screen is a frame, not a component set."}],"answer":2},{"q":"In the first frame the streak badge is hidden with the eye icon. In the second it is visible. Smart animate makes it pop in instead of fading. What is the fix?
","options":[{"text":"Increase the duration to 2,000 ms.","why":"A longer duration does not help when there is no animatable change. Visibility toggles instantly."},{"text":"Switch the animation to Dissolve.","why":"Dissolve fades the whole frame, not the badge on its own."},{"text":"Rename the badge in the second frame.","why":"Different names would stop smart animate matching it at all. The names should be identical."},{"text":"Keep the badge visible in both frames and set its opacity to 0% in the first frame.","why":"Correct. Smart animate animates opacity values, but a hidden layer has no opacity to animate from."}],"answer":3}],"exercise":{"kind":"choice","multiple":true,"options":["names-differ","parent-differs","instant","duration","easing","trigger"],"correct":["names-differ","parent-differs","instant"],"title":"Why does the row jump instead of slide?","prompt":"When a habit is checked, Steady should slide its row down into the Done group. The prototype jumps straight from Frame A to Frame B instead. Here are the two frames, the connection and the layer paths of the Read row in each.
\n:::figure Two frames that should smart animate\n
\nSelect every cause that stops the row from sliding.
\n","hints":["Smart animate needs a matching layer: same name, same place in the hierarchy. Compare the two paths.","Look at the animation set on the connection too.","Three causes: the name, the parent, and the animation type."],"explanation":"The connection uses Instant, so nothing could animate even with perfect layers; switch it to Smart animate. Then smart animate still needs a match: the row is called Read row in Frame A and Habit row/Read in Frame B (different names), and in Frame B it sits inside Done group (a different parent). Give it the same name and keep it in the same parent in both frames, for example by keeping one list and changing the row’s position, or by moving the Done heading instead. Duration, easing and the On tap trigger are fine; they change how a match animates, not whether it exists.
Read row and Habit row/Read are two unrelated layers."},"parent-differs":{"text":"In Frame B the row sits inside a different parent group.","why":"Correct. Matching also depends on the layer’s place in the hierarchy. A new parent breaks the pairing."},"instant":{"text":"The connection’s animation is set to Instant.","why":"Correct. Instant never animates. Smart animate must be selected on the interaction."},"duration":{"text":"The duration should be at least 1,000 ms.","why":"Duration only changes the speed of an animation that is already happening. 250 to 300 ms suits a row move."},"easing":{"text":"The easing should be Linear instead of Ease out.","why":"Easing shapes the motion; it does not decide whether layers match. Ease out is a good default for things settling into place."},"trigger":{"text":"The trigger should be On click instead of On tap.","why":"On click and On tap are the same trigger, labelled for desktop and mobile."}}},"words":763,"readMinutes":4}