InVision Studio tip of the week: Scrolling and Pinning
Hello mates! Charles from InVision here. You might already know me from the Twittersphere. But if not, you’ll be seeing more from me here on Medium as I start sharing some tips, tricks, and techniques for getting the most power out of Studio.
Up for today is a quick breakdown of how to create those boundless, yet super realistic prototypes with two of Studio’s features: scrolling and pinning.
When you’re working on your next design — whether that’s a new app for a client or a page for your company’s website — and you just want to be able to showcase your work as it will ultimately appear, try using scrolling. It’s easy to add scrolling to your artboards, and it’ll become one of the most frequently used steps in your design workflow.
To get started, open a Studio file with your work-in-progress artboards. Select your artboards to enable scrolling. Like this:
You’ll notice that you can set artboards to scroll vertically, horizontally, or both. Studio gives you the freedom to design how you want, so take your pick based on what’s on your plate today. Feel free to stretch your artboard to your desired scrolling width/height, as seen below.
Now, you might be working on app or website that requires a fixed header to appear throughout the experience. Once your artboard has been set to scroll, you can select the layers or element you want to fix and click the Pin icon in the upper right of the inspector panel. It’s the icon that looks like a thumbnail.
Now that we’ve got a scrolling prototype with fixed positioning, let’s see how it looks! By clicking on Studio’s preview button, you’ll experience your designs right away without ever leaving the app itself.
Pretty sweet, eh?
That’s all we’ve got for today my friends! If you haven’t yet downloaded Studio, get it here — it’s free. I’d love to see the first prototype you make with scrolling and pinning, so share it out on Twitter to #InVisionStudio once you’ve given it a go.
Some other stuff to check out:
- Take a look at our Studio Jams to see what designers like you are creating with Studio (I created one for an infinite scrolling prototype that I think you’ll love)
- Follow the InVision team over on Dribbble and see the latest concepts I created on scrolling and pinning here
- Read the next Studio tip of the week about Parallax Effects!
