How it works

Step 1

Get Started

Bring in your designs

Overflow seamlessly integrates with Adobe XD and Photoshop, Sketch, and Figma to simplify the process.

Upload images

Use screenshots of existing apps or websites or any other image to build your user flow.

A single image being dragged away from a stack of images and screenshots.
Ideate using shapes

Use simple shapes and arrows to visualize complexity during the early ideation stage.

A decision tree starting from a diamond shape with two possible outcomes, depending on the user's sign in status.

Step 2

Design

Rearrange your screens and connect them together to create user flow diagrams.

Layers

Layers are transferred over and can be used to apply connectors when you sync from your design tool.

Hotspots

Add your own hotspots to imported screenshots or images to apply connectors.

Styles & Annotation

Style and annotate your diagram to maintain brand consistency across your presentation.

Device Skins

Apply device skins with just one click. Overflow automatically detects the appropriate device based on screen size.

Step 3

Present

Show your user flow diagrams in an engaging, interactive way.

Presentation Mode

Click on screens and connectors to take your audience through your user journey.

Zooming

Zoom out to see the bigger picture or go back in to focus on specific details.

Keyboard Shortcuts

Take advantage of keyboard shortcuts or mouse gestures to present more effectively.

Prototype Mode

Switch to prototype mode to present using the auto-generated rapid prototype.

Step 6

Iterate

Re-sync your designs

Take feedback into consideration, make the necessary changes in your designs and sync again. All screens get updated and connectors are left intact.

Update share link with changes

Keep the same share link updated throughout the whole process, so that you have a single source of truth amongst team and stakeholders.

Take design communication to the next level