Grid

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.

Snapping

Snapping

fluid ui snapping controls

Find the controls for snapping and grid in view settings accessible from the page menu.

Groups

Selecting multiple widgets

Start dragging on the page frame (the dark grey area around the selected page) or on an area that does not already contain a widget other than the background.

All widgets that are contained in the blue box after dragging will be selected.

You can now align, copy, paste and group everything inside the selection.

Creating groups

Use the group icon to group or ungroup selections of widgets.

The group/ungroup icon will become available once you have selected more than one widget.

Groups will be clearly indicated by a border when selected.

In order to edit widgets in a group, they must be ungrouped first.

Handy keyboard shortcuts for grouping and selecting

  • Ctrl + A (Cmd + A) will select all the widgets on the focused page.
  • Holding down Ctrl (Cmd) while clicking on a widget will add or remove that widget from your selection.
  • Cut = control + X
  • Copy = control + C
  • Paste = control + V
  • Delete = control + delete
  • Clone/duplicate = control + D

Symbols

Symbols will speed up your design process for every project.

  • Reusable designs are stored in your symbol library.
  • Save whole screens and use them in other projects.
  • Save your customised widgets and cards ready for quick access when you need to mock up a similar project.
  • To delete a symbol, drag it to the red trash bin in the bottom right of the screen.

Saved symbol library in Fluid UI
Tip:
You can access all of your saved symbols from any project.

Layers

Select any widget or widget group and use the arrows to send them to front or back.

Send to Front - places the selected widget behind all others on the page.

Send to Back - places the selected widget in front of all others on the page.

Send Backwards - moves a widget behind the previous widget.

Send Forwards - moves a widget in front of the one above.

You can change the transparency of widgets to get some cool effects.