Preview & Collaborate

Comments

Click on the comment tab in the top bar. Here you can add your own comments and view comments made by collaborators.

To add a comment:

  • In the comments tab, click on the area you want to add a comment.
  • Write the comment and submit it.
  • You can also reply to, archive and edit comments.

Exports

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.

Preview

You can access the preview set up menu when you click on the Preview tab. The preview set up menu contains options that give you a greater level of control over how your preview plays:

You can decide to highlight the links on each screen if you want to give users a hint as to where they should click. Or just turn it off if you want to test the usability of your design.

You can choose to Show mobile frame or not. You can also align the design to one side or the other and change the background colour.

It is simple to restart the preview at any stage by clicking on Restart Preview.

Test your design via any mobile device by scanning the QR code or signing into your Fluid account in the app.

Some things to remember

  • 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.
  • You can sign into your Fluid Account on the mobile app to access all your designs.
  • Highlight links is set to hidden by default. Toggle on/off as you require.
  • Restart preview - return to the start page of your preview
  • Scale - Choose best fit to fit the preview to your screen or 1:1 to view the preview in it’s real size.

When you are finished previewing, click the Edit tab to return to Editing Mode and get back to your design.

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

Share

To invite people to review and comment on your project go to the share tab in Preview mode.

Here you can:

  • Change permissions for the reviewers- choose to allow them to add comments or join the calls and chat.
  • Invite reviewers with a link
  • Invite reviewers by email

Present

Use the Present tab to chat with reviewers. You can start a video call by clicking the video call button.

You will be able to annotate the screens using the quick bar. To move on to the next screen, click the screen.

To make text comments type in the comment section where all users will be able to take part in the discussion.

Real Time Collaboration

With Fluid UI you can collaborate in real time with your teammates. There are a few simple steps to set this up.

First, you need to assemble your team:

Type in the email of the colleague that you wish to add to your team and click 'Add to Team'.

You can also remove teammates by clicking the Remove which becomes visible when you hover over their name.

Once you have assembled your team, you need to invite individual members of the team to collaborate on your project. All team members do not automatically get access to your projects; they need to be invited. You can do this via the Share Menu, by clicking the toggle.

They will then be able to collaborate with you and anyone else you have invited in real time. You will be able to see your teammates as they are making changes, and your teammates will be able to see any changes that you are making. All in real time.

If you want to remove them later, you can also do this via the same menu. Just toggle them off again.

When you are in edit mode, you can see all of the avatars of your team along the Top bar. The colour of dot under each avatar will help you to identify who is working on a page at any given moment. The same dot will appear on the page.

With the Team Plan you can have a maximum of 5 on the team. You do not have to have the same 5 at all times.

Note: If you have a bigger team, contact us and we can put a customised plan together for you.

Testing on mobile app

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

  1. Download the iOS and Android player apps
  2. Open up the app from the Fluid UI icon on your phone’s homescreen.
  3. Sign in with your Fluid UI log in details and you will be able to view all of your active projects.
  4. You can also scan any QR codes which you are sent by other Fluid users. To open the project, scan the QR code which you can find in the preview set up menu.
  5. 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.
  6. You can click through the app using the gesture you chose, for example tap or swipe.

Tip: To see the menu in the mobile preview open recent apps screen or exit and re-enter the app. From here you can refresh the preview, scan a new QR code, and view your project list.