How to Set Fixed Position for Design Elements in Adobe XD
One of the new features in June 2018 update of Adobe XD is named fixed elements. This feature allows you to set a fixed position for elements like header and footer. Fixed position means that elements will be always at the same position on the screen and always visible while scrolling up/down to preview page. Usually fixed position of elements is used to provide quick access to most important features/links like the menu, logo, search box, phone number, link to the shopping cart page and so on.
In this tutorial, I will explain to you how to set a fixed position for an element in Adobe XD and what to pay attention if you want that element always visible on screen when someone is previewing scrolling pages in your prototype. This feature works for Desktop preview but also and for online preview when you share your prototype.
Steps to set fixed position for elementsIt is fairly easy to set fixed elements in Design mode. Before proceeding with the steps it will be useful to organize content in the Layers panel. You can set a group of objects as a fixed element.
Grouping and stacking orderEnsure that you have grouped objects and moved groups which should be fixed to the top of the layers stack in the Layers panel. This is an important part to make things easier but also to ensure that none of the other design elements won't overlay fixed element when scrolling up or down.
|It is very useful to group and organize content in the Layers panel before setting fixed elements. Fixed position can be set for group of objects which should be on top of other design elements.|
Position elements according to the viewportTo properly position fixed element at the bottom of the viewport do the following:
- Click on the artboard name to select it and to see viewport. If you do not see viewport then change Scrolling in Properties inspector to Vertical.
- Position elements(s) which you want to have a fixed position according to the viewport of the page.
Set fixed elementsIf you have prepared your artboards and elements as mentioned above then you have only three easy steps remaining:
- Select element which you want to set as fixed using Selection tool or Layers panel.
- Check Fixed Position in the Properties inspector.
- Test your prototype.
|To set fixed position for some element you will need to select that element in Design mode then to check Fixed Position in Properties inspector.|
Product used in this tutorial:
June 2018 Release of Adobe XD: Overlays, Fixed Elements, and More