flowkit icon

Names

Each directional asset uses the following naming convention. It begins with the point of origin and ends with the destination.

Type / Direction 1 / Modifier 1 / Direction 2 / Modifier 2

  • Type can be either Flow or Tap, etc., depending on the type of flow you are creating. Flow is intended to be used for high-level user flows, whereas Tap is intended to be used with wireframes or actual screen designs all on the same artboard.
  • Direction 1 determines the initial direction of the path. This can be Right, Left, Up, or Down
  • Modifier 1 comes immediately after the Primary Direction. This can be Straight, Curve, or Snake.
  • Direction 2 comes immediately after the Initial Modifier. Right and Left components can be either Up, or Down, whereas Up and Down components will have Secondary Modifiers as Left, or Right.
  • Modifier 2 is the final section of the Flow component and determines the direction of the arrow. This can be Straight, U-turn, or Hook.

Flows

These are the primary components in the system. There are 11 options (listed below) for each direction. All Flow components can be scaled without skewing or stretching. Each Flow component also contains nested endpoints that can be hidden or overridden with different end points.

There are 11 variants in total for each direction. For example:

  1. Flow / Right / Straight
  2. Flow / Right / Curve / Down / Straight
  3. Flow / Right / Curve / Down / U-turn
  4. Flow / Right / Curve / Down / Hook
  5. Flow / Right / Curve / Up / Straight
  6. Flow / Right / Curve / Up / U-turn
  7. Flow / Right / Curve / Up / Hook
  8. Flow / Right / Snake / Down / Straight
  9. Flow / Right / Snake / Down / Hook
  10. Flow / Right / Snake / Up / Straight
  11. Flow / Right / Snake / Up / Hook

Taps

Taps are intended for use on top of UI screen designs when laying out flow documents. They follow the same naming pattern as Flow components. Each endpoint has been pre-overridden with the Tap endpoint and can additionally be changed to other interactions, such as Swipe, Long Press, and Double Tap.

End Points

In Flowkit 2.0 every single End Point is the same dimension and can be interchanged with any other end point instance for full customization. These include circles, arrows, taps, swipes, and more.

Splits

There are 4 directional Split components for indicating a fork in a user flow. These are created with nested Flow components, but can also be extended or modified for more complex flows.

Blocks

Blocks are used as main sections of user flows. Just like every other component, they're built on a 360x360 grid. There are multiple Block options such as Default, Dashed , Emphasis, and Solid.

There are also Device blocks for iOS,Android, and Browser.

Labels

There are multiple label styles including solid and outline versions of default, red, blue, and green. Labels are intended for use with Flow or Tap lines to provide more context about a specific user path.

Annotations

There are two types of annotation components. The general Annotation Labels can be used anywhere within your flow to provide more situational context, whereas the Annotation Points are intended to callout specific areas of your screen designs.