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
In this section you can do the following:

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.

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.

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




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.




The complete guide to Fluid UI

Tags: Review

The four steps in designing a prototype in Fluid UI are: creating pages, adding widgets, adding links and previewing.

Next: Read our quick guide to using Fluid UI for the first time and create great prototypes in record time.




Using hotspots and uploads to make pixel perfect prototypes

Article tbc.

Uploads library in Fluid UI




Project settings

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:




Creating your first prototype

Tags: Review

Read the introductory tutorial and learn how to create a new project, then create some pages in that project and add widgets from the library. Finally add links between widgets and pages to create an interactive prototype before you preview your prototype to see the end result. Not convinced yet? See why you should prototype.




The 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]

2) listProjectsExtended [POST]

3) export [GET]

4) previewMail [POST]

Remaining api methods (all are POST methods)




The complete guide to Fluid UI

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.




The complete guide to Fluid UI

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




The complete guide to Fluid UI

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'.




The complete guide to Fluid UI

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.




The complete guide to Fluid UI

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




Share and collaborate on projects in Fluid UI

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

Share an entire project

sharing projects with collaborators in Fluid UI

Copy or clone entire projects

copying or cloning projects in Fluid UI

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




The complete guide to Fluid UI

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




The complete guide to Fluid UI

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

Comments

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




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

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

Fluid UI Mockup

Fluid UI Sign In Page

Fluid UI App Menu

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




The complete guide to Fluid UI

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

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 Fluid UI

In general:

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



The complete guide to Fluid UI

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.




The Fluid UI 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

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

Actions in project context

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

Navigating between pages

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

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.




Adding links in Fluid UI

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

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.

Other link tips




How do I use gestures and transitions in Fluid UI

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

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.

Other link tips




Adding links, gestures and transitions to your Fluid UI project

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

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.

Other link tips




The complete guide to Fluid UI

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’).




Editing widget colours, backgrounds and borders in Fluid UI

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

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




Which browser should I use with Fluid UI?

Tags: faq

Chrome is recommended for use with Fluid UI. Firefox and Safari will work but there may be issues. Internet Explorer is not compatible.




Editing widget properties

Using the widget menu to edit your widgets

Positioning the menu

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.

Backgrounds and borders

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

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 in Fluid UI

view settings window in Fluid UI

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




The complete guide to Fluid UI

Tags: Review

More about the different options available to widgets.




The complete guide to Fluid UI

Tags: Review

Setting up gestures and transitions in your project.




How to upgrade to another plan in Fluid UI

Tags: faq

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.




How to upload your own images in Fluid UI



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




How do I undo?

Tags: faq

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.




Why is my project missing in Fluid UI?

Tags: faq

Fluid does not delete projects for any account that has been accessed in less than a year. We'll send a reminder email before we delete anything too.

  1. Make sure you are logged into the correct account, especially if you signed up originally with a personal email and then created a second account for work. If you have a link to the project, our support team can tell you what account the email belongs to.

  2. Make sure multiple people aren't logging into the same account. Fluid does not yet allow the same project to be edited at the same time by multiple people, particular in the same account and this may cause unpredictable behaviour. Please make sure only one person is logged into the account at a time.

  3. Make sure you haven't overwritten a previous version - if necessary restore version.

  4. Cloning a project will open that project immediately and close the current project.

If you are still worried about your project, please contact the support team in the in app chat and we do our best to resolve the situation with you.




How do I edit text in Fluid UI?

Tags: faq



How to manage the snapping and grid in Fluid UI

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.




Managing projects in Fluid UI

Tags: Review

The first project you created or the last project you worked on will automatically open once you are in the editor. Click open in the home menu to view all of your own projects and shared projects.

The project that is currently open will be highlighted light blue in the open projects dialogue box.

Finding projects

Filter, sort and search for projects in the projects filter.
Project filters

Copy, share, project settings and delete

Project clone, share, delete

Copy or clone entire projects

Share a project

Manage project settings

Delete a project




The different modes, menus and contexts in Fluid UI

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

Modes

Contexts

Other parts of the editor




The complete guide to Fluid UI

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.




The complete guide to Fluid UI

Snapping

fluid ui snapping controls

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




Widget groups in Fluid UI

Selecting multiple widgets

Creating groups

Handy keyboard shortcuts for grouping and selecting




The complete guide to Fluid UI

Symbols will speed up your design process for every project.

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




The complete guide to Fluid UI

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

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




Creating and managing your projects in Fluid UI

Tags: Review

Learn how to create, manage, clone, delete, archive, save and restore projects and project versions. Change the default settings including orientation, set up gestures and animations in your project. Finally, change the splash screen and app icons.




Using invisible hotspots in Fluid UI

Uploading your own images and using invisible links




The complete guide to Fluid UI

My uploads and introducing invisible links

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.

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




The complete guide to Fluid UI

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:

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.




The complete guide to Fluid UI

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, resizing and aligning widgets in Fluid UI

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:

Send to front/back

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

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)




The complete guide to Fluid UI

Tags: Review

Uploading images and using hotspots to create high fidelity prototypes, incorporating your own branding and logo.




The complete guide to Fluid UI

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

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




The complete guide to Fluid UI

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.




How to use the Fluid UI 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?

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

Selecting widgets

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:

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, sharing projects and collaborating with your team

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




Using hotspots with uploads in your projects

Tags: Review

Hotspot are found in the uploads library at the bottom under all of your uploads.

Uploading your own images and using invisible links




