Scrolling artboards

Tutorial Breakdown

Designs that exceed the size of a device’s physical screen are no problem with InVision Studio. Artboards can be made to scroll horizontally, vertically, or in both directions. Plus, a pinning option allows you to keep design elements fixed in place, making pinned header and footer elements an easy solution—regardless of their size or position on screen.

In this video, we’ll look at:

  • Making scrollable artboards
  • Pinning elements
  • Image mask parallax

Studio project file

Download this free Studio project file to follow along—step by step—with the tutorial.

New to Studio?

Download the latest version of InVision Studio to get started

Download StudioDownload InVision Studio

Transcript

When your artboard and content exceed the width or height of the device that you're previewing on, you can make that content scrollable in Studio. And the way that we do that is very, very easy. Let's head back to Studio and select one of these long artboards. On the Inspector on the right hand side, you'll see that scrolling by default is set to none. All we have to do is click and switch this to vertical in this case. You also have the choice of horizontal or both, depending on what you're trying to accomplish. With the art board set to vertical, all I have to do is go and preview it and we are rocking and rolling. The only thing is the navigation at the bottom of the screen isn't sticking to the bottom as it should. So let's take a look at how to accomplish that. Each of our screens has a navigation bar running across the bottom. And that navigation bar needs to stay at the bottom and essentially be fixed instead of scrolling with the content. So with our navigation bar selected, you'll find there's a Pin icon toward the top of the inspector to fix the position. So now with the position fixed, the last thing that we have to do is tell it where we're fixing it relative to the screen. So being that this is at the bottom of the artboard, we want it to be fixed at the bottom of the screen. So here we want to deselect the top, select the bottom. And then for the horizontal alignment, we want it to stay centered, which isn't going to necessarily translate visually in this example. But if we were to describe how this fits, we would say it fits at the bottom and it's centered up. So now let's preview again. And there we have it, it is fixed at the bottom, it is remaining centered, and our content scrolls up and down. Another cool trick with pinning elements on scrolling artboards is the ability to pin individual elements like this image to create a bit of a parallax effect. And to accomplish this, all we need to do is pin the image within a mask and leave the mask alone. So let's take a look at that. Here, you can see this image consists of three layers. We've got the tint on top that's darkening it. We've got the image itself. And then we have the mask that's containing it. Now, here, each and every object by default is going to scroll as the user scrolls up and down. But the image can be fixed in place. So with the image layer selected from the inspector, we can click on the pin to fix it in place. And now when we preview it, it remains fixed when the rest of the content scrolls. It is just that easy.

Read More
Free. Forever.

Push your craft to new heights.

InVision Studio—designed with you in mind.

Make your next screen your best one yet.

Download studio free Download studio