Defining the Master Template

Most web applications use a common layout for their pages—for example, a layout which consists of a header, a footer, or a sidebar which are common for each page, and content which varies by page.

App Layouts

Getting Started

When application is created in the Studio its master template is automatically populated with default template. In this case you do not need to cut the master template. In this case since the responsive master template is defined, the Define button rendered next to master template item is hidden.

When the application is created by Sketch plugin and you import it in Studio, in order to create a responsive web application, you have to mark the content area and define the master template. When you open the application for the first time, a message which prompts you to do so appears.

Define Layout

To define and cut the master template:

  1. Switch into the cutting master template mode of the Studio by clicking the Define button to the right of the MASTER TEMPLATE item.

    Select Content Area

  2. Select your content area by resizing the rendered rectangle and click Save. As a result, all components that are outside the selected area will be moved to the master template view and marked as layout components. This means that you will not be able to configure and position them in views and each view renders the master template area in grey.

    Master template

Editing the Master Template

You can edit the master template at any time:

  1. Click the Edit button to the right of the MASTER TEMPLATE item.
  2. Adjust the content area by performing the actions from the previous Getting Started section.
In this article
Not finding the help you need?