Templates and Masters

Justinmind’s prototyping templates and masters help you to design more efficiently. Use them to:

  • Make global changes across multiple screens in your prototypes
  • Duplicate and distribute content within your prototypes

Templates

Each screen in your prototype is created out of a template.

templates masters

Templates are useful for defining the following:

  • The default styles of UI elements (e.g. colors, border styles, font family and size) in a prototype’s screens
  • The general navigation structure of each screen (e.g. navigation menus, headers and footers)
  • Common screen UI elements and events

The Templates palette is where a prototype’s template can be found. Select one to access its contents and start working with it as the foundation of a screen.

Gif-2

Creating a new template

Follow the steps below to create a new template for your prototype’s screen(s).

creating new template

  1. Click on the ‘+’ button in the top left-hand corner of the Templates palette
  2. Give your Template a name in the dialog that appears and click “OK”

Editing a template’s content

To edit a new template:

customize template content

  1. In the Templates palette, select the template to edit its contents
  2. Drag and drop UI elements into it
  3. Customize their styles in the Properties palette

Adding events to UI elements in a template

There are several ways to add interactions to the UI elements in your template:

  • Add interactions to elements within a template
  • Add multi-target events to elements within templates

You can also add interactions to UI elements associated with a template from any screen.

Learn how to create interactions in Justinmind here.

Note: all interactions defined in your template will take effect in all screens assigned to that template.

Changing the default template

To set a template as the default template:

change default template

  1. Go to the Templates palette
  2. Select the template you want to set as the default template
  3. Right click it and select the “Set as default template” from the menu

Any additional screens you create will automatically be assigned to this template.

Sharing content and interactions across several screens with templates

Templates allow you to centralize important UI elements, styles and events so that you can reuse them in different screens and maintain consistency throughout your design.

When you assign your template to a screen, the default position of each UI element in the template will remain unchanged.

A template’s UI elements will appear to be more transparent than other UI elements on the canvas by default. This is to help you differentiate between elements dragged directly to the screen and elements associated with a template.

template ui elements

You can deactivate this by de-selecting the “Fade template components” option from the “View” main menu option.

fade template components

Assigning a template to a screen

To assign a template to a screen:

assign template

  1. Select the relevant screen in the Outline palette
  2. Go to the Properties palette and choose the template you want to assign it to from the “Template” option

Defining default styles

You can define the default styles of the UI elements associated with your templates. To do so, right click on a template and select “Edit Template Style”.

A “Set Default Styles” dialog will appear. Here you can change the appearance of your template’s UI elements (e.g. dimensions, transparency and padding).

Then, drag and drop customized widgets to the canvas. Notice how their appearance reflects the changes you have made.

Note: changing the default styles of UI elements will not affect UI elements already placed in a template. To set the default style for all UI elements within a template, see the section below.

Applying template styles

Applying template styles to all UI elements within a template

To apply the default styles to all UI elements within a template: Ensure that the relevant UI elements are within the template. Right-click on the template in the Templates palette and select “Apply Template Style”.

A dialog box will appear. Here you can choose which elements you want to set the default style to and then click OK.

You’ll see that all instances of the selected UI element(s) have taken on the default style.

Applying template styles to all UI elements within a screen

To apply default styles to all elements within a screen, right click on the screen and select “Apply Template Style”.

apply template style

Setting the default style of a UI element

The default styles of a specific UI element can also be defined in the Properties palette. This enables you to make changes to an individual UI element, rather than create rules for all of their instances.

To do so, select the UI element in the template, modify if in the Properties palette and then select “Set as default style for this widget” in the top right-hand corner of the Properties palette. Go to the Screen that contains the UI element you want to apply your default style to and select the UI element.

Go to the Properties palette and select the “Apply default style to this widget” in the top right-hand corner of the Properties palette. 

Exporting a template

You can export your templates for use in other prototypes. To do so:

  1. Select “File” from the main menu and choose the “Export” option. Select “Template…”
    • export template
  2. In the dialog that appears, select a template and export location. Click “OK” to export the template.
    • export dialog

Importing a template

  1. To import a template, choose “Import” from the main menu.
    • import template
  2. In the dialog that appears, browse your folders to find the template. Click “OK” to import it.
    • import dialog

You can also import a template by drag and drop: just drag the file from your file system and drop it on the Templates palette, a screen or a template.

Gif-2

Masters

Masters are groups of UI elements that can be reused across screens and within templates in a prototype. Use them to spread global changes across all screens and/or templates in your prototype.

Content associated with a master will appear yellow in color and slightly transparent.

master content

Creating a master

To create a master:

create master

  1. Go to the Masters palette
  2. Click the ‘+’ button and give your master a name

Drag widgets to the gray canvas. You can make them interactive by adding events.

Note: as with templates, you can also add multi-target events to masters. Learn how to add events to UI elements here.

Reusing a master in screens or templates

Once you’re done editing, drag and drop the master to the screens or templates you want to apply it to. 

Changing/editing a master

If you want to edit/change your master once you’ve placed it within your screens, click on it in the Masters palette, or double click on the Master instance in the canvas.

Remember that any changes you make to a master will be applied to all of its instances throughout the prototype.

However, if you want to make an exception for a specific screen, right click on the Master instance in the canvas and select “Break the Master”. The master group will become a Dynamic Panel and you’ll be able to edit each standalone UI element as preferred.

To change the name or description of a master, right-click on the master in the Masters palette and select “Edit”. To delete a master, select “Delete”.

Note: if you delete a master, you delete all its instances from all screens. However, you can delete an instance from a screen or template without affecting the rest of the instances.

Exporting a master

As with templates, you can export your masters to other prototypes and distribute them with other users.

To export a master:

  1. Select “File” from the main menu and choose the “Export” option. Select “Master…”
    • export master
  2. In the dialog that appears, select a template and export location. Click “OK” to export the master.
    • export again

Importing a master

  1. To import a master, choose “Import” from the main menu.
    • import master
  2. In the dialog that appears, browse your folders to find the master. Click “OK” to import it.
    • import dialog

You can also import a master by drag and drop: just drag the file from your file system and drop it on the Masters palette, a screen or a template.

Grouping elements in masters

Elements grouped within a master make it easy to apply global changes to more than one element at the same time. Just right click on an element and choose the “Group in master” option to do so. Give your new Master a name and click “OK.

Templates vs masters

There are three differences between templates and masters. These are:

  • Templates are usually used to make changes to the overall screen structure, layout or general navigation. In contrast, masters are often used to replicate specific content/functional areas across a set of screens
  • The elements within a template cannot be moved around the canvas. But you can place a Master in any position you want on the screen
  • You can only can use one template in any given screen, but you can use as many masters as you like