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.
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.
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.
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.
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.
Widgets can be grouped. Widgets added from your save patterns library will be grouped by default.
See how to upload your own images.
Select your widget(s) and press delete (backspace on Mac), or click delete on the widget menu or drag them to the trash.
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.
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.
