Balsamiq

Toggle navigation

Adding and arranging UI controls

Adding UI controls

To add UI controls to your wireframe, double-click or drag a control in the UI Library or type a keyword into the Quick Add tool.

You can also duplicate controls already on the canvas using copy and paste or the duplicate command (CTRL/⌘+D). ALT/OPTION+ drag will also duplicate controls and allow you to place them using your mouse.

Selecting UI controls

There are a few different ways to select UI controls.

  • Clicking on a UI control selects it
  • Dragging a rectangle which encloses many UI controls selects them
  • SHIFT+ CLICK on a control adds it to the selection
  • CTRL/⌘+ CLICK on a selected control removes it from the selection
  • Hold ALT to ignore items behind the mouse and drag-select

When you select a control, you'll see it enclosed in a blue rectangle with handles at the edges and corners.

To add a control that is behind another control to the selection, right-click on the top control and hold down SHIFT to bring up a menu that allows you to add controls behind it.

Moving UI controls

Once you have selected one or more UI controls, there are a few different ways to move it on the canvas.

  • You can drag it with your mouse (hold down SHIFT to maintain the original horizontal or vertical position)
  • You can "nudge it" one pixel at a time with your keyboard's ↑↓←→ keys
  • You can move it with bigger steps (10 pixels) by holding down SHIFT and using your keyboard's ↑↓←→ keys
  • You can move controls to be aligned in one direction by using the align tools shown below

Snapping and smart guides

When you move objects on the canvas, the editor tries to suggest alignment relative to other objects on the canvas using smart guides. The editor also shows when controls are equally-spaced and equally-sized.

This makes alignment easier and makes your wireframes generally look neater.

gif

For controls that behave as containers (e.g. Browser Window, iPhone & iPad, Rectangle, and Tabs) you can snap to a grid of columns inside each control. You can choose 1, 2, 3, 4, 6, 8, or 12 columns. Selecting Automatic will choose the appropriate number of columns based on the size of the control.

You can also specify an Outside margin to center the columns inside the control.

Resizing UI controls

Resizing the selected controls is easy. You can just grab the handle on any edge or corner of the selection rectangle and drag it.

If you want to constrain proportions while dragging from a corner, hold SHIFT while dragging.

You can also use the keyboard to resize selected controls. CTRL/⌘+ALT+↑↓←→ to resize in 1px increments, CTRL/⌘+ALT+SHIFT+↑↓←→ for 10px increments.

Another way to resize some controls to their "natural size" is to use the Auto-Size function found in the Property Inspector.

To resize one or more controls to match the size of another (to be the same width or height), you can use the "Resize To..." function in the Edit menu.

Select multiple controls and use this option to size all the selected controls to match the narrowest, widest, shortest, or tallest control in the selection.

Aligning UI controls

You can align and distribute (space out) controls by selecting multiple controls and right-clicking to bring up the menu shown below.

The same options are available in the Property Inspector when multiple controls are selected.

Layering UI controls

You can layer controls as if they were pieces of paper on the wireframe canvas. To do so, you select the controls you want to layer and select one of four layering commands available via the right-click menu or Property Inspector: Bring to Front, Bring Forward, Send Backward, and Send to Back. Keyboard shortcuts are also available.

Locking UI controls

Locking a control's position on the canvas can be useful for background controls that you want to stay in place. You can lock a control by selecting it and choosing "Lock (control name)" from the context menu, or from the Edit menu in the Toolbar.

As a result, the control's position will be locked and you won't be able to select the control.

However, you can still select it by pressing CTRL/⌘ while clicking on it. This allows you to edit the control (by pressing ENTER or double-clicking) or change its properties from the Property Inspector.

To unlock a control, right-click on it when your mouse cursor is over it or use the floating dialog that will appear if you click on the control.

Deleting UI controls

To remove some UI controls from the wireframe canvas, select them and hit the DELETE key. Alternatively you can select "Delete" from the Edit menu.

Rotating UI controls

Some of the UI controls can be rotated via the Property Inspector (the label, image, and icon controls, for example), but many can't. If you are used to generic drawing tools this might be surprising. This limitation is intentional, and not due to programming complexity (it's not hard to add technically).

We don't support rotating all controls because we believe that in 90% of cases, it is not needed in wireframes. In fact, adding the ability to rotate any control will likely result in wireframes that are very hard if not impossible to implement by the development team.

If you feel that you need to rotate any other control, let us know and we'll discuss whether to add it together. A workaround would be to rotate a control in a drawing application and then import it as an image.

Grouping UI controls

Sometimes you might want to group some controls to better align them or move them all at once. To group a set of controls, select them and hit CTRL/⌘+G on your keyboard or use the Group command in the Edit menu (Top Bar). The controls will change color to purple to indicate that they are grouped. Once grouped, the controls will behave as one when moving or aligning. To ungroup controls, press CTRL/⌘+SHIFT+G on your keyboard or use the Ungroup command in the Edit menu.

You can double-click on a group to "enter it" and edit its contents. A small floating breadcrumb bar will indicate that you are editing a group and allow you to navigate back out of the group (you can also use ESC). Groups can be nested, as shown below.

You can give a group a name via the Property Inspector. This can be helpful when you have a lot of groups and need to "know where you are" when you edit their contents. Naming groups is also useful when creating Symbols.

Cropping groups and images

It is possible to crop (mask) a group of controls to only show a selected portion of it. When a group is selected, a crop icon will show in the Property Inspector. Click on it to edit the visible area of the group.

You can also use the crop tool to create image sprites, useful to create button state variants, for example.

Drawing basic controls

There are a few controls that you can add to the canvas by "drawing" them with your mouse while holding down a letter key.

gif

Here is the list of these controls and their related letter key:

  • R for Rectangle
  • T for Squiggly Block of text
  • Y for Squiggly Line of text
  • I for Image
  • A for Arrow

After you've added these controls, you can convert them to other controls by using the transform menu.

Drawing basic controls on mobile

The controls mentioned in the section above can also be added to the canvas by "drawing" them on your mobile device, using your finger (or pencil) and a keyboard.

If you don't have a keyboard at hand, that's ok too! You can use the Quick Draw icon available in the Toolbar to enable the feature.

The Quick Draw floating toolbar will appear, allowing you to hold one of the controls with one finger and draw with your other hand, as shown below.

gif