Balsamiq Wireframes for Google Drive

Editing UI Controls

Once you’ve added controls to the editor canvas you can edit them by typing directly into them and by changing their properties in the properties panel on the right. Both will be described below.

Editing Properties via the Property Inspector

The Property Inspector is a panel on the right side of the application that allows you to set some common properties such as alignment, position and size as well as settings specific to certain controls (selection state, text properties, color, etc.). It is available when viewing wireframes, assets, and Symbols.

You can show and hide the Property Inspector by clicking the toggle icon above it (keyboard shortcut CTRL/+; or ALT/OPTION +ENTER). When hidden you can also show it by right-clicking a control and selecting “Properties…”.

If you have multiple controls selected it will show properties that are common to all selected controls as well as options for aligning and distributing.


Customizing Controls via Text

Many UI controls, such as Button, Label or DataGrid, have text in them. To edit the text, double-click on the control and start typing. Or, if you have the control selected, simply hit ENTER or F2 to start editing. To commit the text you typed, simply click anywhere other than the text field you typed in or hit ENTER or CTRL+ENTER. If you want to discard the text changes you just made, hit ESC.

Some controls use certain characters as separators. For instance, to create multiple tabs in a tabs bar, you separate them with a comma.

Or, a space character separates tags in a Tag Cloud control. Some other controls, like the Tree Pane, use other characters altogether. In such cases the default text for the control includes explanations on how to use it.

When editing text in a Label or Paragraph control you will see a small number in the lower-right corner of the editing box. This is the number of characters, which can be useful for copywriting or other purposes.

Basic Formatting

Text Style

