By Dani Beaumont
In this final step, let's circle back and add a few finishing touches to the design. I'm going to go ahead and close out the Assets panel. I no longer I'll toggle that panel closed, and I'm going to zoom in a little more tightly on the two artboards that I want to focus on. I also want to switch back over to Prototype mode, so I'll do that by coming to the upper left-hand side and clicking on Prototype this time.
As we focus on interactivity, I want to spend some time on the header elements at the top of these two artboards. Earlier on when we were looking at the Layers panel, I pointed out a group of objects that were the top navigation elements. They consisted of basically the arrow icon, the close icon, the words for the headline for each artboard, and then a background rectangle. What I want to do now is make sure all of that header content stays at the top of the design and doesn't move when my stakeholder scrolls down on the screen.
To do that, this time I'm going to come in and click on the group of objects that are here on the "Browse 03" artboard. I'll then hold down the shift key and then click on that same header element there on the second artboard, so keeping both of those selected I can see the little grayed out Home icon here indicating that they are selected. I want to come to the Properties Inspector, and in the lower area here click the "Fixed Position When Scrolling" checkbox. Notice I now have a little pin icon on both of those group sets letting me know that those objects are pinned or not going to scroll when everything else does scroll.
Let's take a look at what we've just done once again by opening up the Desktop Preview app. I'll go ahead and click that in the upper right-hand corner. Notice as I scroll down on the artboard the background content is scrolling, but the header element is remaining fixed. Towards the top I also applied something known as a background blur for a fill to the header content, so it's dynamically blurring whatever content is underneath it as I scroll. While I'm here I also want to point out that if I wanted to create a movie -- let's say an .mp4 for my stakeholders to take them through the work that they're doing -- I can come here in the Desktop Preview to this button right here that's actually a record button.
Before I do that, if I go to the right-hand side and select "Enable Microphone" I can actually record my voice as I narrate through the prototype. This is a little different on Windows than it is on a Mac. For that I can type the Windows + the G key and use the native recorder to record my voice in the Preview window, if I wanted to.
When I'm done reviewing my designs and I think everything's looking good, I'm ready to now share it with some others. Before I do that, I'll go ahead and close out the Desktop Preview and what you'll notice is on the upper left-hand corner, in addition to Design and Prototype, there's a Share mode.
Before I switch to the Share mode I want to set the beginning of what it is I'm about to share -- my prototype -- by defining the home icon for the first artboard. To do that I'm going to come here and click on that home icon that's just left of the Browse come up to the mode area and click on Share mode. if I zoom out, one thing you'll notice is although I have a number of artboards here on this design, the only artboards that are visible are the two that are linked to one another by way of the wireflow that I defined. So what Share mode is showing me is any artboards that will be exported as part of this process, and that's defined by whatever artboard is set to home, and whatever other artboards are linked or flow from that first artboard.
To now share this content as a prototype with someone else what I can do is come to the Properties Inspector for Share mode, and here in the drop-down menu I'm going to come in and select new link. From there I'll come in and make sure I like the file name. I can change that if I'd like. I can also come in and choose a view settings this is kind of a handy set of preset values that suggest based on the goal that I have the type of share settings I'd like to choose for. Now I'm going to select Design Review. I'm looking for that first prototype review and, with that all set, I'm going to go ahead and leave it without a password for now, but I could select one if I'd like. I'll go ahead and create that link.
Once that link has been generated, I can copy it to the clipboard and share it with others. I can also make this a private prototype and limit the access only to the people that I invite by way of their Adobe ID. This is a nice way to keep things secure in that you have to have your Adobe ID and password to log in and click the link and view the prototype. If instead I want to hand my work off to the development process and give my specifications to my developer. I can, in the View Settings area, select Development. This will change the settings to optimize it for that developer as they extract the assets and determine the specifications that I've defined in my prototype design.
Now, obviously there's a lot going on with Adobe XD and we've only just scratched the surface. I hope you've enjoyed this brief introduction and that you'll join me for the next QuickStart tutorial in the series. I look forward to seeing you there.
Put the polish on your design by fixing elements like navigation while scrolling. Using the scrolling functionality in Adobe XD, you can fix elements so they stay in position while the artboard scrolls. Once your design is ready for the big time, share a link out to the design in Share mode. Whether you're sharing for design review, handing off to development, or conducting a user test, Adobe XD has you covered.
