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 about adding, cloning and deleting pages and changing their settings in the page menu.

3. Add widgets to your pages

Add any number of widgets from your library and edit widget properties to create the look and feel you need for 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

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