Fluid UI introductory tutorial

Tags: Documentation | Prototyping

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 or
  • Click add page ( ) or
  • Create a link and drop it on "+ NEW".

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.

More articles for Documentation | Prototyping

Keyboard shortcuts

Keyboard shortcuts available in Fluid UI to speed up your design process.

Changing view settings

Full details about the different view settings in Fluid UI and how to change them.

The difference between screens and pages

Learn about the differences between screens and pages in Fluid UI.


These links are visible on your page when creating your prototype, but don't show in preview mode.

Widget groups

Creating and working with groups.

How to upload your own images

How to upload, add, delete and filter your own uploaded images in Fluid UI. Also covers hotspots for linking prototypes together.

Snapping and grid

The snapping and grid settings are available in the page menu and can be used to lay out your prototype according to grids or other layouts.

Setting page titles and adding notes

All about page notes in Fluid UI

Changing page settings

Full details on page settings and how to change them in Fluid UI.

Creating projects

Creating projects in Fluid UI, naming and deciding on the default orientation of your screens.

All about the library

Learn how to access and add widgets, upload images, save design patterns and switch / search between library elements.

Why you should prototype

Fluid UI discusses the top 10 reasons you should prototype your apps before you hand them over for development.

Adding, cloning and deleting pages

Covers how to create, edit and delete pages in the editor.

How do I make a page scroll when previewing?

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

Working with widgets

Everything you need to know about working with widgets in Fluid UI.

Links, gestures and transitions

How to add and delete links from your Fluid UI project. Also how to set link transitions and gestures to give a more custom look to your project.


Hotspot widgets are invisible when previewing though their links will still work. They can be combined with uploads to quickly create linked image maps.

Editing widget properties

How to edit the widget properties such as width, height, colour, size.

Moving, resizing and aligning widgets

How to move, resize and align your widgets.

Widget backgrounds and borders

How to use the widget menu to edit the look and feel of your widgets to match the needs of your project.

Setting your splash screen and app icons

How to set these two important screens in Fluid UI.