×

Fixed headers and footers in Studio

With Studio, it’s possible to create fixed headers and footers for your prototypes.

Depending on your layout and desired functionality for scrolling, the specific instructions may change. However, the following example is one possibility for creating a fixed header.

Creating a fixed header or footer

To create a fixed header on a mobile prototype:

  1. Select your artboard and, in the inspector panel on the right, set Scrolling to Vertical.
    set-scrolling.png

  2. Order the header layer before other layers on the artboard.
    header-layer.png

  3. Select the header layer and, at the top right of the inspector panel, click the Fix Position icon (fix-position-icon.png). This will fix the header layer to its current position.
  4. Pin the header layer vertically to the Top, and horizontally to the Left & Right. This is helpful if you need to resize the artboard later.
    pinning.png

After completing the steps above, you can preview the artboard to see how the header remains fixed.

fixed-header.gif

Creating a fixed footer is very similar. However, instead of pinning the footer layer vertically to the top, you would pin it vertically to the Bottom and horizontally to the Left & Right.

pinning-footer.png

Scroll tutorial

For more practice with fixed headers, open Studio and navigate to the Tutorials section of the welcome screen. Click the Scroll tutorial to begin.

scroll-tutorial.png


Getting Started: Studio (
)

Fixed headers and footers in Studio

Prev