The Basics

1. Create your first project

Your first project will be created automatically when you sign up.

Each project starts with a blank canvas from which your idea can grow. You can start designing the second you are signed in.

You can create additional projects by clicking “New project” in the home menu.

2. Add pages to your project

Adding a page to your Fluid UI project

To create a page:

  • Double click anywhere on the canvas
  • Click add page icon
  • Create a link and drop it on “+ NEW”.

See more aboutadding, cloning and deleting pages and changing their settings in the page menu.

3. Add widgets to your pages

Add any number of widgetsfrom your library and edit widget properties to create the look and feel you need for your project.

The final design step is tolink your widgets to your pages to create an interactive, playable storyboard for your prototype.

Once a link is created, you can set the gestures and transitions assigned to them and delete them. You can also set the default gestures and transitions for your project in the project settings.

5. Preview your project

Once you’ve added a few pages, widgets and links, test out your app in the browser by clicking on the Preview button.

Download the Android or iOS player apps to test the app live on your device.

Continue editing until you have your first version of your prototype, then…

6. Validate and get feedback on your concept

An idea without feedback is like a tree without roots. Getting feedback on your prototype is the next step and must come from two sources - your project stakeholders and your users. Get their feedback, then iterate in an agile fashion until you have your final solution.

Projects

Creating projects in Fluid UI

Your first project will be created and already open when you sign up.

To create a second or further project:

  • Go to the home menu and select “New project”.
  • Choose the device type and orientation for the project (if applicable).

Saving projects

Fluid UI automatically saves your work both locally and online every few minutes as well as every time you click the preview button - there is no need to specifically save or manage projects.

The only way your data will be deleted is if you ask us to delete it. We store data for inactive accounts for up to a year. After a year of an account being inactive you will receive an email warning you that your account is going to be deleted. If the account is active it will not be deleted ever.

Changing project name

To change a project name,

  • Go to the project list and click on the name to highlight it. Type in a new name and press Enter.

Copying projects in Fluid UI

Copy a project by:

  • Clicking on ‘Make a copy’ in Home Menu
  • Clicking on ‘Clone’ in the Projects menu

You can then change the name of the copied project. The original and copied projects are now in your active projects. The copy will automatically open and your original can be accessed by clicking ‘My projects…’ in Home menu.

Archiving projects in Fluid UI

How to archive a project

You can archive a project by:

  • Clicking Archive Icon in ‘Active Projects’
  • Clicking ‘Archive’ in Project Settings

Why archive projects?

  • Archive projects so you can start new ones if you don’t have a pro account or if you’ve reached your project limit.
  • Keep your projects safe and make sure you don’t delete them or overwrite them.

You can then manage your archived projects, delete or restore them in the future.

How to access archived projects

Go to Active projects and then use the filter in the search bar to find all of your archived projects.

Deleting Projects in Fluid UI

A project needs to be archived before it can be deleted. Follow the steps above to archive the project. Go to ‘Archived projects’ and click the bin to delete the project permanently.

Restoring projects in Fluid UI

  • Any version of a project can be restored though the ‘History’ section of the project menu. Older versions are stored for up to 2 weeks for all premium accounts, and for a limited period for free accounts.
  • Archived projects can be restored by going to the archived projects folder and clicking the restore button on the left.
  • You can also clone a whole project to make a backup. Sharing this version with a client will allow you to take feedback while continuing to work on the existing project.

Project Menu

Click on the home icon to access project options and settings.

From here you can:

  • Create new projects
  • Open and manage existing ones
  • Copy or clone projects
  • Manage your project’s settings
  • Share your project
  • Print and export your project

Project settings

Use project settings to:

  • Clone or copy projects
  • Upload your own icon and splash screen
  • Access version history and restore previous versions
  • Archive the project
  • Change device resolution and device orientation
  • Change the transitions and gesture default settings

Change your project’s device resolution

  • All of the common phone resolutions are listed, as well as several desktop/browser resolutions.
  • There is also a custom display size option. You can add in your own height and width here.
  • Selecting the correct resolution for the device you will be testing on will dramatically improve the quality and speed of the prototype.
  • You can also choose the orientation for the app you are designing.

Change your project’s default gestures and transitions

Set the transition and gesture you want to have in your app. This will mean that each new link you create will automatically be set to the default transition and gesture you have chosen.

  • Some example gestures are tap, double tap and swipe.
  • Some examples of transitions are flip, slide, pop and fade.

You can also change the gestures and transitions for individual links.

Setting your splash screen and app icons in Fluid UI

You’ll find the options for uploading your own splash screen and icon in the project settings menu.

Projects List

  • To access your project list, simply click into the home menu and then select ‘My projects…’
  • View all of your projects via clear thumbnails.
  • See when your projects were last revised.
  • Each thumbnail will contain an overview of your project screenflow.
  • Search through your active, archived and shared projects and sort your projects by name, last update and creation date using the search bar filters.

Pages

Creating pages

There are 3 ways to create a page with Fluid UI:

  • Double click anywhere on the canvas when zoomed out to create a page at that location.
  • Use the add page icon when zoomed out.
  • Create a link from one of your widgets and drop it on “New +”.

Once created, pages can be moved around the canvas to create a storyboard for your prototype.

Cloning pages

You can clone a page by clicking the sheep in the top bar.

Deleting a page

You can delete a page by:

  • focusing on it and clicking delete in the page menu
  • dragging it to the bin icon, when zoomed out.

Adding a title for your page

  • Add a page title for every page
  • These titles will show in edit mode
  • Handy for letting reviewers know exactly which page you’re talking about and getting good feedback.

Adding comments to a page

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.

Setting the start screen

You can set any page in your prototype to the start page by focusing on that page and clicking the “Start page” switch in the page settings menu. Only one page can be the start page.

You can also click the preview button on any screen to preview starting with that particular page so you don’t need to navigate from the start page each time (this option is available once the page has widgets on it).

Changing screen orientation and resolution in Fluid UI

Choose your default screen orientation and resolution when you are creating a new project. You can also choose a custom size if your size is not in the presets.

Use project settings which is in the home menu to change the device orientation as well as the default gestures and transitions for your project.

Find out more about project settings

Scrolling

Increasing the page width or height in the page menu will automatically cause any pages to scroll (horizontally, vertically or both) when you preview.

Pinned widgets are frequently used with scrolling pages to make some content static while other content scrolls.

The Top Bar

The top bar which is found at the top of the editor contains a number of features.

  • Add Page
  • Clone Page
  • Page Settings
  • Zoom

The difference between screens and pages

When we talk about screens in Fluid UI we are talking about the device screen you are designing for. You can read all about choosing the right screen resolution for your app design here.

You can choose which device screen resolution you are designing for when you create a new project and by choosing project settings in the home menu.

A page in your project corresponds to a page in the app you are designing. You can change the page’s height, width, orientation and set it as the starting page for when you’re previewing your app prototype.

Linking

Select any widget or hotspot and use the blue ‘link’ icon on the right hand side of the widget menu. The screen will zoom out to your entire project. Click again to drop the link on the page you want to link to.

You can drop the link onto another page, or on the buttons that appear on the side of the canvas.

These include:

  • New - creates a new page and links to it
  • Clone - clones the current page and links to it
  • Start page - links to the first page of the project or whatever page you set as the start page
  • Previous page - Links to the previous page, handy for making back buttons
  • URL - Links to a URL outside of your project

Gestures and transitions

Once a link is created, you can click on the widget it is linked from and the link settings menu will appear in the tool bar. You can access the links gestures and transitions from here or alternatively, hover over a link and a circle with an arrow will pop up. If you click on this you will be given gesture and transition options as well.

