Boost Your Design Workflow: Top Wondershare Mockitt Tips and Shortcuts

How to Build Interactive Mobile App Prototypes with Wondershare Mockitt

1. Set up your project

1. Create a new project → choose mobile device preset (iOS/Android screen size).
2. Name the project and invite collaborators if needed.

2. Plan screens and structure

1. Sketch main flows: onboarding, home, details, settings.
2. Create an artboard for each screen (use device templates).

3. Add UI elements and components

1. Use built-in widgets (buttons, inputs, lists) from the library.
2. Drag reusable components into the canvas and convert frequently used groups into components.
3. Use styles (colors, text) to keep consistency.

4. Import assets & design faster

1. Import images/SVGs or paste from Sketch/Figma.
2. Use templates and component libraries to speed up layout.

5. Create interactions

1. Select an element → Add link/interaction.
2. Choose trigger (Tap, Long Press, Swipe, Drag) and target screen.
3. Set transition type (Slide, Fade, Push) and duration.
4. Add conditional logic or variable-driven navigation where needed (for simple states like logged-in vs logged-out).

6. Add micro‑interactions and animations

1. Use built-in animation presets for buttons, overlays, and page transitions.
2. For complex motion, use timeline/animation panel to animate position, opacity, scale, and easing.

7. Build scrolling, fixed headers, and gestures

1. Convert groups to scrollable areas (vertical/horizontal).
2. Mark headers or nav bars as fixed to remain visible during scroll.
3. Configure swipe gestures for carousel or back navigation.

8. Prototype data & forms

1. Use repeaters/lists for dynamic-looking content (feed items).
2. Create simple input fields and link submit buttons to validation/result screens.
3. Use variables to simulate user input and state across screens.