The complete guide to Fluid UI - Page 1

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

Tags: Review

Article tbc.

Uploads library in Fluid UI

The complete guide to Fluid UI - Page 1

Tags: Review

Watch this video to help when setting up your project and learn about the different options that are available in the library.

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.

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

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

Other link tips

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

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.

The complete guide to Fluid UI - Page 1

Tags: Review

More about the different options available to widgets.

The complete guide to Fluid UI - Page 1

Tags: Review

Setting up gestures and transitions in your project.

How to upload your own images in Fluid UI



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

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

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

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

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

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.

The complete guide to Fluid UI - Page 1

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

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

The complete guide to Fluid UI - Page 1

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.

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.

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 - Page 1

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

The complete guide to Fluid UI - Page 1

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 - Page 1

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.