Learn how to link multiple pages together, complete with transitions in Adobe XD.
- [Instructor] You can add interaction to pretty much anything in Adobe XD, even if it's a repeat grid element. So as I select this, this East Hampton, this button essentially, I want that to link to this Real Estate 1 image. So if I just double-click inside of it, I then get that tag. And anywhere where I get that tag gives me that interaction to transition to another page or art board. So pointing down to that one, it connects the two. And in this case, I can adjust its transition.
So it's going to slide up just like that. Okay, in the case of this text, I actually want to click back on Real Estate and it will go back up to the top. But you can see again, this is one element. So I actually don't really want that. I can delete that, and I want to actually take this menu, and if I just Shift + Select all of those, I can take all three of those, shift-selecting them. I can duplicate them and then drag them down.
And we'll scroll down to this page. So there it is, these are my elements. I want to point back to this Real Estate page, and in this case, I want this to slide down. And then this About, I can link to that page and have that slide down too. Okay, whatever functionality I want. And this is something I'd probably test and just kind of see how it flows. But in general, that's what I'd do for all of these, is just double-click into it, make sure you select that, again this whole grouped element, point to that specific page, whichever one it is.
In this case, I'll take this one, but again, point to that page. It's gonna slide up. And then going back, it's going to be those same elements so I'll take them from this page, duplicating them, bringing them over, and pointing them to the right location, making sure that's set to slide up. Alright, it's that easy. So that's what I do for all of these description pages, for all of these various properties, making sure that I can have each one of these elements click into their page, and then you can go back as well.
I'm gonna go through and do that for all of these. Alright now, with all of these pages linked up, all these various buttons, you can see them right here. In fact if you do a Select All, you can see how they're all connected. So each one will link to its respective page as well as this repeat grid actually linking to its appropriate real estate page as well. So all we need to do now is click play to preview it. We'll go into Real Estate and go into, say, any one of these, say these villas, going back.
Going to these lofts, I can see it here, going back. And for each one of these, I could actually jump to the About page as well, okay? Going back home, diving in, it's all set up. In fact, the last thing I'm gonna connect is on this About page, point that Real Estate button to the Real Estate page. So right in here, just about connecting all of these different elements. Kind of has the same issue.
I'll just delete that text, taking what I have right up here for these three, selecting them all, copying, and actually do an Alt + drag. Holding down the Alt key, that will duplicate them, and then I can point to them to their respective pages and making sure they're sliding the correct direction. This could be any one in this case. But if we're going from the About page to the Real Estate page, what I actually want to do is I want it to actually slide to the right.
Changing that to Slide Right. About page, don't need to worry about that one. But even for this text right there, as I remove it, we're going to do the opposite here. So this is really the last little bit that I'm going to connect up. But I could really get lost in connecting everything. Having that linked to the About, this is gonna slide left in that case. So it's gonna slide back and forth. So with that done, and just so we can see a preview, just select all and see everything here is wired up.
I'm making sure all these pages are connected. I'm not worried too much about these just yet because I want to make sure it's working here first. Clicking the play button, previewing it, going into Real Estate, clicking About, that slides over. Going back to Real Estate, everything looks good and works as expected.
This course shows everything you need to know to design your first website with Adobe's new prototyping app. Learn how to lay out a design, import graphics, and add headers and body copy. See how to create complex screen designs with repeating lists and grids that are as easy to change as they are to create. Then find out how to add new pages and use screen elements from the iOS, Android, and Windows UI kits that are built right into Adobe XD. Once the design is done, author Paul Trani shows how to add interactions and transitions to demonstrate how the website will "work" from one screen to the next. Plus, learn how to share a fully interactive prototype with other designers and clients, and export artboards and other assets to use in site development.
- Creating and importing graphics
- Adding text and effects
- Creating new pages
- Using Repeat Grid for easy prototyping of lists and recurring elements
- Adding interactions to elements
- Prototyping an entire website
- Sharing and exporting prototypes