You can use the following notation to format only certain parts of your control’s text.

  • for italic, use _this notation_
  • for a link, use [this notation]
  • for bold, use *this notation*
  • for disabled, use -this notation-
  • for underlined, use &this notation&
  • for strikethrough, use ~this notation~
  • for color, use {color:#FF0000}this notation{color}.
  • for font size, use {size:16}this notation{size}

All of the above syntax works around words separated by white spaces, and underline will work within words.

Notes:
1. The #FF0000 above is the color in HEX form, just like HTML. The macro will work with or without the pound sign. You can also use certain color names (green, yellow, etc.) which you can find by moving your mouse over the colors in the color palette in the Property Inspector.
2. See the next section for how to turn [linked text] into functioning links to websites or other wireframes.
3. This formatting syntax also works for text entered into the Notes panel except italic and strikethrough.

Here’s a screenshot of what the above text looks like in a Paragraph control, for instance:

The shortcuts will work almost everywhere where it makes sense, and you can combine them, so to make an italic link use [_this_] or _[this]_.

Some controls like Paragraph or Label allow you to “unbold” the text via the Property Inspector panel. If you do so, the words you *bolded* will stay bold. A few controls use bold text by default, so bolding text within those controls won’t make a difference.

If you want to show these special formatting characters as actual text, you can escape the *, _, -, [ and ] characters with \*, \_, \-, \[ and \], so if you want to write “this [is] some text” and don’t want the “is” to become a link, just type “this \[is\] some text”.

Line Breaks

Most controls allow you to insert a line break to wrap text from one line to the next. You can do this by writing \r in front of the text you want to start on a new line. See the example below where a line break is used in the second item in a Radio Button control.

Bulleted Lists

In a paragraph control, you can create a bulleted list by preceding text with either a hyphen or an asterisk followed by a space.

* item 1
* item 2
- item 3
- item 4

If you are using the link notation above (e.g., [this is a link]), you can turn link-formatted text into actual links using markdown syntax.

To do this, add the link destination in parentheses immediately after the link text. The link destination can be a URL or the name of another mockup in the same folder. All the following formats are valid.

Web addresses:

[Google Home Page](google.com)
[Google Home Page](www.google.com)
[Google Home Page](http://www.google.com)
[Google Home Page](https://google.com)

Wireframes in the same project:

[Features Page](features)

Adding links in this way will cause them to show up in the Property Inspector as well, as shown below.

This text

results in

You can link specific strings of text as well as the whole control.

Note: If the whole control is linked, text links will be disabled. If the whole control is subsequently unlinked, the previous text links will return.

More Macros

Lorem

Type lorem in a Paragraph or Text Area to use our Lorem Ipsum generator.

gif

{Mockup-Name}

Type {mockup-name} (all lower-case) in a Label, Text, Title or Subtitle control to show the current mockup name.

Placeholder Text

Another option for creating placeholder text, besides the Lorem Ipsum text generator, is to use the Line of Text and Block of Text controls in the UI Library.

Note: Read about drawing these controls directly on the canvas to learn how to add them really quickly.

You can convert them to real text at any time by editing them and entering some text or simply by double-clicking each control, as shown below.

gif


Transforming Control Types

Many controls can be converted into other controls. This can be useful when you already have content in your wireframes but want to use a different control type without re-typing the content (changing a text input to a combo box, for example).

Just click on a control and open the context menu next to the control name in the Property Inspector to see which control types the selected control can be transformed to. Select the control you want to convert it to or use the search to look for it.

You can transform controls quickly using the shortcut CTRL+T to bring up the transform menu in the center of the canvas.

See the video below for a demonstration.


Advanced Controls (Data Grid, Sitemap, Tree Pane)

Some controls have more powerful text editing capabilities that are worth describing in more detail.

The Data Grid (Table) Control

The Data Grid control functions like many other text-based controls. It uses commas as column separators and new lines as rows. A basic table with three columns and two rows would look like this:

First Name, Last Name, Email Address
firstname, lastname, email@email.com

You can choose whether to show the first row as a header row in the Property Inspector, as well as specifying the row height, row colors, and grid lines.

Text in the Data Grid can be formatted as bold, italic, etc. using the same syntax as other text controls.

Column Width Options

Balsamiq Wireframes lets you specify individual width and alignment options for each Data Grid column.

Here’s a quick video showing how to do this:

Here are the details for creating column widths:

  • You have to add a special line of text as the last line of text in your table, and it has to be wrapped by { } curly brackets
  • For each column, use 0 if you want the column to be as small as possible to fit the text in that column, or a number
  • Numbers specify the relative size of columns, so {2,1} means “make the first column twice as big as the second one in this two-column
    grid. Or {70,20,10} means “in this 3-column grid, make the 1st column 70%, the 2nd 20% and the 3rd 10% of the width of the whole table.
  • You can combine numbers and zeros, e.g., {1,0,4}
  • If you want to align column individually, add either L, C or R right after a number, like so: {0R,2L,1}, which means “in this 3 column grid, make the 1st column as small as possible and always align it to the right, the second twice as big as the third and always align it left, and use the Data Grid’s alignment (from the property inspector) to decide how to align the 3rd column”.

Using Icons and Selection Controls in a Data Grid

Data Grid supports sort icons in headers using the following text:

  • Ascending: ^
  • Descending: v

Data Grids support a single checkbox or radio button in a table cell using the following text:

  • Checkbox: [] or [ ]
  • Selected checkbox: [x] or [v] or [o] or [*] or [X] or [V] or [O]
  • Indeterminate checkbox: [-]
  • Radio button: () or ( )
  • Selected radio button: (x) or (v) or (o) or (*) or (X) or (V) or (O)
  • Indeterminate radio button: (-)

Creating Line Returns in a Data Grid

Sometimes you want to create line returns in a table cell. To do this, you can use “\r” to create a line return.

The code example below would print on two lines.

Name\r(job title)

Pasting Data from Excel

Some people like to prepare tables in a spreadsheet application like Excel. You can copy and paste a range of cells directly from Excel into the Data Grid/Table component. Just copy/paste and it will just work. It also works in the opposite direction from Balsamiq Wireframes to Excel.

Note: If you have commas in your cells, you will have to escape them with a backslash like this: 1\,000\,000

The component recognizes both commas and tabs as delimiters. Anything else should be populated into cells.

The Site Map Control

You can create simple site maps from a text outline using the Site Map control.

Edit the Site Map control by double-clicking or selecting it and pressing ENTER. Edit the outline to create parent-child relationships. Each line represents a box (or page/node) in your sitemap. Use hyphens to indent child boxes beneath a parent. Here’s an example:

Home
- Products
-- Product 1
-- Product 2
- About Us\rCompany
- Support
- Blog

Using the Property Inspector, you can add links to the nodes in the map and change the text properties and orientation of the map (vertical or horizontal).

This is what the outline above looks like in vertical orientation (default):

…and in horizontal orientation:

Generating Site Maps Automatically

Next to the options for changing the orientation in the Property Inspector is a button that allows you to automatically populate a site map based on the order and structure of your wireframes in the Navigator Panel.

Each time you click the “Populate from Project” project the site map will be updated to reflect the current project structure.

If you are using a parent-child hierarchy, child wireframes will be shown as child nodes in the site map, as shown below.

Links will be added to each node in the site map to the corresponding wireframe in your project.

Notes and Options

  • Single Tree Support: Site Map expects the first line to be the top-most parent, and only one of these can exist because it only makes a single tree. If you want to make multiple trees, just add more Site Map controls.
  • Multi-Line Text: You can use \r to create line returns on text in a box like this: About\rUs
  • You can’t resize Site Maps, but if you are unable to view the entire map on your canvas you can try changing the orientation or showing one of the nodes expanded in a separate Site Map, as shown below.

The Tree Pane

The Tree Pane control allows you to create a hierarchical list of objects, similar to what you would see in a file explorer or vertical navigation panel.

You can show common icons next to items in the list, such as folders, files, and other types of expand/collapse symbols.

Double-click to edit the text and you will see how to use it (“f” for closed folder, “F” for open folder, etc.).

Note: Make sure to add a space between the icon indicator and the text after it (.e.g. “F folder name”, not “Ffolder name”).

To indent items, use a space or dot (“.”) for each level in the hierarchy you want to indent to.



Edit this page