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
Tap, etc., depending on the type of flow you are creating.
Flowis intended to be used for high-level user flows, whereas
Tapis intended to be used with wireframes or actual screen designs all on the same artboard.
Leftcomponents can be either
Downcomponents will have Secondary Modifiers as
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:
Flow / Right / Straight
Flow / Right / Curve / Down / Straight
Flow / Right / Curve / Down / U-turn
Flow / Right / Curve / Down / Hook
Flow / Right / Curve / Up / Straight
Flow / Right / Curve / Up / U-turn
Flow / Right / Curve / Up / Hook
Flow / Right / Snake / Down / Straight
Flow / Right / Snake / Down / Hook
Flow / Right / Snake / Up / Straight
Flow / Right / Snake / Up / Hook
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
Long Press, and
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
swipes, and more.
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 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
There are also
Device blocks for
There are multiple label styles including
outline versions of
green. Labels are intended for use with Flow or Tap lines to provide more context about a specific user path.
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.