Products

Flow Patterns for Sketch & Figma

There’s one thing you need to do before you design and develop your app. You need to create a flow map. A flow map maps how each screen of your app interacts with each other so that you can identify different states and any missing screens easier. It also provides you with a holistic view so you can plan and structure content with your team.

The best tool to creating effective flow maps is Flow Patterns. What makes Flow Patterns so effective is that they display each app screen visually from a high-level view. Instead of showing people generic boxes, they get a small glimpse into the context of each screen. Revealing the context allows you to tell a better story and show how the entire app will feel as it comes together.

72 Screens in 5 Categories

  • Ecommerce apps (10 screens)
  • SAAS apps (14 screens)
  • Corporate apps (17 screens)
  • Multimedia apps (12 screens)
  • Social media + Dashboard apps (19 screens)

Not only that, but they include microinteractions that help you plan out any specific features a screen could have. Just mapping screens is too static and isn’t consistent with the dynamic app you’ll ultimately build. By mapping the microinteractions, you’ll be able to illustrate the dynamic nature of your app clearly.

78 Microinteractions in 7 Categories

  • Navigation
  • Modals
  • States
  • Widgets
  • Buttons
  • Fields
  • Data

Flow Patterns is now available for Sketch and Figma (preview all elements). They’re currently the top interface design tools used in the industry. Get Flow Patterns and start creating contextual and dynamic flow maps.

Get flow patterns


Toolkits

Affiliates

elegant wordpress themes

Article written by anthony

Author and founder of UX Movement. Creating a more humane world for users by teaching others how to practice UX the right way through principled design techniques.

This Post Has 2 Comments

  1. Joe Reply

    Is there a preview of what you get in the file?

Leave a Reply

Your email address will not be published. Required fields are marked *