Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to apply global changes to your interactive prototypes with Masters

Apply global changes within your interactive prototypes with the help of Masters. This tutorial provides an introduction to masters and to how you can use them.

Masters are groups of components that can be reused anywhere in a prototype. As such, it’s an excellent way to spread global changes, because when something is changed in the master, that change takes effect in all of its instances in the prototype.

Similar to Templates, Masters are a way to replicate and share content across a prototype’s screens in order to save time and distribute global changes. In Justinmind prototypes, Masters behave in the same way as screens in the user interface. But, unlike screens, Masters can be treated as compound widgets: every change you make to a Master will be replicated in all the Master’s instances created in your prototype. In a screen or template, a Master instance is has a slightly transparent yellow color, demonstrating that the contents belongs to a Master.

Creating a Master

Create a master for your web and mobile prototypes

  1. Go to the Masters tab, click the “+” button and give the master a name.
  2. You can work and edit a master in the canvas as if it were a screen: drag widgets from the palette or define events (as long as they only act on widgets within the same master).
  3. Once you’re done editing, go back to the screen you want to apply it to, and drag and drop the Master from the Master list onto the screen. You can put it anywhere on the screen and you’ll see the content of the master within a yellowish box. If you want to edit it again, click on it in the list or double click on its instance in the canvas. Remember that all the changes you make are applied to all of its instances.
  4. If you want to make an exception with one screen, right click on the Master instance in the canvas and select ‘Break the Master‘. Now the master is just a group of components inside a dynamic panel, which you can edit as you wish.

Break the master in your web and mobile prototypes if you want to make an exception

5.  As with templates, you can export your masters to other prototypes and share them with other users. Just go to the File Menu and select the option Export > Masters.

Export your web and mobile prototypes' masters

You can create as many Master instances as you want per screen or template. To create a Master instance just drag the Master onto the canvas as with any widget from the Masters tab and drop it onto the screen/template.

Editing a Master

Master content can’t be changed whilst a screen or template is being edited. To edit the contents of a Master,  select it in the Masters tab to open it, double-click on a Master instance within your screen or template to start editing it.

If you want to change the name or description of a Master, right-click on the Master in the Masters tab and select ‘Edit’. A dialog box will appear: introduce the new name and click OK.

 

If you delete a master from the list, you delete its copies from all screens. However, you can delete a copy from a master on a screen without affecting the rest of the prototype.

Exporting Masters

To export a Master, follow these steps:

  1. Click on File->Export->Master

  2. A dialog box will appear. Select the Master you want to export from the drop-down field ‘Select Master’. Once selected, a preview of the Master will appear so that you can check that it’s the correct one.

  3. Click on the Browse button (“…”) of the ‘Export Location’ field and select the export destination in your file system as well as the name for the file.

  4. Click OK to export the selected Master or click Cancel to close the dialog without applying the changes.

Importing Masters

To import a Master previously exported follow these steps:

  1. Click on File->Import->Master…

  2. Select the ‘Import Master’ option. A new dialog will appear to select the Master file.

  3. Click on the Browse button (“…”) of the ‘Import Location’ field and select the Master file (.vcc extension) you want to import. Once selected the Master will be displayed in the same dialog so you can check it is the correct one.

  4. Click Ok to import the selected Master or click on Cancel to close the dialog without applying the changes.

Tip: You can also import a Master by drag and drop: just drag the file from your file system and drop it on the Masters panel.

Templates or Masters ?

Templates: use them to define the content shared by several screens that always appears in the same position. For example, headers, footers or the main navigation.

Masters: use the masters for the rest of the cases, e.g. content shared by several screens displayed in different positions, or elements that stay above the content of the screen at certain times. For example, drop-down navigation menus, link boxes, search engines or registration boxes.

Next tutorial > Export and import contents of your prototypes