Working with widgets

Tags: Documentation | Prototyping | 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.

More articles for Documentation | Prototyping | Widgets

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.

Hotspots

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.

Fluid UI introductory tutorial

Learn how to make your first Fluid UI prototype with this introductory tutorial.

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.

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.

Hotspots

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.