Learn how to prototype web and mobile apps

Prototype Templates Vs Masters: the differences

Justinmind’s prototyping templates and masters help you to design more efficiently. How? Well, both of these features can help you to make changes across multiple screens in your prototypes by spreading global changes, and allowing you to replicate and distribute content within your prototypes. But despite these similarities, there are some fundamental differences between them. Read on for more details.

Reusing content with prototype templates

Templates serve as the starting point for a new prototype, defining the default styles (colors, border types, fonts, etc.) in relation to the UI elements and events in a given screen. By using templates, you can easily reuse content, assets and screen design layouts for more efficient prototyping. You can work your already-built designs into new prototypes, and can define style guides or templates that will set the standards for the whole project, sharing content and behavior between screens. The widgets and the events that you include in a template are distributed among all the screens that use that specific template.

Only the screen displayed on the canvas and the corresponding template will appear as ‘active’ in the Templates tab, with a transparent appearance. This is to help visualize what’s on the screen and what’s on the template. You can deactivate this in the View menu in the main menu toolbar.

The Templates tab contains all the templates of a prototype: you can click on any of them to access its content and work on it as if on a screen. The widgets and the events that you include in a template are distributed among all the screens that use that specific template.

You can define the widgets’ default styles with templates. Learn more about this here.

Spread global changes with prototype masters

Masters are groups of components, compound widgets,  that can be reused anywhere in a prototype. You can build masters that you can use in different screens and in different projects. They are 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. Effective use of masters is key to reusing content, as they help you to save time, reduce rework and keep things consistent.

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. Note that you can create exceptions for your masters, by ‘breaking’ the master. See more on this in our Masters tutorial here.

Things to remember about templates and masters

Though both apply changes across your prototypes, a template centralizes content and events distributed by several screens, whereas a master replicates and distributes content across all of a prototype’s screens, in all instances, in order to save time and distribute global changes.

Templates are usually used for the entire screen structure. You can only can use one template in any given page, (one template for the home pages and others for sub-pages etc.). In contrast, masters are typically used to replicate elements in a prototype in other areas (toolbars, navigation menus, etc). You can use as many masters as you like in a given screen.

Both templates and masters are displayed by default in alphabetical order in their respective tabs on the right-hand side of the canvas in the user interface.


Next tutorial > Export and import contents of your prototypes