Rigonix Game UI Builder

Align, distribute, group and layers

Guides, alignment, smart duplicate, groups, locking and hiding.

Neat lines and even spacing make a UI look professional. These tools do the measuring for you.

Guides and snapping

While you drag an element, pink lines appear when it lines up with another element or with the middle of the screen. Let go on the line and it is perfectly aligned. Turn these on and off with Guides in the toolbar.

Grid shows a grid on the canvas and Snap makes elements jump to it.

Align and distribute

Select two or more elements (hold Shift and click). The right panel shows Align & Distribute, and align buttons appear in the toolbar.

  • Align left, centre or right, and top, middle or bottom: lines them up.
  • Distribute: makes the gaps between them equal.

With a single element selected, Quick Align in Properties lines it up with the screen: centred, at the top, at the bottom and so on.

Smart duplicate

Need a column of buttons with the same gap? Duplicate one button (Ctrl D), drag the copy to where the next one goes, then press Ctrl D again. Each new copy keeps the same distance. Three key presses give you a perfect menu.

Groups

Groups keep related elements together, such as a card with its title and buttons.

  • Make a group: select the elements and click Group Selected in the Layers panel.
  • Select several groups: click one group, then hold Shift and click elements of other groups on the canvas (or Shift/Ctrl + click the groups in Layers). Shift + click a selected group again to take it out of the selection.
  • Ungroup: select the group and click Ungroup.
  • Rename, move to another group or remove from a group: right-click in Layers.

Groups can be shown, hidden and animated as one, and turned into popups. In Unity each group becomes a parent object.

Layers: lock and hide

In the Layers panel you can:

  • Drag layers up and down to change what is in front.
  • Lock an element so you can't move it by accident (handy for backgrounds).
  • Hide an element while you design. Hidden elements are also hidden in the game until an action shows them.

Exact numbers

For pixel-perfect work, type numbers in Transform: X, Y, Width, Height and Rotation. Arrow keys move the selection by 1 pixel, and by 10 with Shift.