Hi there in this video, we are going to connect our pages up, you can see the little wires there, we're going to preview it and we're going to make our wireframe interactive. Watch this ready to click the button jumps to a different page. Go back to the home page. It's simple, but quite the milestone in our course. Let's go work out how to do prototyping now in XD. Alright. Time to add interactivity. We're gonna get this first this button to go first. So we're gonna click on the blue button, not the text in the middle. So I've got it selected and we're gonna switch to from design to prototype. Okay, so your toggle between these quite a bit when you're building wire frame and a mock up. So design does all the design stuff you can see over here changes. I can do fill and fonts and stuff, prototype gets quite simple what ends up happening in the big differences. See this little box zoom in a little bit so you can see it. Okay, this little tab appears, so no tab tab. This guy is really han...

dy. Click hold and drag so when they click this blue button, it's going to go to the start trial and you just drag it to the side. You can see it can go anywhere in here. So it goes blue sea, not blue blue straight here, let it go and you'll see it connects to whatever the middle of the outboard is. Usually it's a dive down here that now is connected. Let's just see what it does by default. So to preview that you click this little play button up here on it. The launch is this like a little preview window and because it's separate from XT, it's this kind of separate little window and if I click on it ready. Ah cool. Huh? Basic navigation. We're kind of trapped here now we can't get back. So we're going to close it down at the little red box to go back in our case. We're going to click on the logo. It's really common on the website and an app, if you click on the logo, you go back to home base. So whether it's selected, I can click hold and drag it and it goes back here. So we ignored this before. Okay, this little pop up little window, we're going to leave it all at the moment by default and have a look at a bit more in a second because I want to show you how to preview So and hit this little play button member play, we click on it, home button goes back play. That's fun. Okay. But this window, you can close it, reopen and close and reopen it if you are like me and you are working with more than one screen. Not everyone is and you don't have to, but I'll just quickly show you here on my phone what I do is my setup. So I've got a Macbook Pro, it's nice, it's portable but the screen is a little small, so I fixed that by plugging it into this big LG monitor, LG do some really cool four K monitors cheap cheap enough, like I think it was like 400 U. S. So it's not cheap but pretty cool. Anyway, so what you end up doing is remember we hit preview before? Okay. And it appears it appears here. Okay. And we kind of have to close it down to get back to X. D. So what I end up doing is clicking holding and dragging it over here so it just appears on this window. Cool. And I never close it down, just stays open. And the cool thing about that is if I zoom in, hang on, I need to put my hands down for shortcuts. Sorry? Sorry, sorry. Alright, I need a I need a I need a cameraman following me around, I don't have that. So I've zoomed in really close here. Okay, I'm gonna go even closer real close. So this you see the screen there, you see over there, it's still that it's normal size so you can be designing in here and doing things and actually just checking it over there to see whether it's the right size rather than going back to 100%. The other thing is it's a live preview so I'm gonna kind of see if you can see both of them to the giant blue button on the right. Okay. I'm not sure if it's on the left or right in the video and get confused but if I click and drag it, can you see it's dragging on both. Okay, so it's live preview which is super handy. The other thing I want to show you is something you can see. It's quite thin there. Okay, it's not and if I try and make it bigger, you might have done this already. You're like well it's going to make it bigger and it does this and the black bars up here. Why is it showing me black bars? It's because over here if I go back to design, view, it's back here in Camp Tasia. I've switched back from prototype to design and I'm gonna move across, click on my outboard homepage name. Okay, zoom out. Remember this viewpoint height. Okay, the view port height is what's determining that kind of what you see on that laptop. So what you can do is you can adjust this and that will give you a taller box on that laptop. The only problem with that is that we're kind of designing for the 768. So we want to just keep that little letterbox window so we can only see that much. So we know what's up kind of above the fold but that can be a bit painful when you're working. So we'll jump back to the cell phone now and I'll show you kind of how it works. Alright, see you back and what we're gonna do is go to prototype actually know being design and remember you can change it over here view ports but you can also just drag this line and this is what I'm gonna do. I'm gonna drag that line up and down up and down and watch this up and down. You can see so if you go too far it's gonna try and put too much into view ports and your laptop on my my laptop screen can't show it. I want to find just this happy medium of that. Okay so my view ports ended up being at 10 and it's good for previewing on this but I need to realize that remember the fold kind of finished up here so I just need to be conscious of that but I can't deal with the black box black bars. So I just adjust my view ports to help me show on my laptop how confusing was all of that. Hopefully it wasn't too bad. Let's jump back out now. Alright one quick little thing is loads of people ask me in different videos what monitor that is because I always talk about it so I'm just gonna show you here so that you can go off and google it and figure it out if you want to buy it. Um That's the top there is the L. G. 27 U. D. 88 W. I bet you can't buy that anymore. It's about a year old now And depending on when you're watching this video it could be like 20 years old but it'll have family members that you can buy so um don't go and buy it you don't have to but people email me all the time about that so I'm just trying to cut that question right out of there. Alright back to the video. Alright I apologize to look at some of that video just shot on the cell phone. It was average not a cameraman. I hope you found it useful though. And the last thing I want to kind of just quickly take off for this kind of basic prototyping. We're going to do like full on prototyping later on when we've got our kind of high high resolution version going or high fidelity. Okay so at the moment though we're just going to cover all the basics what we need for our wire frames. There's a couple of little things is if I click on this you got a prototype if you need to break the wire. Okay so say you're like oh I don't want to connect that anymore. There's two things you can do. The easiest is to click drag, drag, drag and just let go in no man's land and it will just kind of snap back to its home. Alright wait there for a second little course update um in the rest of this video I'm going to discuss making adjustments to this. Okay. And what you did in the past as you clicked on it and it all these kind of adjustments here popped out. They've changed XD now. So all of these exact same settings when you click on that button instead of being a pop up, What happens is you click on it okay? It appears all over here, same stuff. Just all the triggers and types are over here. I'm going to discuss what these do throughout the course. Okay. But you was confusing where it didn't pop out here anymore, but it's over here. It's not too big a jump and now, you know, all right back to the course. The other thing you can do, I've undone that is you can click on it and say I'd like it to go to this. So you're saying I wanted to win this button is tapped. I want to transition to this page. Okay. Which is our start trial and that's the name of the outboard up there, you're gonna say none. And that gets sort of it as well. The other thing you can do with that trick is let's say you're in here really close and like we've got two outboards and it's pretty easy but you'll have, you can, you can have hundreds of art boards. It's not uncommon what you can do instead of trying to drag to like the 100th art boards to like it's just too hard. You can click on this and say actually I don't want to drag anymore. Dragon is cool but choose an outboard. I'm going to click the start trial and you can see it's done the wire as we mount it's connected it instead of dragging. Its just another way of doing it. The other thing is you can kind of see it here. If I have black arrow, click in the background, I'm on prototype and I go, where's the Edit, select all. So command a on Mac. Control a on a pc to select all. You can get this kind of nice. You can see all the wires going all at once. You like have I done all the buttons. It's really easy to see in this case and the one you don't have done is start trial. I was playing around with that in the break. So you don't have this one. So that's the one we do need. So start trial goes to the same box. I'm gonna click hold and drag it and connect it. And this one here goes back when it's done. All right. That is the intro to prototyping and using their live preview on a different monitor. Let's jump into the next video