Delete a link by clicking on the widget it is linked to. You’ll find a trash bin in the link settings which can be used to delete the link.

  • If you started linking by accident, just drop that link anywhere on the canvas, the editor will automatically refocus on your original page and delete the link.
  • Clicking on a link when zoomed in will bring you to the link’s source or destination depending on which direction the link is pointing towards.
  • The default gesture and transition can be set in project settings.
  • When previewing, links will work as an interactive prototype, allowing you to click through your mockup.

Widgets

The library has 3 tabs:

1. Pre-built widgets

The widget libraries include dedicated libraries for iOS, Android, Windows, wearables and website wireframing.

By default the ‘wireframe’ library is selected, this is a good option if you don’t want to worry about the exact device you are prototyping for, but just want to get a good overall feel for how your app’s UI will flow.

To access the libraries, click on any page and the library will open on the left of the editor. Select your chosen library from the widget library drop-down menu and start designing.

Tip: You can close the widget library if you’re not using it to give yourself a bit more space.

2. Uploaded widgets

Upload your own images from Photoshop or the web and make high fidelity prototypes.

You can either drag and drop the images into the editor window, or use the ‘Select image’ button in the uploads section to search your computer’s hard drive for an image.

You should always make sure your images are ‘saved for web’ using a program like Photoshop or one of the free online image editors.

When you keep your image files as small as possible the editor will load quicker and previewing will be much quicker.

Edit and resize the images like any other widget.

Tip: You need to have a paid (solo) account in order to upload your own images.

3. Symbols

Symbols will speed up your design process for every project.

Reusable designs are stored in your symbol library.

Save whole screens and use them in other projects.

Save your customised widgets and cards ready for quick access when you need to mock up a similar project.

To delete a symbol, drag it to the red trash bin in the bottom right of the screen.

Tip: You can access all of your saved symbols from any project.

Adding widgets to the page

There are two ways to add widgets to you page:

1. A single click

A single click on a widget will add it to the selected page. The widget will automatically be placed on an area of the page that the editor predicts it belongs.

For example: A header item will go in the header section of the page. You can move it by dragging and dropping it somewhere else.

2. Drag and drop

Dragging a widget from the library and dropping it on any page (selected or not) will add that widget to the page at the location it is dropped.

The Smart Menu

The smart menu allows you to use shapes and symbols very quickly when designing. To use it click on a shape and click and drag on the page to create a new widget.

Use the smart menu to:

  • Add a variety of shapes
  • Upload images
  • Add hotspots
  • Add text

Quick search the libraries

Use the library search function to find widgets by type. For example type ‘list’ into the search bar to bring up all of the list widgets in that library.

Selecting widgets

  • Click on widgets to select them.
  • Select components of widgets and edit them, such as text or boxes inside a menu widget.
  • Widgets can be grouped to move/copy/paste/align them together.

Selecting multiple widgets: Start dragging on the page frame (the dark grey area around the selected page) or on an area that does not already contain a widget other than the background.

All widgets that are contained in the blue box after dragging will be selected.

Creating groups

Use the group icon to create a group, and when a group is selected, you can ungroup them with the ungroup icon.

Keyboard shortcuts

  • Ctrl + A (Cmd + A) will select all the widgets on the focused page.
  • Holding down Ctrl (Cmd) while clicking on a widget will add or remove that widget from your selection.
  • Cut - control + X
  • Copy - control + C
  • Paste - control + V
  • Delete - control + delete
  • Clone/duplicate - control + D

Tip: Groups will be clearly indicated by a border when selected. In order to edit widgets in a group, they must be ungrouped first.

##

Using invisible hotspots

Hotspots are widgets that are visible on your page when creating your prototype, but don’t show in preview mode (unless you choose to show them in preview settings).

They let you link a particular part of an image to another page without having to chop up the uploaded image.

To use a hotspot, add one from the library and select the link button to add a link from that widget.

Hotspots are useful if you want to link from more than one area on an image. If you want to link from the whole image you can do this too with a normal link.

##

Editing Widgets

Click on a widget to access the widget menu.

Move the menu around your screen by clicking and dragging the white area of the menu.

The widget menu will always be visible on screen when a widget is selected. When no widget is selected the widget menu will be hidden.

Depending on the type of widget selected there are different tabs at the top of the menu which open general settings, colour settings and text settings.

Grid view

Use the grid view in view settings to align widgets pixel by pixel. You can set the number of pixels in each square in the grid.

The snap to grid option will also help align widgets to the nearest pixel.

Use your keyboard’s arrow keys to align widgets by moving pixel by pixel.

Automatic alignment

Select two or more widgets and the vertical/horizontal align icons will appear in the widget menu.

There are 6 options in total:

  • Align Left - aligns the widgets/groups to the left.
  • Align Right - aligns the widgets/groups to the right.
  • Align Center - aligns the widgets/groups to the center.
  • Align Top - aligns the widgets/groups to the top of the selection.
  • Align Middle - aligns each widget to the middle of the selection.
  • Align Bottom - aligns the widgets/groups to the bottom of the selection.

Send to front/back

Select any widget or widget group and use the arrows to send them to front or back.

  • Send to Front - places the selected widget behind all others on the page.
  • Send to Back - places the selected widget in front of all others on the page.
  • Send Backwards - moves a widget behind the previous widget.
  • Send Forwards - moves a widget in front of the one above.

Resizing

Widgets can be resized by dragging from one of the 4 corners or the sides of the widgets.

All resizable widgets have a clear box/outline indicator.

Holding down shift will maintain the aspect ratio of a widget while resizing it.

To get the size of your widget pixel perfect you can use the resizing tool. simply chose the height and width that you desire.

Tip: Some larger widgets cannot be resized as they are fitted to the size of your page and the device type you are designing for.

Editing Text

Click on any text to edit it. If you want to increase the size of the box that the text is contained in, drag from any of the box’s corners.

The text edit submenu is found in the widget menu and will appear as soon as you click on a piece of text. The menu lets you change the:

  • Font type
  • Size of the text, Line height, Letter Spacing
  • Color and opacity of the text
  • Font Style (Bold, Italic, Underline)
  • Text Alignment (Left, Center, Right, Justify)
  • Add a shadow

Tip: Remember to drag the text box as you make the text bigger so it is aligned as you want it to be. If you don’t make the box bigger some of text may be hidden.

Backgrounds and borders

The background and border properties menu is used to set the non-text properties of a widget, including:

  • Background colour (flat or gradient)
  • Border colour (if the widget has no border, increase the border size and then you can give it a colour)
  • Background opacity
  • Border size and radius
  • The width and height of the widget (exact pixels)

Tip: Different widgets have different customisation options. For example, you can change the colour of some widgets but not others and some of the larger card widgets cannot be resized.

Pinning Widgets

The pin/unpin button is in the widget menu.

You may have created a scrolling page and you want to have a widget float over the page and stay in view while you scroll the page in preview mode. Use the pinned/unpinned option to control what moves with the page.

Any widget can be fixed on top of a long/scrolling page (‘pinned’) or allowed to move with the scrolled page (‘unpinned’).

Navigation

There are 3 different zoom contexts - project, page and widget

Different options become available at each context. Learn how to navigate the canvas to make your workflow even more efficient.

Project context:

The project will be zoomed out to the maximum and all the pages and links in your project will be visible. You can use this mode to move pages around your project and get an overview of your entire project.

How to zoom to project context

  • Click anywhere on the canvas.
  • Use your mouse wheel to zoom out.
  • Press the escape key on your keyboard.

Actions in project context

  • Drag pages to organise the layout of your prototype. The canvas will automatically re-centre to ensure your project is always in view.
  • Hover over links to access the link menu and update and delete links.
  • When creating a link, you will automatically zoom from widget to project level so you can drop links on any other screen in your project.

Page context:

The page will be centred and the page menu will be visible. Here, you can manage the width and height of your pages, make page notes, set the start page, orientation and more.

