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.

Fluid UI prototyping 101

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

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.

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.

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.

Editing widgets in detail

Tags: Review
More about the different options available to widgets.

Gestures and transitions

Tags: Review

Setting up gestures and transitions in your project.

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.

Managing projects

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

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 also great for when you want to send a version to a client but need to keep working on it in the mean time.

Share a project

  • Share a project to someone else’s account, they can now view the project in their own ‘shared projects’.

Manage project settings

Delete a project

  • Delete entire projects that you’re finished with.
  • Remember if you delete a project by accident it is still accessible by using the deleted projects filter.

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.

Managing projects and versions

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.

Uploading

Tags: Review

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

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.

Hotspots

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

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

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

Usually you would use a button widget to link to the next page, here you will be using an image of a button with an invisible link area over it. This will link to the next page. It is 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 in the normal way.

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.

Table widgets

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.

The Add Segment and Remove Segment options let you change the number of rows in the widget by adding or deleting rows.

Click once on the widget to select the whole thing and click another time to select the segment you want to work on.

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.

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.