Fix elements to your artboards
From navigation bars to widgets, you’ve likely designed an element that you wish could remain in place as you’re scrolling through your artboards. Let me quickly show you how to achieve this in Adobe XD.
WHAT YOU’LL LEARN IN THIS VIDEO
Create scrollable artboards
Fixing elements in place
+ VIEW TRANSCRIPT
Hey, everyone – I’m Howard Pinsky – Senior XD Evangelist at Adobe. From navigation bars to widgets, you’ve likely designed an element that you wish could remain in place as you’re scrolling through your artboards. Let me quickly show you how to achieve this in Adobe XD.
In this first example, we have a mobile app that I first want to enable scrolling on, so I’ll select the artboard and drag the bottom handle down until all my content is visible. I’ll also leave a bit of extra room for the navigation bar. When an artboard is enlarged vertically, as long as scrolling is enabled to the right, the blue viewport handle will let you know what will be visible immediately and what will be visible upon scrolling. Now when I preview my prototype, I can scroll down the screen, but I certainly don’t want my nav floating in space. To fix this, I simply need to select the group, symbol, or layers that makes up this element, then tick on the Fix position when scrolling checkbox to the right. This time when I scroll down my artboard while previewing, the nav bar stays nicely in place.
Let’s look at one more. On this landing page, I may want a few elements to stay fixed, and to quickly accomplish that, I can hold down shift then select both the top nav bar and the chat widget, and press that same checkbox as we did in the first example. As expected, both elements are fixed as I scroll down the page.
But what if I also wanted the background image at the top to also remain in place, allowing the content at the bottom to overlap it? To accomplish that, I’ll first want to make sure that the image is behind all the groups that will move overtop it, and that the nav bar is at the very top of the layer stack. With that done, the process is the same as before, and now when I preview one more time, I have exactly the effect I was hoping for.
And that’ll do it. Fixing elements is incredibly simple in Adobe XD. For more tips and tricks, be sure to check out my other videos, and I’ll see you soon.