How to zoom into a page

  • Click on any page to zoom in and focus on that page.
  • The page that is currently in focused will have a grey border around it - this is known as the page frame.
  • Mouse wheel in over any page at project level to focus on that page.

Navigating between pages

  • Zoom out to the project level and click a new page to focus on that page.
  • Click a non active page at page level to focus on that page.
  • Click any link to follow that link to its destination page.
  • Use the arrow keys to navigate backwards and forwards between pages in preview mode.

Tip: If you focus on a non active page that is already on screen, the canvas won’t move. This helps when editing multiple pages that are lined up closely.

Actions at page context

  • Click between pages when zoomed in to change the focused page.
  • Click and drag the dark grey bar at the top of the page frame to move a focused page.
  • Click and drag the canvas when zoomed in to move it around. This may help access (otherwise inaccessible) parts of larger pages when designing on a smaller screen.

Widget context:

The widget menu will be visible and a widget or widgets will be selected. Use this level to change the look, feel, positioning and size of each widget.

  • Click on any widget to focus on that widget
  • When a widget is selected, the width and height resize handles will be visible.
  • Click on the page frame to deselect the widget and return to page context.
  • Change the zoom level in view setting to zoom in closer to small widgets or further out on larger widgets.

Timeline and Undo

Control-z (command-z on mac) will undo any action you take.

The timeline review in the bottom right corner (beside the bin) also has a full history of actions you’ve taken in the current session. You can use it to jump back to any previous state the project you’re working on.

Use version history to restore a different version of any project.

 

Keyboard Shortcuts:

In general:

  • ⌘ + key for mac or
  • Control + key for Windows or Linux.
P Switch to project preview
C Switch to comments mode
E Switch to project editing
L Open/close library
Escape Close a menu or zoom out to project context
⌘/CTR + + Zoom out
⌘/CTRL + - Zoom in
⌘/CTRL + 0 Zoom to 100%
General commands
⌘/CTRL + S Save
⌘/CTRL + Z Undo
⌘/CTRL + Y Redo (Also ⌘/CTRL + Shift + Z)
Selecting widgets
⌘/CTRL + A Select all widgets on the active page
⌘/CTRL + Mouse click Add/remove to selection
Delete/Backspace Delete selected widgets
Escape Deselect selected widgets
⌘/CTRL + C Copy
⌘/CTRL + X Cut
⌘/CTRL + V Paste
⌘/CTRL + D Duplicate
Moving and resizing widgets
← ↑ → ↓ Move widget
Shift + ← ↑ → ↓ Move widget 10x
⌘/CTRL + ← ↑ → ↓ Increase size in the selected direction
⌘/CTRL + Shift + ← ↑ → ↓ Reduce size in the selected direction
⌘/CTRL + Mouse resize Maintain aspect ratio when resizing a widget
Text editing
⌘/CTRL + I Make text italic
⌘/CTRL + B Make text bold
⌘/CTRL + U Underline text
⌘/CTRL + Enter Confirm text change
Escape Cancel text change

Account

Account Settings

The accounts settings will allow you to manage all aspects of your Fluid UI account.

It is divided into four sections:

  • Personal details
  • Teammates
  • Account type
  • Receipts and billing

Personal details

In this section you can do the following:

  • Set your name
  • Change your email/ password
  • Delete your account

You can also upload an avatar or change an existing one.

Teammates

In this section you can add/ remove teammates and managed all aspects of your team. (Only available with team account)

Receipts and billing

In this section you can manage your receipts and billing. Here you can:

  • See at a glance what your current account status is
  • Also see when you next payment is due
  • Cancel billing
  • Download all receipts for your account
  • Change your billing address and card details

Note: If you cancel billing all future billing will be cancelled but you will retain access to the premium features for the remainder of the current billing period.

Upgrading

There are 4 account types. When you upgrade you can choose to pay per month or annually.

Free Forever

Choose Free Forever if you need to prototype a quick idea for a project and share it with others or if you are just learning how to design. With Free forever you have:

  • 1 project, max 10 pages
  • 1 user license (you)
  • Unlimited reviewers

Solo

Choose Solo if you are exploring an idea for a future product. Solo includes all libraries, unlimited uploads, reviewing and on device testing with the player app. With Solo you have:

  • 5 active projects
  • 1 user license (you)
  • Unlimited reviewers

Pro

Choose Pro if you regularly make prototypes for sharing. Pro lets you export and print your projects, plus reviewers have the option of adding comments. With Pro you have:

  • 10 projects
  • 1 user license (you)
  • Unlimited reviewers
  • Export, print and comment

Team

Choose Team if you want to collaborate on projects together in real time. Team gives unlimited access to every feature for your entire team with just a single licence.

  • Unlimited projects
  • 5 users (including you)
  • Unlimited reviewers
  • Export, print and comment
  • Real time team collaboration

If you decide to upgrade to a different plan, for example from Solo to Pro please let us know via email or our in app chat so we can help arrange a refund for you.

Receipts

You can download your receipts from the receipts section of the ‘Account Settings’ menu. If you need to have regular receipts sent to yourself or your accounts team, you can also set this up from there.

Payment details on your statement

The charge on your credit card statement will be from ‘Fluid Software Ltd’.

Cancelling Billing

You’ll find cancel billing in the account settings inside the main menu. Billing will stop as soon as you pause your account.

  • If you chose to downgrade your account to free then you will not lose any of your work but you will be restricted to the features that are available in the Fluid UI free plan.
  • You can upgrade again at any time to use the premium features once more.
  • If you don’t plan on using Fluid UI in a given month, you can choose ‘Cancel Billing’ from the account settings menu.
  • We store your projects free of charge for up to a year. (We will send a warning email to sign back in after a year of inactivity before we delete any of your data).

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.

Project Menu

  • To access your project list, simply click into the home menu and then select my projects.

View all of your projects via clear thumbnails.

See when your projects were last revised.

Each thumbnail will contain an overview of your project screenflow.

Search through your active, archived and shared projects.

Sort your projects by name, last update and creation date.

Text Editing

The text editing menu allows you to control all aspects of the text style.

text editing menu

The standard features can be found in this menu:

  • Text colour
  • Font
  • Text type (Bold, Italics, Underlined)
  • Opacity
  • Allignment of text (right, left, centred, justified)

There are also advanced text editing features which allow you to enhance your design.

  • Text case settings (Uppercase, lowercase, capital case, none)
  • Text shadows
  • Customisable line height
  • Customisable letter spacing

To add shadow to your text you need to click the box beside Shadow and then chose the colour that you would like to use.

You can also move the shadow along the x/y axis simply by adjusting those specific settings.

You can then also add more or less blur by placing a value for blur.

Account Settings

The accounts settings will allow you to manage all aspects of your Fluid UI account.

It is divided into three sections:

  • Personal details
  • Teammates
  • Receipts and billing

Personal details

In this section you can do the following:

  • Set your name
  • Change your email/ password

You can also upload an avatar or change an existing one.

Teammates

In this section you can add/ remove teammates and managed all aspects of your team account.

Receipts and billing

In this section you can manage your receipts and billing.

  • You can see at a glance what your current account status is
  • You can also see when you next payment is due
  • You can cancel billing
  • You can download all receipts for your account

Note

If you cancel billing all future billing will be cancelled but you will retain access to the premium features for the remainder of the current billing period.

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.

The Top Bar

The top bar which is found at the top of the editor contains a number of features.

  • Add Page
  • Clone Page
  • Page Settings
  • Zoom

The page settings allows you to control all features related to the page you are working on.

  • Edit the page name
  • Set a page as the ‘start page’
  • Set the orientation of the page (portrait or landscape)
  • Set the width/ height of the page
  • Set the snapping feature to on/off
  • Set the grid to on/off
  • Navigate to project settings
  • Delete the current page

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.

