Fluid UI modes, contexts and menus

The terms we use in Fluid UI to reference the different menus, modes and contexts in the editor.

Modes

Editing: Where you edit your project. The project canvas and screenflow is visible and pages can be clicked on.

Previewing: Where your project can be previewed. Accessed by clicking the preview button or loading a project in preview mode. The prototype can be clicked through as an actual app complete with gestures and transitions.

Contexts

Project context: When the project is fully zoomed out and the library is hidden. All your pages and links can be seen in this view.

Page context: When the page is focused but no widget is selected. You can click on any widget to select it and move to widget context and the page menu and library are visible allowing you to add more widgets to the active page..

Widget context: When a widget is selected. The widget menu is visible.

Widget context: When a text widget is being edited. Double click on text to enter this mode.

  • The home menu is always visible in the top right corner of the editor. From it you can create, clone and access existing projects, access the current project’s history and settings and view your account details.
  • The library is visible on the left side of the screen when in page or widget context. It contains all the widgets you can use, plus your uploaded images and saved patterns.
  • The full screen menus overlay on your project and give you access to your project settings, account settings etc.

Other parts of the editor

The canvas is the background in which you create and position your pages. A Fluid UI projects starts off with a blank canvas. When zoomed in to page or widget context, clicking on the canvas will zoom you back out to the project context. By creating pages and linking them together, you create a storyboard for your design.

The active page is the page currently selected when in page context. It is surrounded by the page frame. Only one page can be active at a time - when clicking on widgets in the library, they are added to this page.

The page frame is the grey area around the active page which contains the page menu. Clicking on the page frame will bring you to the page context. You can also start a drag select from the page frame to select multiple widgets, which will bring you to the widget context.

Trash is the bin in the bottom right corner of the editor.