Class Materials

Bonus Materials with Purchase

Six Completed Files

Exercise Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Web Design Design Thinking UX Design Design Projects

Ratings and Reviews

Haseebullah Johar

Thank you, Dan Scott, for providing such a beautiful Adobe XD course. I completed the course today and noticed a couple of things that are missing. I want to share them here so that you can upgrade the course, which would be helpful for us. Hover state and toggle state. Dragging pages from 1-2 to 2-3 and then back from 3-2 to 2-1 with dragging is not working. Another thing is that we learned scrolling the website from top to bottom, but scrolling or pushing things from right to left has been completely omitted. These are the things I have noticed, and I would like you to upgrade them so that we can improve our Adobe XD skills.

2,000+ classes ranging from fundamentals to advanced techniques.

Prototyping & Interactivity

Prototyping & Interactivity

Lesson Info

13. Prototyping & Interactivity

Lessons

Getting Started with XD

What is UI vs UX

The UX Brief & Persona

Wireframing (Low Fidelity)

How Wide for my Website

Existing UI Kits

Working with Type

Basic Colors & Buttons

Free UI Icons

Footers & Lorem Ipsum

New Pages & Artboards

Class Project 01 - Wireframe

Prototyping & Interactivity

Create a Popup Modal

Prototype

Groups & Isolation Mode

How to Use Components (Previously Components)

Production Video - Left Nav

Repeat Grid

Updating Components & Repeat Grids

Prototype Tricks

Navigation Tricks & Tips

Class Project 03 - Components

Mocking Up an App

XD App on Your Phone

Fixing the Position

iPhone & Android Status Icons

Production Video - Login

Sharing Wireframes

Recording Your Interactions

Class Project - Wireframe Feedback

Mood Boards

Class Project - Mood Board

12 Column or Grids

Working with Colors

Tricks for Using Colors

Gradients

Class Project 06 - Colors

Use Web Safe Fonts

Character Styles

Font & Text Tips Tricks

Plugin Lorem Ipsum

Paste Properties

Class Project 07 - Text & Buttons

Draw Custom Icons

Strokes & Lines

Pen Tool

Drawing Practice

Production Video with Tips

Illustrator in XD

Class Project 08 - Custom Icons

InDesign in XD

Pros & Cons for Images

CC Library Connection

Adobe Stock

Free Images

Masking

Photoshop in XD

Infographic

Class Project 09 - Hi-Def Mockup

Mobile Phone Mockup

Class Project 10 - Mobile Website

Hidden Features for Repeat Grid

Plugin - Content Generator

Plugin - UI Faces

Plugin - PhotoSplash

Plugin - Copy Cat

Advanced Asset Panel

Advanced Symbols

What are Micro Interactions

Button Grow

Animated Image Gallery

Full Vector Change

Class Project 11 - Micro Interactions