Using hotspots and uploads to make pixel perfect prototypes

Article tbc.

Uploads library in Fluid UI

Project settings and the library uploads

The project settings allows you to control all areas of your project from setting the resolution of each screen to cloning projects to managing your projects.

You will locate the Project settings in the Home menu. Simply click on the Home menu and select Project settings.

Once you select project settings you will be taken to the Project settings dialogue screen. From this dialogue you will be able to control all settings as they relate to your project.

You will be able to perform simple edits, such as changing the name of the project:

You will be able to set and alter all of the settings related to your project:

Fluid UI API

Want to write apps that integrate the Fluid UI editor or previews? The Fluid UI API documentation will launch Q3 2016.

api methods that are essential for mobile app

1) login [POST]

  • creates session that will enable listing projects etc
  • post data {‘t’: ‘login’, email: ‘some@email.com’, ‘password1’: ‘mypass’, iid: 13239983}
  • successful login returns various informations:
    accName, accType, accountId, createDate, email, intercomUserHash, lastPaymentDate, lastPaymentResult, lastProjectId, libsWhitelist, maxActiveProjects, maxPages, nextPaymentDate, objects, recurrance, sessionId, settings, status, teamOwner, upgradeDate

2) listProjectsExtended [POST]

  • lists projects and projects’ informations for certain account
  • post data {t: ‘listProjectsExtended’, data: {“userId”:”u_44b9e6e7f0d71d4f0e3b4382038151ad”}, iid: 13239983}
  • successful response contains JSON string under ‘t’
  • that JSON should contain everything needed for listing projects - id, name, preview in base64, created and last updated timestamps, additionally - active, removed, shared, permission parameters

3) export [GET]

4) previewMail [POST]

  • requests server to send email with link to the preview
  • post data {‘t’: ‘previewMail’, p: ‘project id’, email: ‘users email’, iid: 13239983}

Remaining api methods (all are POST methods)

  • accountSettingsSync - for upsyncing editor account settings
  • accountState - information about session etc
  • changeBilling - changes billing info
  • changeEmail - changes email
  • changePass - changes password
  • setMaster - taking control over when simultaneous use of editor occurs
  • create - creating accounts
  • login - logging in
  • emailRegd - checking if email exists
  • getPayments - get payments info
  • getLibrariesWhitelist - get list of unlocked libraries for that account
  • importUserPackage - importing exported projects
  • libSync - synchronizing newly added/removed custom widgets
  • listProjects - old method for listing projects
  • updateCard - updating credit card details
  • projectDuplicate - clones project
  • projectSync - upsyncing project changes
  • shareProjectWithUser - sharing projects with users
  • unshareProjectWithUser - removing shares
  • listSharedProjectWithUsers - lists projects shared with user
  • projectTransfer - sending projects between users
  • projectVersionList - lists all versions of a project
  • projectVersionRestore - restores certain version of a project
  • remove - removes objects (uploads, custom widgets, projects etc)
  • remove Account - removes users account
  • restore - restores removed object (upload, custom
    widget, project etc)
  • shareLog - logging for sharing projects
  • syncDown - downloading metadata for projects
  • upload Export For Safari - hotfix for safari
  • validatePass - pass wall is shown before removing account
  • listProjectsExtended - lists projects
  • getTeammates - gets list of teammates
  • addTeammate - adds a teammate
  • removeTeammate - removes a teammate

App development

Fluid UI does not do app development, but unsurprisingly, we know a lot of people who do. If you have a meaningful budget for app development, feel free to contact us in the chat widget here or in the editor and we can look to partner you with a suitable company that we recommend.

Cancelling Billing

You’ll find cancel billing in the account settings inside the main menu. Billing will stop as soon as you pause your account.

If you chose to downgrade your account to free then you will not lose any of your work but you will be restricted to the features that are available in the Fluid UI free plan.

You can upgrade again at any time to use the premium features once more.

If you don’t plan on using Fluid UI in a given month, you can choose ‘Cancel Billing’ from the account settings menu.

We store your projects free of charge for up to a year. (We will send a warning email to sign back in after a year of inactivity before we delete any of your data).

Receipts

Receipts

You can download your receipts from the receipts section of the ‘Account Settings’ menu (accessible from the top right ‘Fluid’ menu button). If you need to have regular receipts sent to yourself or your accounts team, you can also set this up from there.

Payment details on your statement

The charge on your credit card statement will be from ‘Fluid Software Ltd’.

Upgrading

If you decide to upgrade to a different plan, for example from Solo to Pro please let us know via email or our in app chat so we can help arrange a refund for you.

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.

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.

Comments

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.

Mobile preview

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.
![](/assets/images/guide/Fluid-Project-List.jpg)
  • 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](/assets/images/guide/Fluid-UI-App-Menu.jpg)
  • 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.

Previewing

When you are ready to preview your app in the browser, click on the Preview tab in the editor and the preview will start.

Preview settings menu

You can access the preview settings menu when you click on the Preview tab. The preview settings 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.

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

Zoom in and out with ease via the zoom ruler.

Test your design via any mobile device by scanning the QR code.

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.

Highlight links is set to hidden by default. Toggle on/off as you require.

Restart preview - 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.

Sharing the preview with anyone is simple. Just click Copy preview link and share away.

When you are finished previewing, click the stop icon to return from Preview Mode 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.

Keyboard shortcuts

In general:

  • ⌘ + key for mac or
  • Control + key for Windows or Linux.
P Switch to project preview
C Switch to comments mode
E Switch to project editing
L Open/close library
Escape Close a menu or zoom out to project context
⌘/CTR + + Zoom out
⌘/CTRL + - Zoom in
⌘/CTRL + 0 Zoom to 100%
General commands
⌘/CTRL + S Save
⌘/CTRL + Z Undo
⌘/CTRL + Y Redo (Also ⌘/CTRL + Shift + Z)
Selecting widgets
⌘/CTRL + A Select all widgets on the active page
⌘/CTRL + Mouse click Add/remove to selection
Delete/Backspace Delete selected widgets
Escape Deselect selected widgets
⌘/CTRL + C Copy
⌘/CTRL + X Cut
⌘/CTRL + V Paste
⌘/CTRL + D Duplicate
Moving and resizing widgets
← ↑ → ↓ Move widget
Shift + ← ↑ → ↓ Move widget 10x
⌘/CTRL + ← ↑ → ↓ Increase size in the selected direction
⌘/CTRL + Shift + ← ↑ → ↓ Reduce size in the selected direction
⌘/CTRL + Mouse resize Maintain aspect ratio when resizing a widget
Text editing
⌘/CTRL + I Make text italic
⌘/CTRL + B Make text bold
⌘/CTRL + U Underline text
⌘/CTRL + Enter Confirm text change
Escape Cancel text change

Timeline & undo

Control-z (command-z on mac) will undo any action you take.

The timeline review in the bottom right corner (beside the bin) also has a full history of actions you’ve taken in the current session. You can use it to jump back to any previous state the project you’re working on.


Use version history to restore a different version of any project.

Camera controls

By default, Fluid UI tries to show your pages and widgets at 100% size. This reduces the amount of movement needed to edit your mockup and provides a better overall experience.

For screens that don’t fit in your browser window, Fluid UI provides two options to manage how you design your pages - Smart Zoom and Fixed Zoom. Each of them are useful in different contexts.

The options to change your camera settings are in the view settings which you’ll find in the page menu.

view settings in fluid ui

Smart camera

  • The page you’re working on will be fitted as big as your browser allows.
  • When zooming out from a widget you will be brought back to the page context.
  • The page menu will always be visible in page context.
  • When you focus on a page in Smart mode, it will center the page and scale it to ensure it fits properly on your screen. This means you can see all of your selected page on the screen with one click as big as it can be drawn. A second click on a widget will finish scaling to that widget.

