By Dani Beaumont
Finally Adobe XD Design elements can be set to a fixed position,allowing you to represent content like headers and footers on a scrolling design. Let me show you what I mean.
I'm here in Adobe XD and I'm working on a website design in an iPad layout and I would like to have it such that the content here at the top and this area here towards the bottom is fixed or does not scroll when the rest of the content scrolls on the page. Now if I step back on this design just a little bit; if I zoom out and select the artboard, what you'll notice is that this artboard is rather long; it's tall. And if you look in the Properties Inspector here on the right, you can see that it's set to have vertical scrolling enabled. And I can see that on the artboard because I have a control handle here that lets me determine what the viewport is — the default state of the scrolling page. What I'd like to do in my design is have it so that these top elements here; this top navigation; and this bottom flyout panel are persistent or do not scroll when the rest of the content does scroll.
Now the way I achieve this in XD is incredibly simple once you see it in action, I'm going to bring up my Layers panel. One thing you want to keep in mind with this feature is that the layer stack order of fixed elements will be relevant. So if you have items in your Layers panel that sit on top of a fixed element, they will scroll on the page on top of that elemen. In this example, I want both my header content and my footer to be at the top-most layer. So I've layered them here appropriately as grouped sets in my Layers panel. I'll go ahead and move this into screen a little bit more. With the footer element selected here on the canvas all I need to do is come over to the Properties Inspector and click the fixed position tickbox. I'll select the header elements and again click that fixed position tickbox. Both of those elements will now be fixed as all of the elements on the page scroll. Let's take a look at the finished work by coming over to the preview desktop play button here. I'll click that. Notice now as I scroll down on the page the header element remains fixed, the footer element is fixed and even things like the background blur effect that I've applied to that header is dynamically rendering the background image with the blur effect.
Let's take it one step further and take a look at the published version of this site in the browser. To do that I'll come to the Share button and select Publish Prototype and I'll take a look at the version of the prototype that I published a little earlier on. Notice here on the page in the browser as a reviewer of this design. I can not only view the content but that blurred background is applying dynamically in the browser and the content that is fixed is remaining fixed and the scrollable content beneath it is scrolling.
I encourage you to give this new feature a try.
In Adobe XD elements can be have a fixed position to anchor them in place as an artbaord scrolls through the viewport. Elements can be layered above and below other objects to create various scroll effects with the fixed elements. Adobe XD fixed elements are great for creating fixed position navigation or footer elements as well as buttons and controls that need to stay in place while content scrolls.
