Short tutorial videos
Watch some short tutorial videos to get started. Fluid UI videos...
Fluid UI automatically stores your work locally and backs up regularly online. Please sign up for a new account or sign in to your existing account to save online and access your work from anywhere. If you are moving between computers, please ensure you are logged out before logging in to a different machine. Logging in multiple times to the same account at the same time is not currently supported.
All major buttons have tooltips. Hover over a button to display a tooltip that will help you identify what it does. If you notice any controls without tooltips please let us know.
Click and drag anywhere on the background canvas (the area behind the pages) to move it around. Pages and links will move with the canvas as you drag it around.
Zoom inWhile zoomed out: click on any page to zoom into that page and begin editing the page.
Alternatively, mouse-wheel up to zoom in.
Zoom outWhile zoomed in: click the 'zoom out' magnifying glass button (in the top right of interface) to zoom out.
Alternatively, mouse-wheel down to zoom out.
Add pageZoomed out: Double-click anywhere on the canvas to create a page at that location.
Zoomed in: Use the "+" add page button (in the top right of the interface) to quickly add lots of pages.
Move pageZoomed out: Click, hold and drag anywhere on the page to move it around on the canvas.
Zoomed in: Click, hold and drag the "move page" drag area on the page frame.
Clone pageZoomed in: To clone a page click on the "clone page" button above the page, on the page frame, an exact copy of the page is created to the right of the original page.
Show snap and grid menuZoomed in: Click the "Show Snap Options" button to display grid and snap menu.
Page gridZoomed in: Use the grid button in the snap and grid menu to toggle the grid on or off. Adjust the settings for grid spacing using the slider in the page settings menu.
Snap AlignZoomed in: Click the "Enable Snap Align" button to make widgets align to each other while moving them.
Page notesZoomed in: To add design notes click the "page notes" button above the page on the page frame to open the notes text area begin typing. Click the page notes button again to close the text area. Page notes will appear in print preview by default
Delete pageZoomed out: Click and drag the page to the trash area (bottom right corner) and drop there to delete.
Zoomed in: Click the delete page button above the page on the page frame.
Page settingsZoomed in: Click the "page settings" button to open the page settings menu. Click the button again to close the menu.
Page settings menu
The page settings menu gives control over page name, the start page, grid spacing, device type, page orientation (portrait/landscape) and page dimensions.
DeviceSet the target device for your mockup. A wide range of display types and devices are provided. Custom device size allows you to specify the screen size of any target device.
Page orientationSelect page orientation - choose from landscape or portrait.
Page sizeSet the page size. The page can be larger than the screen size of the target device - for example, tall scrolling pages will have be higher than the device display size. The page size cannot be smaller than the device size.
Add linkSelect a widget. From the toolbox menu, click the link button to start a link - move the target end of the link connector over another page and click to complete the link.
Remove linkHover over the link to display the link settings button. Click the button to display the link settings panel. Click the "remove link" remove the link. Alternatively, delete the widget where the link originates.
Link settingsHover over any link to display the link settings button. Click the button to display the link settings panel.
Add touch gesturesHover over the link to display the link settings button. Click the button to display the link settings panel. From the drop down menu select a touch gesture as the trigger for the link.
Add page transitionsHover over the link to display the link settings button. Click the button to display the link settings panel. From the drop down menu select from a range of animated screen transitions.
Working with projects
Accessing projects dashboardClick the "projects" button in the main Fluid menu (top right of screen) to access the projects dashboard.
Add projectClick the "add project" button to create a new project.
Open projectClick on a project thumbnail to open that project. Alternatively, press the ENTER key to open a selected project. Currently open projects are indicated by a slight blue border around the preview thumbnail image.
Project settingsSelect a project, click on the project title or project settings icon to open the project settings menu.
Edit project nameClick the project title to edit the name.
Clone projectClick "clone" to create an exact copy of the selected project.
Teleport projectClick "Teleport" to send the selected project to another Fluid UI user. Enter multiple email addresses to teleport the project to more than one account at one. You can keep the project in your own account or remove it as part of the teleporting action.
Share projectClick "share" to access the sharing options for the project. These are the same options that are available in the share panel when previewing a project. See Share panel for further info.
Delete projectDrag a project to the bin to delete that project.
Active projectsOpen the project menu and select active. Newly created projects are active by default. Depending on your account type there are limits to the number of active projects you can have at once. If you reach your active project limit, make existing active projects inactive (see below).
Inactive projectsOpen the project menu and select inactive. Inactive projects are read-only archived projects and may be viewed but not edited, unless activated again. If you had previously shared a link to a project that is now inactive viewers will see a message about the project state but will not be able to view the mockup.
Device type and project optionsUse the "device type" option to modify the target device and other settings for the currently selected project.
Version HistoryRestore previous versions of the currently selected project.
The library appears on the left side of the screen when zoomed in on any page. Click a library heading to switch library. Fluid UI Libraries: Wireframe, iPhone, iPad, Android, Android 4.0, Android Tablet, Windows8 and a library of uploaded images. Use the search box to search for any widget in the library. To adjust the width of the library click and drag the right edge beside the scroll bar. Click the hide/show button to quickly hide the library and click the same button again to show the library.
Placing a widgetDrag a widget from the library and drop it on a page to begin creating your mobile mockup. Click a widget in the library to add it to the current page with automatic positioning.
Selecting a widgetSelect a widget by clicking on it. To select or deselect widgets hold down the control [CTRL] key (CMD key Mac) and click each widget to add or remove it from your selection. Alternatively, click and drag a selection box around the widgets you want to select. Multiple widgets can be moved at the same time and aligned relative to each other.
When a widget is selected the toolbox menu is shown. The toolbox provides access to the following functionality.
LinkCreate a link from the selected widget to another page
CloneMake an exact copy of the selected widget
CopyCopy the selected widget to the clipboard
CutCut the selected widget to the clipboard
PastePaste the selected widget from the clipboard
AlignAlign two or more widgets vertically and horizontally
OrderReorder the height (z-depth) of a selected widget
ShapeDisplay shape property inspector - modify colour, opacity, border, radius and more
TextDisplay text property inspector - modify colour, font style, opacity and alignment
PinMake the widget fixed to the page and not scrollable in device preview
UnpinMake the widget scroll along with the page while in device preview
DeleteDelete the selected widget
Previewing your mockup
Click the "play" button (top right of interface) to preview your mockup.
Click the "stop" button to stop preview mode and return to editing.
Sharing your mockup
Play your mockup and on the left side of the sreen you will see the different methods to share your mobile mockup with collaborators.
ScanScan a QR code with QR reader app to test mockups on a mobile device.
Web linkCopy the link and share your mockup with anyone.
Send mockup by emailSend your mockup by email to your project collaborators (includes QR code).
Print mockupGenerate a print version of your mobile mockup, even ready to save in PDF format. Printed mockups include any page notes added while editing.
Interactive mockupExport an interactive version of your mockup, store locally on your computer, great for archiving and offline presentations. Exported as basic HTML.
Mockup screensExport your mockup screens in image format, great for documentation. Images are emailed to you directly. Exported as basic .png image format.
Screenflow exportExport a screen flow from your project as a high-resolution image, great for documentation and presentations. Image is emailed to you directly. Exported as basic .png image format.
Social shareShare your mockup with your social network for instant reaction and feedback.
Drag a page or widget to the trash area in the bottom right of the interface and the trash drop area will appear - drop the item there to delete.
Undo / redo
Use CTRL+Z to undo an action. Use CTRL+Y to redo an action. Some minor widget editing and colour changes may not be included in the undo action history.
To upload your own images click the "Choose file" button in the uploads library to browse for images on your computer and upload. Alternatively, drag the image files from your computer and drop them directly in the browser window. To delete an uploaded image, simply drag it from the library directly to the trash area.
Note on deleting images: Deleting an image will currently also delete it from all projects it is currently in. Please use with caution.
⇦ ⇨ ⇧ ⇩ (Directional keys)Nudge selected widget 1 pixel in any direction
⇦ ⇨ ⇧ ⇩ (Directional keys)Navigate around pages when zoomed in.
⇦ ⇨ ⇧ ⇩ (Directional keys)Navigate around pages in a preview
Shift + ⇦ ⇨ ⇧ ⇩ (Directional keys)Nudge selected widget 10 pixels in any direction
CTRL/CMD + DDuplicate widget selection
CTRL/CMD + CCopy widget selection
CTRL/CMD + XCut widget selection
CTRL/CMD + VPaste widget selection
DeleteDelete widget selection
BackspaceDelete widget selection
CTRL/CMD + ASelect all content while zoomed in on a page
CTRL/CMD + Left-ClickHold control and left-click to select/deselect multiple widgets
CTRL/CMD + Left-Click+resizeHold control and left-click to proportionally resize any widget
CTRL/CMD + ALT+SHIFT+0Access developer menu to reset Fluid - please use with caution
Managing your Fluid UI account
Top access the account settings menu click on your email address in the main Fluid menu. (button top right of screen) This will display the account settings and from there you can change your account type (upgrade or downgrade), change the email address associated with your account, add billing information and request assistance if you are having any difficulties.
About Fluid UI
Fluid UI is a HTML5 mobile prototyping tool. It is used for designing mobile and touch content such as mobile apps or websites or other software.
Terms of service
Third party credits
Some of the 3000 generous heroes who have contributed so much to Fluid UI during our extended private beta period pre-launch. Credits.
Feedback & support
If you have ideas about how to improve Fluid UI please share your thoughts with us.
If you require any technical support or notice a bug please check this list of known issues and visit our support forum.
Version. 1.3 © Copyright 2011-2013 Fluid Software Ltd. All rights reserved.