You can change the zoom on a page level by selecting view setting and adjusting it to your liking.

Tip: This mode is best when dealing with landscape pages on small monitors and when you frequently want to be able to view all the parts of a page in one go.

Fixed camera

In fixed camera mode, clicking a page will automatically zoom you in fully to the widget scale without any intermediate zoom steps.

The page will center on the area you clicked, meaning you can quickly zoom in and out of big pages and target different parts of the screen you are working on.

Since you have already zoomed in to the widget zoom level, no additional zooming will be needed to work on widgets in that part of the screen.

Tip: This mode is best when you’re doing a lot of fine detailing work and want to skip quickly between project and widget zoom levels with less overall screen movement or when dealing with long screens full of content.

Setting the zoom scale

You can decide what scale to zoom in to when a widget is selected. The default is 100%. This can be set to any number especially for projects that require a finer level detail.

Setting the zoom scale gives you fine grain control over how far you want to zoom in to individual widgets.

Large widgets can sometimes be difficult to view completely on a small monitor. Set the zoom scale to 50% or 75% to be able to view those widgets.

Mouse zoom

If you are using mouse wheel zoom and zooming is happening too often, try turning down the sensitivity for scroll actions in your computer’s settings or turning off mouse scrolling in the view settings.

3 different zoom contexts - project , page and widget.

different zoom contexts in Fluid UI

Different options become available at each context. Learn how to navigate the canvas to make your workflow even more efficient.

Project context:

The project will be zoomed out to the maximum and all the pages and links in your project will be visible. You can use this mode to move pages around your project and get an overview of your entire project.

How to zoom to project context

  • Click anywhere on the canvas.
  • Click the zoom out button (visible only at page or widget context).
  • Use your mouse wheel to zoom out.
  • Press the escape key on your keyboard.

Actions in project context

  • Drag pages to organise the layout of your prototype. The canvas will automatically re-center to ensure your project is always in view.
  • Hover over links to access the link menu and update and delete links.
  • When creating a link, you will automatically zoom from widget to project level so you can drop links on any other screen in your project.

Page context:

The page will be centered and the page menu will be visible. Here, you can manage the width and height of your pages, make page notes, set the start page, orientation and more.

How to zoom into a page

  • Click on any page to zoom in and focus on that page.
  • The page that is currently in focused will have a grey border around it - this is known as the page frame.
  • Mouse wheel in over any page at project level to focus on that page.

Navigating between pages

Zoom out to the project level and click a new page to focus on that page.

Click a non active page at page level to focus on that page.

Click any link to follow that link to its destination page.

Use the arrow keys to navigate backwards and forwards between pages in preview mode.

Tip: If you focus on a non active page that is already on screen, the canvas won’t move. This helps when editing multiple pages that are lined up closely.

Actions at page context

  • Click between pages when zoomed in to change the focused page.
  • Click and drag the dark grey bar at the top of the page frame to move a focused page.
  • Click and drag the canvas when zoomed in to move it around. This may help access (otherwise inaccessible) parts of larger pages when designing on a smaller screen.

Widget context:

The widget menu will be visible and a widget or widgets will be selected. Use this level to change the look, feel, positioning and size of each widget.

  • Click on any widget to zoom into that widget
  • When a widget is selected, the width and height resize handles will be visible.
  • Click on the page frame to deselect the widget and return to page context.
  • Change the zoom level in view setting to zoom in closer to small widgets or further out on larger widgets.

Add links

Select any widget or hotspot and use the blue ‘link’ icon on the right hand side of the widget menu. The screen will zoom out to your entire project. Click again to drop the link on the page you want to link to.

Widget menu and link button

You can drop the link onto another page, or on the buttons that appear on the side of the canvas. These include, new, clone, start page, previous page and URL.

Different link options

  • New - creates a new page and links to it
  • Clone - clones the current page and links to it
  • Start page - links to the first page of the project or whatever page you set as the start page
  • Previous page - Links to the previous page, handy for making back buttons
  • URL - Links to a URL outside of your project

Gestures and transitions

Link settings menu
Once a link is created, you can click on the widget it is linked from and the link settings menu will appear in the tool bar. You can access the links gestures and transitions from here or alternatively, hover over a link and a circle with an arrow will pop up. If you click on this you will be given gesture and transition options as well.

  • Delete a link by clicking on the widget it is linked to. You’ll find a trash bin in these settings beside each link which can be used to delete the link.

If you started linking by accident, just drop that link anywhere on the canvas, the editor will automatically refocus on your original page and delete the link.

Clicking on a link when zoomed in will bring you to the link’s source or destination depending on which direction the link is pointing towards.

The default gesture and transition can be set in project settings.

When previewing, links will work as an interactive prototype, allowing you to click through your mockup.

Gestures & transitions

Select any widget or hotspot and use the blue ‘link’ icon on the right hand side of the widget menu. The screen will zoom out to your entire project. Click again to drop the link on the page you want to link to.

Widget menu and link button

You can drop the link onto another page, or on the buttons that appear on the side of the canvas. These include, new, clone, start page, previous page and URL.

Different link options

  • New- creates a new page and links to it
  • Clone - clones the current page and links to it
  • Start page - links to the first page of the project or whatever page you set as the start page
  • Previous page - Links to the previous page, handy for making back buttons
  • URL - Links to a URL outside of your project

Gestures and transitions

Link settings menu
Once a link is created, you can click on the widget it is linked to and the link settings menu will appear in the tool bar. You can access the links gestures and transitions from here or alternatively, hover over a link and a circle with an arrow will pop up. If you click on this you will be given gesture and transition options as well.

  • Delete a link by clicking on the widget it is linked to. You’ll find a trash bin in these settings beside each link which can be used to delete the link.

If you started linking by accident, just drop that link anywhere on the canvas, the editor will automatically refocus on your original page and delete the link.

Clicking on a link when zoomed in will bring you to the link’s source or destination depending on which direction the link is pointing towards.

The default gesture and transition can be set in project settings.

When previewing, links will work as an interactive prototype, allowing you to click through your mockup.

Adding & deleting

Select any widget or hotspot and use the blue ‘link’ icon on the right hand side of the widget menu. The screen will zoom out to your entire project. Click again to drop the link on the page you want to link to.

Widget menu and link button

You can drop the link onto another page, or on the buttons that appear on the side of the canvas. These include, new, clone, start page, previous page and URL.

Different link options

  • New- creates a new page and links to it
  • Clone - clones the current page and links to it
  • Start page - links to the first page of the project or whatever page you set as the start page
  • Previous page - Links to the previous page, handy for making back buttons
  • URL - Links to a URL outside of your project

Gestures and transitions

Link settings menu
Once a link is created, you can click on the widget it is linked from and the link settings menu will appear in the tool bar. You can access the links gestures and transitions from here or alternatively, hover over a link and a circle with an arrow will pop up. If you click on this you will be given gesture and transition options as well.

  • Delete a link by clicking on the widget it is linked to. You’ll find a trash bin in these settings beside each link which can be used to delete the link.

If you started linking by accident, just drop that link anywhere on the canvas, the editor will automatically refocus on your original page and delete the link.

Clicking on a link when zoomed in will bring you to the link’s source or destination depending on which direction the link is pointing towards.

The default gesture and transition can be set in project settings.

When previewing, links will work as an interactive prototype, allowing you to click through your mockup.

Pinning

The pin/unpin button is always visible in the widget menu. Click it to get the dropdown options.

You may have created a scrolling page and you want to have a widget float over the page and stay in view while you scroll the page in preview mode. Use the pinned/unpinned option to control what moves with the page.

Any widget can be fixed on top of a long/scrolling page (‘pinned’) or allowed to move with the scrolled page (‘unpinned’).

Color

