The complete guide to Fluid UI - Page 1

Find the export options in the home menu. Options you can use include:

  • A HTML interactive mockup can be downloaded and viewed offline. (This HTML is not suitable for use in app development).

  • A screenflow SVG image will show you an overview of your entire project including all the links between pages.

  • All of your project screens can be downloaded as PNG images.

  • Print lets you print all of your screens.

The complete guide to Fluid UI - Page 1

The most obvious change you will notice when you sign in is the new mode menu which gives you three options: Edit, Comment and Preview.

Comments

The comments mode is the single most important and exciting part of this release. All of those conversations with users, stakeholders, developers can now be done in real time in the Fluid editor.
Comments You will be able to comment and reply to comments directly in the editor. You can also do this in real time so there are no costly time delays when important decisions need to be made.

Test your prototype on Mobile Devices via the Fluid App (iOS and Android)

Previewing designs on your mobile or tablet is great for testing with users and showcasing your design to clients and stakeholders.

Fluid UI Mockup

  • Download the iOS and Android player apps

  • Open up the app from the Fluid UI icon on your phone’s homescreen.

Fluid UI Sign In Page

  • Sign in with your Fluid UI log in details and you will be able to view all of your active projects.

  • You will still be able to scan any QR codes which you are sent by other Fluid users. You simply scan the QR code which you will find in the preview settings menu (the preview settings menu appears once you are in preview mode after clicking the green preview button.)

Fluid UI App Menu

  • Once you have opened you project on the Fluid UI app or scanned the QR code the Fluid UI player app will start to load the prototype.

  • You can click through the app using the gesture you chose, for example tap or swipe.

Tip: Click on the small QR code button to expand the actual QR code for scanning.

The complete guide to Fluid UI - Page 1

When you are ready to preview your app in the browser, click on the green play button and the preview will start.

Preview settings menu

You can access the preview settings menu when you click on the green play button. The preview settings menu contains options that give you a greater level of control over how your preview plays:

  • Make sure you have selected your app's starting page from the page settings so that your app runs as you would expect it to.

  • Download the iOS and Android player apps.

  • Use the player app to scan the QR code and test on your mobile or tablet.

  • Show notes (is set to hidden by default) Use notes to explain what each page does. Turn off notes to give a more realistic app preview.

  • Show links (is set to hidden by default)

  • Restart - return to the start page of your preview

  • Best fit - Chose best fit to fit the preview to your screen or chose your own size.

  • Fullscreen - Fits the preview to the maximum available space, use the slider to adjust the size of the preview screen manually.

When you are finished previewing, click the stop icon to return from Preview Mode to Editing Mode and get back to you design.

Tip: Use your keyboard’s arrow keys to navigate through the pages of a prototype in preview.