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
Each screen in your prototype is created out of a template.
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.
Creating a new template
Follow the steps below to create a new template for your prototype’s screen(s).
- Click on the ‘+’ button in the top left-hand corner of the Templates palette
- Give your Template a name in the dialog that appears and click “OK”
Editing a template’s content
To edit a new template:
- In the Templates palette, select the template to edit its contents
- Drag and drop UI elements into it
- 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.
Changing the default template
To set a template as the default template:
- Go to the Templates palette
- Select the template you want to set as the default template
- 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.
You can deactivate this by de-selecting the “Fade template components” option from the “View” main menu option.
Assigning a template to a screen
To assign a template to a screen:
- Select the relevant screen in the Outline palette
- 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.
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”.
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:
- Select “File” from the main menu and choose the “Export” option. Select “Template…”
- In the dialog that appears, select a template and export location. Click “OK” to export the template.
Importing a template
- To import a template, choose “Import” from the main menu.
- In the dialog that appears, browse your folders to find the template. Click “OK” to import it.
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.
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.
Creating a master
To create a master:
- Go to the Masters palette
- Click the ‘+’ button and give your master a name
Drag widgets to the gray canvas. You can make them interactive by adding events.
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”.
Exporting a master
As with templates, you can export your masters to other prototypes and distribute them with other users.
To export a master:
- Select “File” from the main menu and choose the “Export” option. Select “Master…”
- In the dialog that appears, select a template and export location. Click “OK” to export the master.
Importing a master
- To import a master, choose “Import” from the main menu.
- In the dialog that appears, browse your folders to find the master. Click “OK” to import it.
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.
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