Motion prototypes without ProtoPie

To show a single screen transition or one toast, teams often move their screens into a separate prototyping tool and rebuild the interactions there. The result looks good, but at handoff someone always asks, "how many milliseconds was that, exactly?" In ScreenPath you set motion right where you designed the screens, check it in the player, and hand off the same values in the spec.

ProtoPie is an excellent tool that goes all the way down to detailed interactions and device sensors. This post is not about replacing it — it is about finishing app-flow-level motion inside your design tool.

Start from motion presets

ScreenPath ships with 60 motion presets.

• Screen transitions — instant, fade, push, slide over, pop, flip, sheet, modal, full-screen cover, drawer, tab, and more
• Overlays — toast, snackbar, tooltip, popover, confirm dialog, action sheet, loading, coachmark
• Reactions — press, appear, attention, scroll, gesture, value change, haptic

Durations snap to instant, fast, normal, slow, and slower tokens, and every preset records how it behaves for users who turn on reduced motion. You can also create your own presets and use them across the project.

Triggers and conditions

Motion only means something together with what triggers it. ScreenPath supports 34 triggers, including press, double press, long press, drag, swipe, pinch, rotate, hover, scroll, screen enter, timer, value change, submit, and variable match.

With variables (text, number, boolean, or enum) you can react differently by condition — for example, show a badge only when the cart count is above zero — and paths that lead to different screens per selector value show up on the map as dashed lines.

Check it in the player

The player shows your screens like a real app and moves exactly as the triggers and motion you set. Lists, cards, and images without real content yet are filled with sample content, so you review the flow on app-like screens instead of grey boxes. You can also pair a phone and continue playback on a real device.

Hand off the same values

The biggest reason to set motion inside the design tool is handoff. The "State and motion spec" section of the Markdown spec lists transitions and in-screen reactions with their trigger, preset, duration, and easing, next to the matching approach for web, React Native, SwiftUI, and Flutter. Claude or a developer follows that table instead of guessing from a video.

If you need it in Figma, the ScreenPath Figma plugin exports prototype links and transitions too. A few interactions Figma cannot reproduce, such as pinch and rotate, become the closest equivalent.

Summary

• App-flow-level motion (transitions, overlays, reactions) can be set and checked inside the design tool.
• Triggers, variables, and conditions live in the same project, so playback doubles as a spec review.
• The values you set travel all the way to code through the Markdown spec and MCP.