[[ rootSection.name ]]
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. The following example is just one possibility for creating a fixed header.
Creating a fixed header or footer
To create a fixed header on a mobile prototype:
- Select your artboard and, in the right-hand inspector panel, set Scrolling to Vertical.
- In the left-hand layers panel, order the header layer before other layers on the artboard.
- Select the header layer and, at the top right of the inspector panel, click the Fix Position when Scrolling icon (
). This will fix the header layer to its current position. - 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.
After completing these steps, you can preview the artboard to see how the header remains fixed.
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.
Scrolling tutorial
For more practice with fixed headers, check out the Studio tutorial. To access the tutorial:
- Open Studio.
- In the left-hand panel of the launcher window, click Examples & Tutorials.
- Scroll to the Tutorials section and double-click the file Scrolling Within Artboards.
If Studio is already open, you can access the tutorial by navigating to File > Examples & Tutorials > Scrolling Within Artboards.
