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.

Real Time Collaboration

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

First, you need to assemble your team:

add a teammate

Just 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 simply clicking the thrash icon which becomes visible when you hover over their name.

remove a teammate

Once you have assembled your team, you can share your project with them. 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.

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:

Simply type in the name of your teammate and chose Collaborate from the dropdown.

If you want to remove them later, you can also do this via the same menu. Click on the thrash icon beside their name to remove them from having access to the project.

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_5 Plan you can have a maximum of 5 on the team. You do not have to have the same 5 at all times.

With the Team_10 you can have a maximum of 10 on the team.

Note

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

Live Preview

Sharing your preview with colleagues, stakeholders, users and investors is now easier than ever with Fluid UI.

We will show you how to achieve this in a few easy steps.

To share a live preview you simply open your project and in the top right corner you will see a tab marked ‘Live’. Just click on this tab to open Live presentation.

When you click on Live you will be taken into the Live Preview. You will be able to annotate the screens using the quick bar in the top left corner. To move on to the next screen you simply click the screen.

Once in Live Preview you will be able to click through the prototype. Simply click on the screen to move through the flow.

You can also invite others to the Live Preview by clicking on the Live Preview URL:

When your audience clicks on the URL they will be asked to join the presentation after entering a user name and email. Your audience do not need to have Fluid accounts to view and take part in the presentation but this allows you to identify them when they are making contributions:

When the user enters their details they will be visible in the top of the preview and will be able to view all of the interactions and to chat with you and others.

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

Team accounts

With Fluid Teams it’s easier than ever to share projects and get feedback from your team members.

  • You can add up to 4 team collaborators.
  • They will get an email requesting that they sign up/in and will have full access to all of the premium features of Fluid UI.
  • You can manage your team and add and delete members as your team changes.
  • Fluid Teams is great for companies that want team licences and have more then one person working on a design project.
  • One person can buy the team licence and then invite their colleagues to work on projects together.

Real Time Collaboration

In Fluid UI you are able to edit projects with your colleagues in real time.

You start by creating your team.

Add team members

Simply add your colleagues email and then add them to the team.

Adding team members in Fluid UI

You can add up to 5 team collaborators (this can be extended for larger teams).

Fluid Teams is great for companies that want team licences and have more then one person working on a design project.

One person can buy the team licence and then invite their colleagues to work on projects together.

We are currently working on finalising the live collaboration feature so your team can work simultaneously on a project. You will need to send the project to each team member. They can then edit it and send back to you.

Share an entire project

sharing projects with collaborators in Fluid UI

  • Quickly share projects for preview using the new sharing menu. The next time your teammates access their project list, the project will be there for them (if they don’t have an account yet, they will be invited to sign up too).
  • Manage who has access to your projects.
  • Share a URL to the project preview with anyone. They won’t need to log in to preview it.
  • Sharing previews is available to all account types.

  • Click ‘Open’ in the home menu to manage your own shared projects, use the drop down menu to sort through, open, archived and shared projects.

Copy or clone entire projects

copying or cloning projects in Fluid UI

If you need to test out another direction with your app but don’t want to have to redo all of your work just clone the whole project and keep the old version while you work on the new.

This is great for when you want to send a version to a client or colleague but need to keep working on it in the mean time.

Next: Find out how all about validating your concept with users.