Re-use content using Templates

The template system is a very useful tool for creating prototypes quickly and applying global changes. It centralizes the content and the interactions shared by several screens. It also defines the default style for each widget (colors, border types, fonts, etc.) for the screens that use that template.

templates

In the above illustration, the header and the side navigation bar are the same on all screens. If you would like to prototype it with Justinmind Prototyper, we recommend that you create the header and the side navigation bar on a template, and draw the other content on the screens of the prototype.

The Templates tab contains all the templates of the prototype. Click on them to access the content. You can work on a template as if it in a screen. The widgets and even the events that you incorporate in a template are shared among all the screen that use that template.

Keep in mind that the default template is applied to all new screens. The default screen is marked with an arrow icon in the Templates tab

  • To create a template, click on the “+” button of the Templates tab.
  • To assign a template to a screen, click on that screen in the list of screens, go to the Properties tab and change it there.

You can define the default styles for the widgets in two ways:

  • Right click on top of the template and click on Default Styles.
  • Alternatively, you can choose a widget of the screen, go to the Properties tab and click on the button at the top of that tab called ‘Assign as default style’.

You can export your templates from one prototype to another. This way, applying your corporate image will be quicker and easier than ever.

An example of how to use templates: Navigation between screens using tabs:

  • Draw all the tabs in a template. Draw them all with a style that makes them look as they are not selected. Then drag each tab to the screen you want it to navigate to.
  • On each screen, and over the elements in the template, draw a tab with style ‘selected’ over the one that matches that screen.
  • Click on the Simulate button and verify the result.

Check this section in the user’s guide if you want further information about how the templates work.

Leave a reply