The background and border properties menu is used to set the non-text properties of a widget, including:

  • Background color (flat or gradient)
  • Border color (if the widget has no border, increase the border size and then you can give it a color)

  • Background opacity
  • Border size and radius
  • The width and height of the widget (exact pixels)

Tip: Use the background and border icons to toggle between color editing and all of the other editing options.

Editing

Using the widget menu to edit your widgets

Click on a widget to access the widget menu.

Use the tool icon inside the menu to move the menu around your screen.

Clicking the widget menu tool icon will expand/collapse the menu

Some buttons on the widget menu can be expanded to show even more options.

The widget menu will always be visible on screen when a widget is selected. When no widget is selected, the page menu will be showing and the widget menu will be hidden.

Positioning the menu

The first time you drag the widget menu it will move to the location you choose.

Dragging it a second time will cause it to switch to best guess mode. This will make it centre over whatever widget you have selected.

Drag it once again and it will stay in the location you chose. You’ll see the little blue lock icon on it when it is in locked mode. It won’t move around unless you drag it again.

Customizing your widgets

You can change almost anything about your widgets and make unique designs to reuse over and over. Discover all of the options available in the widget menu.

  • Text - color, size, font
  • Background color
  • Save widgets to your saved design patterns
  • Group/ungroup widgets
  • Align widgets
  • Cut, copy, paste and clone widgets or parts of widgets

Backgrounds and borders

The background and border properties menu is used to set the non-text properties of a widget, including:

  • Background color (flat or gradient)
  • Border color (if the widget has no border, increase the border size and then you can give it a color)

  • Background opacity
  • Border size and radius
  • The width and height of the widget (exact pixels)

Tip: Different widgets have different customizable options. For example, you can change the color of some widgets but not others and some of the larger card widgets cannot be resized.

Use the background and border icons to toggle between color editing and all of the other editing options.

Changing view settings

view settings window in Fluid UI

Turn snapping on or off: snapping is useful for automatically aligning widgets.

Turn the grid on or off: use the grid’s slider to change the number of pixels in each square of the grid.

Turn the magic mouse zoom on or off: magic mouse zoom lets you use the mouse to zoom in on pages when in project mode (zoomed out to view all pages together). Place the pointer over a page and scroll the mouse to zoom in on that page.

Select your Fluid UI camera settings: set the camera controls to either smart or fixed.

Change the zoom level to suit the size of your monitor’s screen. 100% will fit the page to your screen.

Next: Read about the Fluid UI camera controls and how to use them to speed up your workflow.

How to upload your own images

  • Drag and drop the images into the editor window.
  • Use the plus button in the uploads section to search your computer’s hard drive for an image.
  • Make sure your images are ‘saved for web’ using a program like Photoshop or one of the free online image editors. When you keep your image files as small as possible the editor will load quicker and previewing will be much quicker also.
  • You need to have a paid account (solo) to upload images.

Next: Have a look at how to use hotspots to create high fidelity mockups.

Snapping and grid

Snapping

fluid ui snapping controls

Find the controls for snapping and grid in view settings accessible from the page menu.

Grid

fluid ui grid controls

Use the grid to align your widgets to the nearest pixel. Change the size of the grid’s squares to the right number of pixels for your project.

Next: Read about changing the view settings and managing the Fluid UI camera controls to speed up your workflow.

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.

Grid

Grid

fluid ui grid controls

Use the grid to align your widgets to the nearest pixel. Change the size of the grid’s squares to the right number of pixels for your project.

Next: Read about changing the view settings and managing the Fluid UI camera controls to speed up your workflow.

Snapping

Snapping

fluid ui snapping controls

Find the controls for snapping and grid in view settings accessible from the page menu.

Groups

Selecting multiple widgets

Start dragging on the page frame (the dark grey area around the selected page) or on an area that does not already contain a widget other than the background.

All widgets that are contained in the blue box after dragging will be selected.

You can now align, copy, paste and group everything inside the selection.

Creating groups

Use the group icon to group or ungroup selections of widgets.

The group/ungroup icon will become available once you have selected more than one widget.

Groups will be clearly indicated by a border when selected.

In order to edit widgets in a group, they must be ungrouped first.

Handy keyboard shortcuts for grouping and selecting

  • Ctrl + A (Cmd + A) will select all the widgets on the focused page.
  • Holding down Ctrl (Cmd) while clicking on a widget will add or remove that widget from your selection.
  • Cut = control + X
  • Copy = control + C
  • Paste = control + V
  • Delete = control + delete
  • Clone/duplicate = control + D

Symbols

Symbols will speed up your design process for every project.

  • Reusable designs are stored in your symbol library.
  • Save whole screens and use them in other projects.
  • Save your customised widgets and cards ready for quick access when you need to mock up a similar project.
  • To delete a symbol, drag it to the red trash bin in the bottom right of the screen.

Saved symbol library in Fluid UI
Tip:
You can access all of your saved symbols from any project.

Layers

Select any widget or widget group and use the arrows to send them to front or back.

Send to Front - places the selected widget behind all others on the page.

Send to Back - places the selected widget in front of all others on the page.

Send Backwards - moves a widget behind the previous widget.

Send Forwards - moves a widget in front of the one above.

You can change the transparency of widgets to get some cool effects.

Hotspots

Uploading your own images and using invisible links

Hotspots are widgets that are visible on your page when creating your prototype, but don’t show in preview mode (unless you choose to show them in preview settings).

They let you link a particular part of an image to another page without having to chop up the uploaded image.

To use a hotspot, add one from the library and select the link button to add a link from that widget.

Hotspots are useful if you want to link from more than one area on an image. If you want to link from the whole image you can do this too with a normal link.

Uploads

My uploads and introducing invisible links

You can either drag and drop the images into the editor window, or use the plus button in the uploads section to search your computer’s hard drive for an image.

You should always make sure your images are ‘saved for web’ using a program like Photoshop or one of the free online image editors.

When you keep your image files as small as possible the editor will load quicker and previewing will be much quicker also.

Auto-scaling images


There are two ‘Autoscaling’ of images options, this will help you fit images to your screens quickly and easily. These options will appear in the widget menu as soon as you click on an image that you have uploaded.

‘Expand to Fit’ allows you to expand a small uploaded image to the width/height of the page you’re working on.

‘Display 100%’ will resize an image widget to the original size of the uploaded image file.

Tip:
You need to have a paid (solo) account in order to upload your own images.

Editing text

Click on any text to edit it. If you want to increase the size of the box that the text is contained in, drag from any of the box’s corners.

The text edit submenu will appear as soon as you click on a piece of text. The menu lets you change the:

  • Font type
  • Size of the text
  • Color of the text
  • Opacity of the text
  • Font Style (Bold, Italic, Underline)
  • Text Alignment (Left, Center, Right)
  • Vertical Alignment (Top, Middle, Bottom)

Tip: Remember to drag the text box as you make the text bigger so it is aligned as you want it to be. If you don’t make the box bigger some of text may be hidden.

Resizing

Widgets can be resized by dragging from one of the 4 corners or the sides of the widgets.

All resizable widgets have a clear box/outline indicator.

Holding down shift will maintain the aspect ratio of a widget while resizing it.

To get the size of your widget pixel perfect you can use the resizing tool. simply chose the height and width that you desire.

Tip: Some larger widgets cannot be resized as they are fitted to the size of your page and the device type you are designing for.

Moving and aligning

Use the grid view in view settings to align widgets pixel by pixel. You can set the number of pixels in each square in the grid.

The snap to grid option will also help align widgets to the nearest pixel.

Use your keyboard’s arrow keys to align widgets by moving pixel by pixel.

Automatic alignment
Select two or more widgets and the vertical/horizontal align icons will appear in the widget menu.

There are 6 options in total:

Align Left - aligns the widgets/groups to the left.

Align Right - aligns the widgets/groups to the right.

Align Center - aligns the widgets/groups to the center.

