Skip to main content

Design

Guideline

How to use legion in design project

banner-Guideline

Flow is a type of deliverables it has a purpose to visualize the way the user interacts with the interface in a glanceable way. They are hybrid between traditional flow charts with some visual interfaces included in them. To create flow, we used some annotation for help all team more easy to read and understand the flow. Some of the annotation includes.

  1. Page Information State : Name and summary about state or screen.
  2. Technical Consideration : Detail interaction and technical consideration in state or screen.
  3. Page Negative State : Information detail about negative case of state or screen.
  4. Solid Arrow : Line that navigate between interaction in call to action or components to other screens so that it becomes flow.
  5. Diamond & confirmation : The diamond is decision node of interaction and the confirmation is option of determines user flow.

Usage Annotation

In making a flow you are advised to use annotations or pluggin recommendations that can help you in making a clearer screen flow for all product teams, for more details please follow the steps below.

usage annotation

1. Turn on Helper Component Kit

After you have several screens that have not been connected, then please open team library modals from tab assets, serach the Helper Component Kit from Legion Design Library, then switch the toogle to turn on the library.


guideline usage annotation

2. Start usage annotation

After activating the helper component library, please select the flow start screen and add information about the screen by dragging the Flow / Annotation component, then from the flow initial screen select the cta associated with the next screen and connect using the Flow / Arrow component or Autoflow pluggin.


guideline usage annotation

3. Completed your screen flow

When several screens have been connected, please complete also with possibilities such as branching flow where you can use the Flow / Diamond and Flow / Confirmation components, then for detailed error state information using the variant Annotation / Negative State component and for interaction or technical details using the variant Annotation / Technical.

Pluggin Recomendation

Here are some pluggins that we recommend you use to simplify your workflow, task, in craft the screen flow, information archithecture, wireframe, etc.

  • Autoflow : Create a arrow flow between 2 objects / screen with this simple selected only
  • Visual Sitemap : Easy-to-use text editor to design custom tree diagrams and sitemaps
  • Grayscale : Convert your designs to grayscale to get more targeted feedback during user testing