The difference between screens and pages

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.




Changing page settings in Fluid UI

page settings fluid ui

Next find out about changing project settings.




The complete guide to Fluid UI

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.




How do I make a page scroll in Fluid UI?

Tags: faq

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.




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.

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.




How to set the start page (homepage) in Fluid UI

Tags: faq

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.




The complete guide to Fluid UI

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.




Setting page titles and adding notes

Adding a title for your page

Adding notes to your page

Turning on/off notes in preview mode

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

validating your concept with users.




Creating, cloning and deleting pages in Fluid UI

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

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 +"

Create a link and drop it on

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 Fluid UI prototype 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.




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.




The complete guide to Fluid UI

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

From here you can:

Project settings options

Use project settings to:

Change your project's device resolution

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.

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

Changing gestures and transitions for individual links




Restoring projects in Fluid UI

Restoring older versions

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 projects in Fluid UI

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 projects in Fluid UI

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?

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 projects in Fluid UI

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 projects in Fluid UI

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.




The complete guide to Fluid UI

Tags: Review

Table widgets are a special type of widget that can have rows or columns added to them. Once a table widget is selected, the add and remove segment buttons will appear in the widget menu.




Creating projects in Fluid UI

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:

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.




Managing your Fluid UI account

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.




How do I get my Fluid UI app developed?

Tags: faq

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.




Fluid UI tutorial

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:

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


The start page for your project will be the first page you add widgets to. You can change the start page from the page menu.

3. Add widgets to your pages

Adding a widget in Fluid UI Add any number of widgets from your library and edit widget properties to create the look and feel you need for your project.

Adding links to your project The final design step is to link 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

Project preview Once you've added a few pages, widgets and links, test out your app in the browser by clicking on the green play 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.




Why you should 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:

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.




Navigating the Fluid UI editor

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.




The complete guide to Fluid UI

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




The complete guide to Fluid UI

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.




The complete guide to Fluid UI

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.




How do I upload images in Fluid UI?

Tags: faq

My uploads and introducing invisible links

Note: You need to have a paid account (solo) to upload images.

Tip: 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.




How do I save my project in Fluid UI?

Tags: faq

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 you 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.

Tip: You can restore older versions of your project by selecting version history in the home menu.




Do I need to know how to code to use Fluid UI?

Tags: faq

No, you don’t need to have any knowledge of coding. Use Fluid UI to design your app ideas and showcase them to team members and clients.

Tip: Be familiar with the different specs of the device you are designing for and learn about how your ideas might be implemented by a developer. You can follow the design guidelines for operating system such as Google's material design principles.




How do I create a link in Fluid UI?

Tags: faq

Link your pages together to create realistic flows for your apps.

Setting gestures and transitions

Tip: To delete a link, click on the widget the link is connected to and you will see the link settings button in the tool bar, click on this and you'll find a bin to delete the link.




Can I make a real working app in Fluid UI?

Tags: faq

Not yet, but it's something on our roadmap. Fluid UI is for prototyping and concept validation - for getting your app developed quicker and with less risk.

See how your app will look and feel on a real device. Download the Fluid UI player apps for Android and iOS and test your app on a phone or tablet.

Tip: The HTML exports we offer are for previewing your app offline only and are not formatted or of sufficient quality to use as actual starting code for an app.




How do I delete a link in Fluid UI?

Tags: faq

To delete a link, click on the widget you are linking to and you will see link settings left of the blue link button in the tool bar.

You can use this menu to edit, manage and delete links.

link settings menu fluid ui

Check out this post on linking pages and setting gestures and transitions.




How do I unlock all the libraries in Fluid UI?

Tags: faq

The other libraries will be unlocked once you have a paid account. The free account lets you access the widgets in the wireframe library.

Go to the Fluid UI plans page for details of which features you get with each account type. You can pay by monthly or yearly subscription.

Once you have a paid account you will have access to high quality iOS, Android, Windows, Tablet and wearables widgets.




What is Fluid UI?

Tags: faq

Take your imagined designs out of your head and into a realistic app in your hand with Fluid UI. You can test your designs on device, walking your client or stakeholder through the app layout and functionality while getting feedback.




How do I pause my account billing in Fluid UI?

Tags: faq

We can cancel and delete you account at any time, just let us know. If you want to pause your paid account and stop billing you will find this option in account settings which is in the home menu.

You can also pause your account at any time, billing will stop as soon as you pause your account. You will still have access to your projects but you will only have access to the features which come with a free account. Upgrade again to release these premium features once more.




How do I change a gesture or transition in Fluid UI?

Tags: faq

Setting gestures and transitions

There are three ways to set gestures and transitions:

1. Hover over one of your links, then click the button that appears. You'll find the options for changing gestures and transitions here.

2. 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 link's gestures and transitions from here.

3. You can change the default transition and gesture from the project's settings (you'll find this inside the home menu or at the bottom of the page settings).

When you change the default link settings, each new link you create will automatically be set to the transition and gesture you have chosen. You can of course always change the gesture and transition options for links individually as explained in point 1.

Tip: You should chose the transitions and gestures which are typical of the device you are designing for.




How do I make a hamburger menu in Fluid UI?

Tags: faq

One of the best design patterns popping up in mobile applications right now is the sliding "navigation drawer" pattern.

There is great coverage of the advantages of using this pattern on the Android developer site. Mocking up the pattern in Fluid UI takes a little creative thinking, but it is possible to do it pretty quickly using 'half off page' widgets to create the following effect.