Overview
1. Flow Shapes & Connectors Demo
2. Flow Diagrams
3. Flow Widgets
4. Creating Flow Diagrams
5. Reference Pages
1. Flow Shapes & Connectors Demo
Please turn on speakers for audio
To view on Vimeo, please click here.
2. Flow Diagrams
A flow diagram can be used to show a variety of processes including use cases, business processes, and page flows. They are frequently used in Axure RP to provide a higher level view of the tasks that can be accomplished through the pages in the design.
Flows are managed with pages in the Sitemap. To designate a page as a flow diagram, right-click on the page in the sitemap and select Diagram Type->Flow. This will change the icon in the sitemap in Axure RP as well as the prototype. It is not mandatory to designate a page as a flow diagram to create a flow diagram.
3. Flow Widgets
The flow widgets can be found in the Widgets pane by clicking on Flow in the Widgets pane toolbar.
A variety of shapes are available in the widgets pane to represent steps in a process. Shapes that are not available can be incorporated as images using the Image widget.
Some conventions exist for what each shape represents in a flow diagram, but Axure RP does not restrict the use of the shapes. In general, it is best to use them in a way that your audience will understand.
4. Creating Flow Diagrams
Similar to the wireframe widgets, flow widgets can be dragged and dropped from the Widgets pane to the Wireframe pane. Their styles and properties can be edited using the toolbar and context menu. The shape of a Flow Shape widget can be changed by right clicking and using the "Edit Flow Shape" submenu.
Connectors
Flow widgets are different from wireframe widgets in that they have connection points where connectors can be attached.
To add a connector, first change the Wireframe pane to Connector Mode. This can be done by clicking on the Connector Mode button (F11) in the toolbar. Clicking the Pointer Mode button (F9) will switch the Wireframe pane back to Pointer Mode.
Once in Connector Mode, click and drag on the wireframe pane to draw and add a connector.
To connect two flow widgets, mouse over a connection point on a flow widget, click and drag, and mouse up on a connection point on the target flow widget. Connectors can also be attached to flow widgets by clicking and dragging connector endpoints to connection points on flow widgets.
Line ends like arrows as well as line patterns like dashes can be applied to connectors by selecting a connector and using the Line Pattern and Line Ends buttons in the toolbar.
5. Reference Pages
Flow widgets can be assigned a Reference Page. If a flow widget has a Reference Page, the text on the widget will reflect the name of the page. Also, in the prototype, the flow widget will automatically have a link to the page.
Dragging and dropping a page from the Sitemap to the Wireframe pane will create a flow widget that has that page as its Reference Page.
The Reference Page on a flow widget can be edited or cleared by right-clicking on the widget and selecting Edit Flow Shape->Edit Reference Page.