Justinmind

SUPPORT

Learn how to prototype web and mobile apps

UI elements for your interactive prototypes and wireframes

Build interactive prototypes and wireframes in no time with Justinmind’s pre-built UI kits (or “widgets”). Justinmind’s widgets are pre-made UI elements, icons and libraries that you can use in your prototypes and wireframes to help build up your designs. 

In Justinmind editor, the panel on the left contains all the default built-in UI elements you can add to the screens of your wireframes and prototypes, common to all devices. Depending on the type of prototype you’re creating, other UI kits may appear (i.e. if you create an iPad prototype, the iOS UI kit will appear under the basic widgets on the left of the editor). Each prototype stores the widget libraries that were used the last time it was opened, which you will see in the left panel.

Justinmind’s UI elements are the primary building blocks you need to create your designs, and most of them are already interactive. From the widgets palette, you can filter the UI elements by name. Just introduce a text and the list will show only the widgets that have a name matching the one written. Drag and drop the UI elements you want to the canvas. Once inside the canvas, you can re-size and move them to fit your design. In order to move a widget, select it and drag it to the desired destination; you can also move it using the arrow keys (holding down the SHIFT key will move the element faster). Then simply click ‘Simulate to see them in action in your interactive wireframes.

Justinmind allows you to copy and paste UI elements within the same screen or onto other screens. You can use the options in the Edit menu or the usual keyboard shortcuts of “Ctrl+C” (copy) and “Ctrl+V” (paste). To duplicate elements, you can also drag them to the desired position by holding down the “Ctrl” key or with “Ctrl+D”.

To reuse an element style and apply it to other UI elements, select the ‘Copy Style’ tool  that can be found in the Style toolbar. When you copy the style from one element to another, the target element will receive all possible styles from the source. There are some formatting attributes that will never be copied: position, size and layout.

The Basic widgets are UI elements that are commonly found in all devices, and are pre-loaded in the side panel on the left-hand side of the Justinmind editor. They include: Lines and Shapes, Forms and Inputs, Navigation UI elements, Dynamic Content UI elements, Special Components.

The UI elements located in the first group of the widgets panel are the most commonly used ones:

most-common-ui-elements

  • Text: A single line text element. It is typically used as a caption holding a text with a single style.
  • Paragraph: This widget provides a multiple text line box whose content can be fully customized. It can define different font styles for different parts of its contained text.

To edit the text in both widgets, double-click on them, make the desired changes to the text and press Return or click outside the widget to save. To cancel edition without applying changes press Escape. You can also select the widget and change its default text in the Properties panel.

If you want to edit the style of the paragraph widget, double-click on it, select the text range you want to edit using the cursor, and make your style changes using the Text section of the Properties panel or the top main toolbar. 

  • Image: Allows you to insert image files in your prototype. You just need to drag the element to the screen and double click on it to upload the desired image from your computer. You can also add an image from the Properties tab, by selecting the option ‘Select an image file’.

  • Button: An element shaped as a common button that holds a single line of text. The edition of its text works as for the Text and Paragraph.
  • Text Table: The Text Table widget is used to organize text in rows and columns. It is made of cells and each cell behaves as a Paragraph widget, with the same properties. When a Text Table is created, it has three rows and three columns be default.

    down-pointing-arrow

To select a row or column, click on the left edge of the row/top edge of the column when the cursor displays a right pointing arrow or a down pointing arrow. You can also right-click on a cell in the desired row/column and select the option Select Row in the menu, or select a cell in the desired row and select the option Select Row in the Table menu.

To edit a cell text, double-click on a cell to start editing. Make the desired changes to the text, click outside the widget to apply the changes or press the TAB key to start editing the next cell. To cancel the change, press Escape. You can also select the cell and change its default text in the Properties panel.

To edit a cell text’s style, double-click on a cell to start editing. Select the text range you want to edit using the cursor, make your style changes using the Text section of the Properties panel or use the top main toolbar. Apply the changes clicking outside the cell or cancel them, pressing Escape.

To insert rows and columns, select the table widget and click on New Row or New Column in the Table menu, or right-click on the table and select New Row or New Column in the menu. You can also select the table widget and change its rows/columns number in the Properties panel.

New rows will be added under the last row and new columns on the right of the last column.

New rows and columns can also be inserted between other rows or columns. To insert a new row between two other rows, select a table row and click on Insert Row Below or Insert Row Above in the Table menu, or right-click on a table row or a table cell and select Insert Row Below or Insert Row Above in the menu.

