A Sketch You Can Actually Tap

M3E Canvas turns a design into an interaction flow by giving authored targets, states, and transitions a small runtime of their own. This chapter follows what happens when a person taps or swipes in the preview, how the navigation stack decides what Back means, and where control state lives while the preview is open. The practical test is not whether a screen animates attractively; it is whether the preview exposes the behavior that the design document actually specifies without pretending to be the finished application.

Navigation is an authored state machine

The preview begins with a current frame and a stack that records how the visitor arrived there. A tappable part can carry an action to another frame or to back. A navigation bar destination, top-app-bar icon, rail destination, toolbar button, FAB-menu entry, or tab can carry its own slot action. These are distinct entry points into the same flow. The visible part tells the visitor what can be touched; the action tells the preview what relationship to exercise.

That separation is useful because a screen often contains several actions that look similar at the component level but have different consequences. A list row might open a detail screen. The search icon in the app bar might open a search screen. A settings destination in the navigation bar might open a third screen. If all three were represented only as “clickable,” a preview could show feedback but could not test the product's navigation structure. M3E Canvas keeps the target with the part or slot that owns it.

When an action points to a valid frame, the preview pushes that frame onto its stack and selects the authored transition. The available transitions include slides from different directions, fade, expand, and no animation. The transition is not just a visual effect attached after navigation. It describes how the new screen enters and, because the stack remembers the entry choice, how the visitor can leave it.

Back is consequently more precise than “go to the previous frame.” If a detail screen was reached by a slide, Back plays the corresponding entry movement in reverse and then pops the current frame from the stack. If a screen was reached by a fade or expand, the reverse uses that form. A frame can also explicitly point an item at back, which lets a visible control request the same stack operation as the preview's Back control. The system Backspace/left-arrow handling and the visible Back control use the same underlying idea: return through the path by which the current screen was entered.

There is a deliberate exception for screens of different sizes. A slide that moves a phone-shaped screen through a desktop-shaped window would suggest a spatial relationship the design does not have. The preview instead uses a fade while its shell eases between the two dimensions. This keeps motion aligned with the meaning of the transition: equal-sized screens can move as neighboring states; different-sized frames represent a change of viewport regime and are handed over more cautiously.