Align Top - aligns the widgets/groups to the top of the selection.

Align Middle - aligns each widget to the middle of the selection.

Align Bottom - aligns the widgets/groups to the bottom of the selection.

Send to front/back

Select any widget or widget group and use the arrows to send them to front or back.

Send to Front - places the selected widget behind all others on the page.

Send to Back - places the selected widget in front of all others on the page.

Send Backwards - moves a widget behind the previous widget.

Send Forwards - moves a widget in front of the one above.

You can define the alignment and z-depth for a widget from the widget menu and in using pinned widgets (often used in conjunction with scrolling pages)

Selecting

Click on widgets to select them.

Select components of widgets and edit them, such as text or boxes inside a menu widget.

Widgets can be grouped to move/copy/paste/align them together.

Selecting multiple widgets

Start dragging on the page frame (the dark grey area around the selected page) or on an area that does not already contain a widget other than the background.

All widgets that are contained in the blue box after dragging will be selected.

Creating groups

Use the group icon to create a group, and when a group is selected, you can ungroup them with the ungroup icon.

Keyboard shortcuts

  • Ctrl + A (Cmd + A) will select all the widgets on the focused page.

  • Holding down Ctrl (Cmd) while clicking on a widget will add or remove that widget from your selection.
  • Cut - control + X
  • Copy - control + C
  • Paste - control + V
  • Delete - control + delete
  • Clone/duplicate - control + D

Tip: Groups will be clearly indicated by a border when selected. In order to edit widgets in a group, they must be ungrouped first.

Creating

There are two ways to add widgets to you page:

1. A single click

A single click on a widget will add it to the selected page. The widget will automatically be placed on an area of the page that the editor predicts it belongs.

For example: A header item will go in the header section of the page. You can move it by dragging and dropping it somewhere else.

2. Drag and drop

Dragging a widget from the library and dropping it on any page (selected or not) will add that widget to the page at the location it is dropped.

Quick search the libraries


Use the library search function to find widgets by type. For example type ‘tables’ into the search bar to bring up all of the table widgets in that library.

Tip: You can close the widget library if you’re not using it to give yourself a bit more space.

The library

The library has 3 tabs

Widget libraries

1. Pre-built widgets
The widget libraries include dedicated libraries for iOS, Android, Windows, wearables and website wireframing.

By default the ‘wireframe’ library is selected, this is a good option if you don’t want to worry about the exact device you are prototyping for, but just want to get a good overall feel for how your app’s UI will flow.

2. Uploaded widgets
Upload your own images from Photoshop or the web and make high fidelity prototypes.

3. Saved design patterns
Save design patterns, screens and customized widgets to use again and again.

What can you do in the library?

  • Use the search bar to quickly find the widgets you need
  • Select and add widgets to your pages
  • Upload your own widgets to the uploads section
  • Save your own design patterns to the saved design patterns to speed up your workflow
  • Resize, open and close the library to give yourself more screen space.

Tip: To access the libraries, click on any page and the library will open on the left of the editor. Select your chosen library from the widget library dropdown menu and start designing.

Working with widgets

Fluid UI contains over 2,500 different widgets available in 16+ libraries for iOS, Android, Windows and wireframe. They are accessed from the library on the left of your screen after you click on a page.

Widget libraries

Adding widgets to your page

Click on a widget in the library. It will be added to the active page in a suitable location.

Drag a widget from the library to a page. It will be added to the page where you drop it.

Widgets on pages can be cloned (ctrl-d/cmd-d) and copied/pasted (ctrl-c/ctrl-v) to the same page or to different pages.

Selecting widgets

Select any widget on any page by clicking it. The widget menu will be visible and will allow you to edit the widget’s properties.

Shift+click will add or remove a widget from a selection.

Click-dragging from the page frame or page background to select multiple widgets at once.

Ctrl-a or cmd-a selects all widgets on the active page.

Some widgets are comprised of multiple parts. A second click will select the sub-part which can be edited and styled independently.

Moving, resizing and aligning widgets

See moving, resizing and aligning widgets for how to get widgets where you want them. You may also want to turn on snapping or the grid in the page settings.

Changing other widget properties

Check out backgrounds and borders and editing text for more on building these parts of your design. Once you are happy with your widgets, consider saving them to your custom design patterns for future reuse.

Creating groups

Widgets can be grouped. Widgets added from your save patterns library will be grouped by default.

Uploading images

See how to upload your own images.

Deleting widgets

Select your widget(s) and press delete (backspace on Mac), or click delete on the widget menu or drag them to the trash.

Widget types

Not too exciting this section, but some widgets have unique features associated with them to help you build your prototype, and it’s worth documenting how they work:

Backgrounds automatically expand to fill the background. They don’t get selected by default in an area-select (though they can be click-selected). They can’t be moved either.

Tables can have segments added and removed from them.

Hotspots are special widgets that show in a translucent colour when editing, but are invisible when previewing. You can add links to them and the links will work correctly. See more about using hotspots.

Text widgets are widgets that have text in them. The text can be edited by double clicking the widget. See more about editing text widgets.

What next?

Finished adding all the widgets you want to your pages? Add links, gestures and transitions to make your prototype interactive - or just continue with the introductory tutorial.

Getting feedback from stakeholders

Learn how to share and collaborate with your team. Share projects and project copies, export projects and use notes.

Screen sizes

What are screens in Fluid UI?

project settings

When we talk about screens in Fluid UI we are talking about the device screen you are designing for. You can read all about choosing the right screen resolution for your app design here.

You can choose which device screen resolution you are designing for when you create a new project and by choosing project settings in the home menu.

What are pages in Fluid UI?

A page in your project corresponds to a page in the app you are designing. You can change the page’s height, width, orientation and set it as the starting page for when you’re previewing your app prototype.

Next: Read about managing page settings in your projects.

Settings

page settings fluid ui

Chose a title for your page which will show up on the canvas in edit mode. You can change this title as many times as you like.

Choose the start page for your project, this will automatically start your app preview on this page.

Choose the page orientation, portrait or landscape.

Set the width and height of your page and make scrolling pages.

You can also access project settings from page settings.

Next find out about changing project settings.

Scrolling

Increasing the page width or height in the page menu will automatically cause any pages to scroll (horizontally, vertically or both) when you preview.

Page settings menu

The dashed blue and white screen boundary marker will indicate where the page will start scrolling.

Screen boundary markers

Pinned widgets are frequently used with scrolling pages to make some content static while other content scrolls.

You may also want to know more about changing your resolution/device type or the difference between the screen size and page sizes to set your project up to your liking.

Orientation

Choose your default screen orientation and resolution when you are creating a new project. You can also choose a custom size if your size is not in the presets.

create a new project

Use project settings which is in the home menu to change the device orientation as well as the default gestures and transitions for your project.

screen resolution and orientation settings

Next: Find out more about managing your project settings and managing your page settings.

Homepage

You can set any page in your prototype to the start page by focusing on that page and clicking the “Start page” switch in the page settings menu. Only one page can be the start page.

Setting the start page in Fluid UI

You can also the preview button on any screen to preview starting with that particular page so you don’t need to navigate from the start page each time (this option is available once the page has widgets on it).

See more about the page settings, setting up the Fluid UI camera the way you want it or how to add page titles and page notes.

Naming

Adding a title for your page

  • Add a page title for every page
  • These titles will show in edit mode
  • Handy for letting reviewers know exactly which page you’re talking about and getting good feedback.

Adding notes to your page

  • You’ll find page notes in the page menu.
  • Add notes to each page to explain your design or help the user navigate through the app easily.

Turning on/off notes in preview mode

  • You’ll find notes in the preview settings menu, once you click on the green preview arrow.
  • You can leave notes on during preview or turn them off for a more realistic desktop preview.