To insert a new column between two other columns, select a table column and click on Insert Column Right or Insert Column Left in the Table menu, or right-click on a table column or a table cell and select Insert Column Right or Insert Column Left in the menu.

To remove cell content, delete the text of a cell or group of cells by selecting them and pressing the Delete key.

To remove rows and columns, delete a column or row by selecting it and then clicking on the option Delete in the menu.

To resize rows and columns, column width and row height can be easily changed dragging their borders.

change-column-width

To resize a row, drag its lower border when the cursor displays a vertical double-headed arrow. To resize a column, drag its right border when the cursor displays a horizontal double-headed arrow.

Individual cells can also be resized. Changing the size of a cell will automatically modify the size of its columns and rows to fit the new cell size. To resize a cell, select the table cell, drag its sizing handles located at the bottom right-hand corner, right edge or bottom edge, and select the table cell specifying its size in the Properties panel.

Any table cell can be split into two parts of equal size. They can be split horizontally or vertically. If a cell is split vertically, the cell is divided into different cells with half the width but same height. If a cell is split horizontally, the cell is divided in two different cells with half the height but same width.

To split a cell, right-click on one table cell and select Split Horizontally or Split Vertically in the menu. Then select a table cell and select Split Horizontally or Split Vertically in the Table menu.

A set of contiguous cells can be merged into one cell. When a group of cells is merged, their content is also merged into the new cell. To merge cells, first select them and make sure they all share at least one edge, then right-click on any of the selected cells and click on Merge Cells in the menu. Select Merge Cells in the Table menu.

You can copy the content of a row, column or individual cells to another part of the table using the common copy and paste actions. To copy a set of cells, first select them using the Control key if necessary and select copy from the menu or Edit menu. Then select the target row, column or cell and select Paste.

You can, alternatively, paste the cells outside a table widget. Then a new table will be created using the copied cells content and size.

Align UI Elements Relative to Each Other

When you align UI elements relative to each other, one of the elements remains stationary. For example, clicking ‘Align Left’ aligns the left edges of all selected widgets with the left edge of the previously selected widget. To align UI elements, select at least two of them, click on ‘Edit’ in the Main Menu and select one of the following options:

  • Align left
  • Align center
  • Align right
  • Align top
  • Align middle
  • Align bottom

Note: to select multiple widgets, you need to press and hold SHIFT or CTRL while you click the shapes, or select all widgets in their entirety. Dragging over only a part of a widget won’t select it. 

Distribute UI elements evenly

In order to distribute widgets evenly (both horizontally or vertically), you need to select at least three different widgets in the canvas. Then select one of the following options in the toolbar:

  • Distribute vertically
  • Distribute horizontally

Match UI elements height, width, and size

In order to match the height, width or size of a group of widgets, you need to select at least two widgets in the canvas, and then select one of the following options in the toolbar:

  • Match height
  • Match width
  • Match size

Change the order of UI elements

Widgets in the canvas are sometimes stacked on top of each other. To move a widget in front of or behind another, right-click on the widget to open its menu and go to the ‘Order’ menu. Then select the option:

  • Bring to front
  • Send to back
  • Move forwards
  • Move backwards

This option can also be performed in the Outline tab, by right clicking on the corresponding widget.

Lock or Unlock UI elements

Widgets can be ‘locked’ so that they can’t be moved or resized. To lock or unlock a widget, right-click on the widget and select ‘Lock’ or ‘Unlock’. You will also find these options enabled in the top toolbar or the Properties panel once the widget is selected.

Rotate UI elements

Some widgets can be rotated. The angle of the widget can be changed in the Properties panel, or using the handle that appears when a rotable component is selected in the canvas. The following components can be rotated: Text, Image, Paragraph, Rectangle, Ellipse, Triangle, Lines, Button, Hotspot, Summary and Index widgets.

Next tutorial > How to group UI elements

2 Comments

  1. Daria

    February 8, 2015 at 10:13 pm

    Hi,
    i need to know how to create active button, so when i’m online, i push on it and it change color. I was watching your tutorial videos, but everything is not clear.

    Sincerely

    • Lidia Rodriguez

      February 27, 2015 at 11:50 am

      Select the button and with an on-click or on-tap event, select the button and ‘Change style’ action. Choose background and the new desired color. Push ok, and that’s all.