A Guide to Prototyping in Figma

2.4 Fixed Objects and Scrollable Areas

Fixed elements are pretty common nowadays, especially in app design. Think of a header that stays fixed on the top of the page, or of a sticky footer with some actions. Or a fab, one of those action elements that you find in material design which always stays put in the bottom-right side of the page. Well, these are very common, and also, in web design, think of a fixed header that stays right there at the top of the page, independent of scrolling. Well, Figma allows us to create fixed elements when prototyping, which is an amazing feature. So let me show you how you can do that. Let's say, for example, that we have a page, let's say this one for tickets. Right, let's say that this is a very long page, let's make it longer like this. Okay, and let's do a little presentation and see what happens. Now here, we have our prototype using an iPhone 8 device frame. And because our page is longer than the actual view port on this device, we need to scroll to see the entire content. But when you think about realism and how this would behave on a real mobile device, it doesn't work like this. Right, so for example, this status bar on top doesn't scroll along with the content, it always stayed there. And let's say, for example, that you also want some of the other elements to stay right there at the top, to be fixed. Like for example, this header here, or maybe one this button that says Continue to Payment to stay fixed at the bottom. Well, in Figma, you can do that really easily. So for example, you can select the status bar, and you go to design tab, and you select, fix position when scrolling. You check that, and two things happen, first, that layer will always stay fixed. And second, we have some changes in the layers panel here. So notice that we have two different subsections now, one says Fixed, one says Scrolls. Basically, under Fixed, we have the fixed elements, and the ones that scroll are under the Scrolls section. And also, make sure that under constraints, we have the top selected, so it's always stays fixed at the top. What else, maybe I want this navigation bar to also be fixed to the top. Well, I can simply click that again, it was moved to the Fixed subsection. And then scrolling down, I'll get this Continue to Payment button, also fixed position. But notice that the constraint or the anchor is now set to the bottom side, so it's always gonna stick to the bottom side of our frame. So once that's done, let's go ahead and hit Present. Now, when I scroll, Notice that the elements that I set to fixed stay there, no matter what scroll direction I use. And also, my Continue to Payment button stays there as well, fixed to the bottom. Now, of course, to really make this look better, you need to add some sort of white background to this section right here, so you can't really see the content that goes beneath it. And same goes for the button, you could maybe add a little bit of a white background here. But those are just details, functionality-wise, this is how you create fixed elements. Now I mentioned something else, I mentioned scrollable areas. Scrollable areas are really cool, it's a feature that really adds that next level of interaction with your prototypes. Basically, if you have a large, let's say image, or a large area with a lot of content in it, but a very small view port, you can basically scroll through the entire page, within that, or the entire image, excuse me, through that tiny view port. Think of the way you use a map on your phone. Right, the map is super big, but your phone is super small. So you pinch to zoom and you drag with your finger around, and you move to see different parts of the map. Well, this is how scrollable areas work a little. Let me show you how you can create one of those, I have an example here prepared. It's the shop frame, and inside here, you see we have this carousel section. And by default, this frame is set to clip its content. But if we uncheck this, we can see that our carousel is comprised of three different images. So we want to scroll horizontally when we get to this point, well, how do you do that? Well, a couple of steps, first of all, you need to select the layers that you want to scroll through. Select all of them, and then you need to create a frame with them, not a group, be careful, not a group, but a frame. So to do that, You would say Frame Selection. You might have a different shortcut for your operating system, for me, it's Cmd+Option or Alt+G. So I'm gonna select that, Frame Selection, and that creates a new frame. Let's call this Scrollable, you can call it whatever you want, really. And then you need to go to Prototype, and you need to select overflow behavior. You have a couple of options, horizontal scrolling, vertical scrolling, or both of them. In my case, I want to do horizontal scrolling. Now here, I get a warning that tells me, for scrolling to work on this frame, the content needs to be bigger than the frame. Currently, the content and the frame have the same height. But by selecting the frame, I can simply resize it to match the width of my main frame. So then, when I go to presentation mode, right, you see that my main frame is basically clipped by this device frame. But once I'm inside, I can scroll like this, but also, I can scroll like this using my mouse. And this is great for presenting carousels, for presenting maps, or generally large content that doesn't really fit inside an area. And as you can see or as you saw, you can do horizontal, vertical scrolling, or even both at the same time. So let's go through it one more time, what you need to do is select all of the elements that you need to go through, and then you frame them. So you do Frame Selection, you resize the frame to, for example, your main frame width. And then you select the overflow behavior, and you choose the type of scrolling that you wanna do, and that's all there is to it. That's how you can use fixed objects and scrollable areas, definitely two of the greatest features in Figma prototyping. Now, for this final lesson of this short course, I've saved the best for last. Or what I consider to be the best features, right now, in Figma prototyping. Interactions and transitions, that's coming up in the next lesson.