Next, have a look at the other preview settings and options.

validating your concept with users.

Creating

There are 3 ways to create a page with Fluid UI:

Double click anywhere on the canvas when zoomed out to create a page at that location.

Use the add page icon when zoomed out.

Create a link from one of your widgets and drop it on “New +”.

Once created, pages can be moved around the canvas to create a storyboard for your prototype.

Double-click anywhere to create a page

Double-click anywhere to create a page

Click the green add page icon

Click the green add page icon

Create a link and drop it on "New +"

Cloning pages

You can clone a page by clicking the sheep in the page menu.

Clone page

Deleting a page

You can delete a page by focusing on it and clicking delete in the page menu or by dragging it to the trash in project context.

Delete page

Next, add widgets to your pages. People often also frequently ask how to set the start page and how to make pages scroll when previewing.

Validating your concept with users

Learn more about how you can validate your product ideas using Fluid UI, making sure you get real customer feedback. Once you are happy with your concept, learn how you can integrate your results into your company and how you can get your app developed.

Start screen & icons

You’ll find the options for uploading your own splash screen and icon in the project settings menu.

Settings

Click on the home menu icon to access project options and settings.

From here you can:

  • Create new projects
  • Open and manage existing ones
  • Copy or clone projects
  • Restore project versions
  • Manage your project’s settings
  • Print and export your project

Project settings options

Use project settings to:

  • Open projects
  • Clone or copy projects
  • Access version history and restore previous versions
  • Upload your own icon and splash screen
  • Change device resolution and transitions settings
  • Change the default device orientation

Change your project’s device resolution

All of the common phone resolutions are listed, as well as several desktop/browser resolutions.

Scroll to the end of the device options to find the custom screen size options. You can add in your own height and width here.

Selecting the correct resolution for the device you will be testing on will dramatically improve the quality and speed of the prototype.

You can choose the orientation for the app you are designing.

Change your project’s default gestures and transitions

Set the transition and gesture you want to have in your app. This will mean that each new link you create will automatically be set to the default transition and gesture you have chosen.

  • Some example gestures are tap, double tap and swipe.
  • Some examples of transitions are flip, slide, pop and fade.

You can also change the gestures and transitions for individual links:

Changing gestures and transitions for individual links

Restoring

Restoring older versions

Any version of a project can be restored though the version history section of the home menu. Older versions are stored for up to 2 weeks for all premium accounts, and for a limited period for free accounts.

If you are moving between computers, please ensure you are logged out before logging in to a different machine. Logging in to the same account at the same time from multiple locations is not currently supported.

You can also clone a whole project to make a backup. Sharing this version with a client will allow you to take feedback while continuing to work on the existing project.

If you have sent a link to a project and you no longer want that person to have access just clone the project, archive the old project, then delete it forever and the link will be made obsolete, just make sure you clone the original project first.

Deleting

Project settings panel

There are two ways to delete your project. Click on open in the home menu and you can view all of your projects and delete them by clicking on the bin beside them. There is the option of restoring a project if you delete it by accident by using the deleted projects search filter.

delete a project or restore

The other way to delete a project is by opening project settings in the home menu. This will give you options for the project you are currently working on. Click on the bin to delete the project.

project settings

Archiving

Archive from open projects


Archive your active projects to free up more space, you can then manage your archived projects, delete or restore them in the future.

Archive from project settings

project settings

Click on project settings in the home menu and then click on archive to archive the project you’re currently working on.

Why archive projects?

Archive projects so you can start new ones if you don’t have a pro account. (there is a project limit on the other account types)

Keep your projects safe and make sure you don’t delete them or overwrite them.

How to access archived projects

filter search

Go to open projects and then use the filter in the search bar to find all of your archived projects.

Copying

  • Click on ‘make a copy’ in the home menu
  • Change the name of the copied project

The original and copied projects are now in your active projects. The copy will automatically open and your original can be accessed in ‘active projects’ by selecting ‘open’ in the home menu.

Saving

Saving your project

Fluid UI automatically saves your work both locally and online every few minutes as well as every time you click the preview button - there is no need to specifically save or manage projects.

The only way your data will be deleted is if you ask us to delete it. We store data for inactive accounts for up to a year. After a year of an account being inactive you will receive an email warning you that your account is going to be deleted. If the account is active it will not be deleted ever.

Creating

Your first project will be created and already open when you sign up.

An empty Fluid UI project ready for prototyping

To create a second or further project:

  • Go to the home menu and select “New project”.
  • Choose the device type and orientation for the project (if applicable).

Create project menu in Fluid UI

You can change the screen resolution, create custom screen resolutions and change your default orientation (you must finish creating your project first to do this).


You may also wish to duplicate an existing project, delete a project, manage project settings and view and restore previous versions your projects.

Once your project is created the next step is to add pages.

Account settings

Manage your account: See our plans page, then if necessary upgrading to a different account type, pausing (cancelling billing), getting receipts and managing the rest of your team.

Why prototype?

It’s not always obvious why you should stop and prototype your ideas before developing them - especially if you have the ability to “jump right in” and start coding yourself.

But prototyping is an integral part of all successful software projects. It reduces costs and massively improving the chances of your project succeeding. It helps you get your idea from idea to customer in the shortest, least painful way possible:

Let’s face it, there’s no point in building software that no-one will ever use. Prototyping is the best way to validate whether your concept has real resonance with real people before investing in a long, potentially risky development phase. To start validating your ideas, use the 5 step framework for validating product ideas and match your solution to your customer’s needs.

If you are a developer, it’s night on impossible to design and develop at the same time. If you try, the quality of your product will suffer badly as a result. You owe it to yourself to give your product the best chance to succeed.

Agile development delivers software solutions quickly. User-centered design and prototyping identifies what problem to solve in the first place. Combined, they they help you build the right product faster.

If a picture is worth a thousand words, then a prototype is worth a thousand pictures. Prototyping give you the means to communicate interactive software requirements in a way that your team can understand. Before long, your project managers, developers and all of your stakeholders will be insisting on a prototype before starting development.

Mobile design is full of complexities. Prototyping lets you focus on your user’s needs first and avoid having to think about technical complexities like pixels, points and resolutions and the mobile screen sizes that quickly cloud your path when you start to code.

Prototyping lets you get feedback from all the stakeholders in your organisation quickly and effectively.

Finally, prototyping helps you integrate user feedback right into your company roadmap. For maximum win!

Have we convinced you yet? Check out our introductory tutorial and Sign up now.

Navigation

Learn all about navigating the canvas using the Fluid UI camera controls. Use view settings to turn on/off snapping and grid. Find out what keyboard shortcuts are available in Fluid UI.

Sharing projects

Receive a preview link lets you send a preview link to an email address.

Receive a complete copy sends the whole project to another Fluid UI user’s account. They can open this project and edit it, this is good for team work on a project. Users can send versions back and forth and work on the same project.

  • Get a sharable link always brings you to the most recent preview version of your project. This means you wont have to sign in to <a www.fluidui.com” target= “_blank”>www.fluidui.com when showcasing your app in the browser, you can copy and paste the link into your browser and show it from there.

Tip: The sharing button is next to the home menu, it will be visible once you make a page and add a widget.

Zooming

Fluid UI uses an infinite canvas to provide incredible flexibility when creating prototypes. The camera defaults to the best settings for most projects, though at times you may want to take control of how the three zoom levels work for your project. This section explains how the canvas and zooming works and how to change the settings to improve your productivity for specific projects.

Autoscaling images

There are two ‘Autoscaling’ of images options, this will help you fit images to your screens quickly and easily.
These options will appear in the context menu as soon as you click on an image that you have uploaded.

![]

‘Expand to Fit’ allows you to expand a small uploaded image to the width/height of the page you’re working on.

‘Display 100%’ will resize an image widget to the original size of the uploaded image file.