Join Tom Green for an in-depth discussion in this video Scrolling and tabs, part of UX Design Tools: Principle.
- View Offline
- [Voiceover] In this video we are going to take a look at making a scrollable interface. This is one of the first prototyping tests most people undertake. And in principle it's not that difficult to do, there are just a couple of little niggly things you have to be aware of. So I've got the preview here open, and you can see that no scrolling here. To make something scrollable, what you have to do is select the items that you wish, and these are the three cards in this little Android interface here, and you have to group them, so it must be in a group.
So the items that are gonna be scrollable must be grouped. And you can press Command G to do it, which I just did, or you can press, or click, the Group button up here. So, now I've got a group right here, and, so, if it's grouped, well, obviously, it's gonna scroll. No, it doesn't. Now, here is the next thing you have to do. You have to take the group and say, "Look, "I want to make it scroll vertically." And this is where that magic happens right here. So if you come to the vertical pop-down, there is scroll, and if I click, you can see, it scrolls.
Now, why is it not doing what it's supposed to do? The reason is that the scrolling content is the same size. So, once I basically move it up, it's pretty well said it's there. So, what we have to do is identify the scroll area. And the scroll area will be between here and the little navigation bar here. And to do that, I have to do this. Just grab this little handle at the bottom here with the group, and you gonna shrink the group, just like that. Okay, so there it is.
And you can see it's in the preview, and if I click on the preview, I can now scroll. So there you go, that is how you can scroll. Now, if you want something to go across, it's basically the same thing, only it's on the horizontal. So, just a quickly review. What you do is you select the content that you want to scroll either vertically or horizontally, group it, trim the group, or just move the bottom handle of the group, or one of the handles to the right or the left of the group, make it the width or height you wish, and then select your scroll right here, in the Properties panel, and you are good to go.
- Adding content to new artboards
- Creating your first Principle animation
- Managing the Principle timeline
- Animating with keyframes and drivers
- Using assets from Photoshop and Sketch
- Manipulating content properties
- Modifying keyframes and retiming
- Masking and cropping
- Creating transitions
- Develop an Apple Watch alert
- Create a ripple effect
- Animate button presses