From Sketch to Adobe XD: UI Design and Interactive Prototype | Irfan Rosandi | Skillshare

From Sketch to Adobe XD: UI Design and Interactive Prototype

Irfan Rosandi, I Teach Design on Skillshare

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (1h 27m)
    • 1. Intro

      0:58
    • 2. Design Assets

      0:40
    • 3. City Information UI - Part 1

      14:03
    • 4. City Information UI - Part 2

      6:52
    • 5. Tweaking the UI

      2:18
    • 6. List of Cities UI

      10:46
    • 7. List of Cities - Swipe Interaction UI

      1:28
    • 8. 2nd City Information UI

      7:24
    • 9. Adding Interaction to UI

      18:42
    • 10. Adding Interaction to 2nd City

      10:36
    • 11. Connecting Interaction Between Cities

      5:19
    • 12. Finalize the Prototype

      3:35
    • 13. BONUS - Share the Prototype

      4:20

About This Class

OVERVIEW

Hi Everyone I am Irfan, i am a UI/UX Designer, Thanks for checking out this class. In this class i want to share with you on how to create an interactive prototype with animation using Adobe XD, this class is open for everyone who want to learn how to design a UI and interactive prototype whether you are a beginner or intermediate designer.

This class teach you the step by step process on how to create a simple interactive web prototype from scratch, the class starts with creating the UI Design in Sketch and then creating the prototype and animation in adobe XD.

At the end of this class, i hope you can create your own interactive prototype using Adobe XD. I am also provided you with Design Assets that is used in this class, so you can watch and practice it.

So, let's get started!

CASE STUDY

a9aebf7e

Transcripts

1. Intro: Welcome to From Sketch to add a B x, d u i Design and interactive prototype place. Hi, I'm verifying a U N Greg Designer Basing Indonesia Thanks for checking out this class in this class I want to share with you and how to create an interactive prototype with animation using Adam B X d. This class is open for everyone who want to learn how to design a U I and interactive protest site. Whether you are a beginner or intermediate designer. Disclosed, issued a step by step process and how to correct a simple interactive where prototype from scratch. The class starts with creating the I design and sketch and in creating the prototype on an immersion in other B x d At the end of this glass, I hope you can create your own interactive person. Survived using out of txt. I'm also provided you with design Isis. They'd issues in this class so you can watch and practice it. So let's get started 2. Design Assets: before you start designing, we want to make sure one thing, which is we want to make sure that we already have called. The asset recorded in this class is so I have provided you with one folders called Assets. So in this, holders confined the image status years in this class so you can find also these text exceptions and you can find image. So this image I took it from on Splash Splash is very hike. Recommend that site if looking for free image no attribution recorded even for commercial use. So high career committed to your stance blush. 3. City Information UI - Part 1: all right, so in this class, I defined it the process into two parts. So the first part is about the I design. Your design is on choosing the phone, managing the layouts and things like that. And the second part is about Paris I ping, which is who want to make the you I to be applicable to be interactive with animations and things like that and for the I design part amusing sketch for that because I've been using sketch for years and I'm quite family with sketch for your design. I have been memorizing the short cards of the sketch, so it is a bit faster for me, for King and sketch for you. I design but 40 per cyp Ingham using the auto B X D. But if you more comfortable working with other Bexley, that's totally fine. You can create the you are using at a B X d. Basically the it's kind of the same. You just follow along these classes. You can you can see anything and implement that on the other B X d s. Well, basically it's not like very completely different thing, But in this class, I want to use sketch because I'm more comfortable working in sketch for you. I designed. But I do. I do know that how to be ecstasy is quite really robust tools for parts typing. So I'm using both of these suffer. All right, so now I'm going to create new documents. And the next thing is, I want to create an outboard. So and for the ample size in this class amusing 12 80 and 7 20 Well, this is just an example. Off off the size and you can use any slice. The most important thing is not the sizes, but it is about how you can understand the process. All right. The next thing is, I want to import the asset into these outboards. So let's we go to our I said folders here and now I want to try this image. Now you can see that this image is morphing. I'm using several plug ins if you want to check. Ah, MDs short guys cool Prague in have been using that for for a very long time. And this is really cool, Borgen and really high Klay recommend this plug in its improve the productivity and the second plug in Then I recommend you to use this distributor so I can distribute Ah. One object to another object with very specific spacing. Instead, you adjust it mentally. You can check that to school, will it? All right, let's we back to our class now. Um, I want to just precise it, All right? It's looks nice. And the next thing, unless we move to image a bit like this. So I think it's cool now, and anything is, um Let's we go to tax as we type some text here. You want to type the title, So I'm using opens. He can. You came dollar these this phone own Google phone. It's free. I'm gonna make it full. All right. So the next thing is, you want to add some descriptions gate for descriptions. I want to make it uncertainty, and it's still small. 70. All right. So you can take the descriptions on the asset holder. You can use glory. I'm ipsum a swell if you want. Okay, so it is quite Lila's. We re slice it for us, right? And the next element is the you I, um de dealing. Okay. Okay. Now let's we create dealing discover okay. Close to make it full. And the next one is learn. Well, this is just example. It's not a real website. It is just learning. Propose T. OK, get the next one. Probably blocked. And the next one is store arctic. So we already have fling. But you can see that this is, like, still messy. The spacing between Wan Ling to another is not consistent. So how to make that consistent? We can use the plug in that I've shown you before, which is distributor to do that. It's very simple that access the Blufgan I'm using Short got here and we can insert the spacing. For example, I want to insert for a five. Let's say Okay, so you got very five. All right. Very simple. And the next thing I want to at some, not some but one, I think. Yeah. Then let's We at colors. So this is just, um this is like, the current page. So has he Okay? All right. Okay. Lets week work. This how on to group these this war? All right, it looks nice. Group it. And the next thing is who want to add, um, the buttons, the counteraction buttons. Mom and I use, uh or end it break single. Okay, so we want to make Musa to experience fits. Well, tour. So you can set these 18 on this issue on 30. All right, so let's change the radius Gay since, like, a bit too. Okay. Sorry. All right, it looks better group ID and change this to like and this to light. All right, so the next thing is, you want to add some statistic below it, that's what. So the country, this is 13. And this is Alicia. Okay. Now, unless we make it 17 and this one, it's we reduce the capacity around 60. So we want to set a spacing. Iran Fife. Kayla, Sweet Corbett. Now it duplicate that we're gonna ask. Said this to be Population Swan are on 1.8 1,000,000 swan language. All right, so the next thing is, we want to set the spacing this wall, so we're gonna use the plug in called Disturb Batory Game. So I want to set this to be 50. All right, look, school, that's crooked. All right, So the next thing is, I want to add something like a play buttons. So this is, like playable. Now let's we create that icon I'm going to use. Ah, this rectangle. And now I'm using command enter. You can see this, and we want to Dell deal 81 point. Okay. Like that as we returned it like this. Okay. And the next Lex, we create. Awful. Okay, they put here. So I want to change the color for us. Okay, that's we forfeit to below this layer so I can see that. Okay. Okay. The next thing is, you want to make it. It's to be center. Okay? You want to this click on this flattened shape first? All right, so I want to make it to be center. Okay. Looks nice now, and we want to click on this. Calm, able to appreciate layers using as sub struck oppressions. Click. Ok, Looks good. Now, let's we changed this to light. Now we want to change the opacity to are on 80 or 70. Okay? And the next thing is, we want to at arrow here, so this is like a slight Yes. I can click on the Cerro touch to change the city. Right. Did it at the very simple That's we created at all. First, I'm using rectangle again. I'm gonna use supporter here. Unchecked. Awful. Okay. Make sure that I want to use this to be, but this in center and the joint also honest on this middle here. And the next thing is, um, we want to use these shores when I got this. All right, now, let's We were excited like this, right? Looks nice. Knowledge changed. The color is too light. Callus. We slice it, that's we looking. Looks good, but it looks quite big. Policy. Reduce it. All right. Looks nice. Knowledge's We changed this. We know. Change the opacity to around 60 or 70 years. All right, so it looks nice. We need one more here, slots, we duplicate that committee. Let's sweetie flip it right. It's like school. All right, so let's we adjust this a bit. I want to make sure that we have Cory spacing here. I think it's fine. And this is just the tips are usually these beside the line hate section here, So if the phone slices 17 you can just multiply it 17 multiply with 1.5. So you got the numbers. If you just like they see more can come off it. Karekin, just make this to be, uh, mark up. All right, So the next thing is, um, you want to make sure that this spacing, okay has enough things that it has, like, began here. It's, like, just empty space there Can fix that as well. All right, so let's regroup it. And the next thing is, we want to add few all icon. So you, sir, can I go to another city? They can see adversity, so lets you do that. 4. City Information UI - Part 2: when I use all rectangle. Okay, it's just makes seven to begin that just to make sure that this is a tree when we do pick in this hits Trias war, it's three. All right, So let's we quote this gay knowledge attacks here if you all make it pull chances Toy pan this this wall. Okay, so are just make this around 15. Let's go a bit. All right. So it looks nice and the boxes looks a bit to a big. So you want to reduce it? Been there. So today we want to reduce this slice. So amazing command K on a scale these to 80% it looks better. No, it's we you can see that it's it's quite pixelated here. So let's fix that when I said to five instead, Okay, lets we like multiple. Okay, so this is what make this looks pixel mater. Okay, lets we just ocular this on three, right? All right, now let's we change the spacing soon, right? So it looks good. Now let's we adjust. He spacing a bit or so from the top here who want to set these go on to set these around 50 this'll on the 50 s wall. Let's really with it to here. You want to make this to be for tickly center to this. Okay, Looks good. Now, let's we both it. But all right, so I think it's cool now. The next is I want to change the spacing here. So lets you with it are in 60. It looks a bit small. That's we Move it to 70. Okay, I think 75 years fine. And we can just turn it down a bit. 40 its line. Can you want to reduce it a bit? A bit more. I want to make this to beef vertically center. So on this wall. So this is I'm using a sketch. Blufgan discolored the EM dash worker so he can memorize this shortcut. And it's make designing left, if one easier. So I really recommend you guys to check that plug ins. Okay. Sorry. 30 and want to make this 30 as well. All right. So it looks It looks quite nice now, And the next thing is, we want to just smoke this buttons, but we want to make this around 30. And this one want to line with the button and from the bottom. You want to make this Iran 40 I think Swine 40 s wine. And this one we want to make it vertically center to this gay one. Disses say 512 Make this this war by notice that it looks a bit where What if we changed this to, uh, the same with this? Looks knows where you changed a bit. All right, so this is better. 50 and 65. Well, in the problem. Okay. So I think it's fine. 30. All right. So just I want to make sure that this is they are in the same expositions. Okay. All right. Our X. So we have finished our design on the first page. And on the next video, um, we designed the interaction. When you see, click on the few section on the few, all so they can see other cities. All right, thank you very much. And lets you on the next video. 5. Tweaking the UI: All right. So the next thing is, we want Teoh trick a bit on the design that the we have designed before, we're gonna to work a bit, so it looks officer on. You can see that Ling here. I want to make some tweaks here. So I want to make sure that now you can clearly see that which bake is the current pitch. So I want to reduce the opacity a bit on underlings. So let's we do that. And I said, like this. And what is it? Something on 15. I also want to make it full. And we can just re checked it again. Okay, You can see that now. The spacing as different now it's has a different special. No worries, because you cannot Just that Gae 45. All right? It's cool. That's me. Let's remove it. So I think 50 is fine. All right. So the next thing is, I want to just move this a bit, and once basing had this asshole. Okay, so it's not too close with this arrow. All right. Sorry. I think it's It's it's wine. I think this is my fear. The bitten again. All right, so I think it's fine on just live this US it is. If it followed these, I think it's it takes too much basing. I think it's fine for now. 6. List of Cities UI: All right. So the next thing is, before going to new lots, we saved his daughter, man. Because I am not serving the stickum and yet, so I just to make sure that half everything, it saved my life. And I sit here, and the next thing is, we want to duplicate these outboard. So let's we got b and duplicate this up here. Okay? Okay. And the next thing is, that's we created Tom Nail. So to credit time now we want to at the F four legged first. So we're gonna use rectangle and let's we at shadow, it's small chateaux. Basically, it's grinding. All right, so, um, said this to blind, dishonest wanted play, But this one, I'm gonna reduce the capacity. Okay, so it's like, ah, for Les on. The next thing is, I want to add the car. I'm gonna using these rounded. Okay, So you want to make, like, three, three cards? So the size they want to make the with to be around 400 I think it's going hell, It's really just make the hate to be threaded into earthy. I think it's like And now let's who changed your ideas? Maybe around 15. It's fine. All right. So the next thing is, that's we practice. That's we turned this to be mass. Okay on. We want to simulate how it looks for us. So I want to make this 25 front bottom and 25 from days as well. All right, so let's read candy years. This money for this war, this is 25. Okay, so we got a bit problem here with our with their So you want to make sure that you, sir, can see that this is a list off the card, so there will be another car here, so we want to inject the shoulder a little bit off other card so you can see that this is what swappable Now let's we reduced ease with That's We try Iran for you, 50. Okay. I want to reduce the haters wall, so it's looks better. All right. So I think it's fine now. Hello, sir. You changed this to 25 gate. This life, far from the bottom. A small key. Now let's sweet trike. Right. So it looks better now. All right, So the next thing let's we insert image here. Lobbies going to go to my finder's here. And this is quality and poor. So this is the picture on to insert here. Key. All right. It looks nice now on. The next thing is, that's we add some, some sort off text off course. On below is the country just militia. I want to make this 17. Okay, this one a bit bigger, but 20 swan is a medium. All right. Looks nice. Now, that's we were Fitbit. So it's 40. I think it's thirties, so you know. Okay. All right. So you have to make sure that this spacing is right. Horrid. So sometimes the sketches, like, if you hope for to this, uh, distended showing to the to the object where your core stories. So, for example, if I over the course or here, So the distended is from these objects to this object below the course are so you want to measure the distance from this object to these, um, books. This is you can just ah, hope for acres are here, so you can see that it stands showing you the dissing that wind at this object to the object on your course. Okay, so I think so. I know Onda. We want to just at a little bit a dark Grady in here so detects can be more irritable. That's we do that amazing rectangle. Okay, now let's see at Greg in here. Smallness home. I want to just make it a bit soft. Okay, so I think it's so I know on instead off doing that again and measuring the distance. Just let this one ls we just to play kitties, That's we Just a spacing. All right. So, Nellis, we change the image and change the text, so we didn't have to readjust the spacing and adding this right in. Now the next thing is, you want to add another city. I want to add this city medicine. Okay, so All right, this one. Okay, that's ready. Change this to Dubai. Sort of bias. And your name did our Okay. Okay. The next one is when I had this picture. So you can't see this can just move it first Hopes. So I, ah, did the key. Borai Price Siyuan keep or it's like I shouldn't press that case. No problems. It disappears now. All right. So I can just a spacing in the game right. Swan is I got, uh, gets in Boenisch. So the propose off. Ah, this Grady And is that you think that this is not readable king and just it. But the problem is that is Ah, it is not consistent. Okay, So we just If you want to do that, if you update this, if you change this, you have to change to other places. Well, sorry. It is consistent. So I'm going to under that. I think it's fine. I think it's still readable. All right, so I think it's cool. It's fine for now. Has can see that this is the war initial pitch and then went to click the few. All they see this, Eric. So graduations. Now let's recruited next step. 7. List of Cities - Swipe Interaction UI: The next part is we want to, um, want to create another scenario, which is when users swiping, thes, least off guard. So when they swipe it off course, this car would be like this. And this guy would be like that. Yes. And we want to create that, um, that skin Ari. Oh, So what you do is we want to grope this first come in G amusing keep or short card and can duplicate that. And let's we just adjusted. So it's 25 All right, so because we want to put a type it in Ida B x d. The way at other B X'd out to any meat works is ah, we need to create multiple states so as to be extra will auto. I'm animate our design from this state to another state. And what we have to do is just create the second state. So this is the first state and this ISTEA second state. So it is actually quite simple. We just need to create the screen for variation. The screen state and out of the X ray will go to any meat and the animation for us 8. 2nd City Information UI: So we have created the first sip you to squalor on board. And now we want to create another city. Just at the second city is Medina. So we want to duplicate thes outboards, and we're gonna change the content. So let's we do that. America will be all these outboards hand implicated. Okay. All right. So now I want to change these picture through this picture. Okay, so the next thing is, you want to change these titles Well, and for the overlay before Lay is based, basically deceiving. So you want to just I want to group deal for lifers, quote and just rename this toe overly. Okay. Dishonest will. Okay, so, uh, it should be here. Onda techs who want to change this. Okay, Sorry, because this is car that the image is quite different, so I can see it at the Texas. It's not credible compared to the 1st 1 No, that's wrong, I'm afraid. First. Okay. So I can see the comparison. All right. So I'm gonna delete this first. All right? So let's we do some tweak on the image so we can read the text there To do that is we want to and some films. It's too with Grady in. So the image can be more where the text can be more edible. Okay, so you Texas bit more edible now, and I want to change this small asshole. Okay? All right. So I want to change. You want to grope this and this once will. Okay, so, uh, I wanted to fix it, but this one, this wall, right? That's my hidden pain. So on, asshole. All right. Okay, so this is for a pixel. So I'm gonna move this for a pixel. Swell. Okay. So you can see that this is not readable. Hard to change this to dark colors. So it is more able and this one asshole Hajric. So I think it's fine. Let's we make on the bottom to be bit dark. Okay, so I think it's fine. No. So the next thing is, we want to duplicate this, Okay? We can just put it here. We're not a ticket. That and we can you is dead. But who can do this as well? Okay, so there are a lot of ways to do that. At least the most important thing is you understand the concept because Sometimes you can You can just design these and then you you go back, you go, you tweak something, and then you return it back to here. Um, if you already understand the concept, then this is actually very simple. So the concept is the first we create the first initial state. So this is the first state, and then we create the second state, which is when they clicked this, but and they see awful a enough for lay. And then, uh, the cart, Okay. And then another state is when you said swipe this card. So we're gonna create the another state. So this is basically just a variation off states, and then we want to any meat that in the ad A B x d. Our ranks are excited. Now let's be go to the next video. 9. Adding Interaction to UI: after we have successfully created our your own designed. The next step is we want to transform that you I design into clickable process life. They want to change the static image into clickable interactive broadside using out of B X D and the cool thing about Utterback cities that it except schedule so you don't have to do anything. It's simply just opened this catch file in the Adobe X'd itself so I wouldn't have to do going for anything as simple as open like you open how Toby X'd falls. So let's get started. We go to file and then because I saved the Falls sketch file on my computer. So basically a click on open from your computer, All right, so I'm gonna choose thesis in my file. Hajric. So it takes some time for loading. Is against the that other B x d. Really nice in rendering our design. So there's no like, um, blurry image. There's no, like Miss Place. Object so far is very good. It's very, very good job exiting. So yeah, I think it's circle now. The next thing is, let's we try it. So to play a prototype next t just click on this play I can Her ex services are war Priceline on If you want to stop or typing, you can see there is a prototype type a tap here so you click it and it turns to be poor typing mood as GNC that there is home icon here. So this is Ah, a sign If you want to make this ARB ought to be the initial outboards When the prototype starts. Then we click on this home I can so it turns to be blue. So it means that when the four top displayed then this art but will show first. Okay, so the next thing is, let's we try it for us. Hajric size. You can see There it is. It's not clickable. If I click it and nothing happens, that's because we haven't done anything yet. Okay, so the first interaction that you want to create is we want to create these, um, interactions the initial an emissions. Okay, so when you say play the parasite they can see, like on detects, like moving from the top, so you can see you can feel that the emissions. So that's what you do that to do That is very simple. We want to duplicate this. Okay, so we go back to our design tap here and now, let's Rico Pittis and its basic here. Okay, I'm gonna move it to the top here. Okay? So, like I I say the way auto animate works. Is it out to transform the object from one state to another state? Okay, that get let give. Okay, lead. I give you an example. So, frank simple. I move it to the right here. Okay. This is just an example. And I go to broadside, and then we want to make sure that this is to be the starting person because this is the first outboard that will be launched first. Okay, so we want to set these to be go to these cardboard. I want to set the trigger to time and the dealing You want to have delays in. We want to. When you say play, there's not really we want x t war are executed. The animation directly, We thought, having delayed or anything and the transitions who want to click out of enemy. Okay, so let's say the Russian is three. Okay, so let's see how it looks when we click Play. Okay. So you can see that this is small finger. That that's not good. That's not good. But the point is, I want to show you how they're out to any networks. So the way it works is basically it turns for, um, how the object from one state into another state automatically. So what we do is we just prepare to state. So this is the first state, and this is the second state and out alto animate will automatically animate that for us as imports that. Okay, so this is a bit I've been ugly, so let's we change this back. I want to check 12 get the expositions. Could be. And we're gonna said this to the explosion back. All right, so on the initial state, we want to make this the opacity off the object to be around 10. So that's how you do that. So the opacity he wants said it to 10 Swan asshole, or you can just multi select it. Okay? All right. It's like it's good. And the next thing is who want to change this to a bit up here, so the animation will Will show that this stack is coming from the top here to the bottom. And this one? I wanted to be bottom here. Okay. And this take years. You want to set it Onley below it on bottom here. All right, this one when? A certain from here. All right, so this one, this link he wanted, said it from the talk as well. Okay, so this is the initial state. So let's replay it play. So is we Check again on the part site. Basically, is we can We are using the time trigger. So there are a lot of trigger in the instruction there. Tap, drag, force keys and compact. But, timer, what we used what we choose time because we want to be we want to set is to be automated. So that's why we we just time. Okay, so let's replay it. Okay, you can see that. It's it's kind off animating now, right? That's we play it again. Okay, so it seems like it's a bit slow. That's we change this. The speed around two seconds. Okay. Another option that we can try us. The eastern option. These thing option is how the the animation looks this speed, okay, is out means, um the speed the animations thought a bit fast. And then, Ah, the spit will slowly reduce at the end off the animation. So this is the out and the sinners. Um, the animation will start slow to spit. We'll start slow, and then it going a good more faster at the end of the any mission, so to speak. So easing is about how the the speed of the animations. Okay, I want to check this to be is out and let's who play the game. All right, let's we play again. All right? So it is cool. But I think if every everything is move, then it's like quite a lot of distractions. I want to set these to be in the positions. It's not nothing. I think that's better. A copy. Now, as we go back to design tap, I'm gonna take this exposition, gonna apply this here. Okay, so let's we play it again. Yeah, I think it's It's it's better. I think it's cool. Well, this is animation. You can play around with this, you can create your own and the mission, but the principle is I want to show you the principal how he created this again. It depends on your creativity. The more creative the the animation can get. Even better, he can try itself. And to make things more interesting, I want to mentioned the image to be slightly bigger on the second are poor, so you can see like it's kind of zooming. So there's effect off zooming. Okay, so let's we do that. Okay? Now I so like this image and then I resume it his own. Okay? Yes. Just We were not precisely to to be too big, just just small re slice like this. Now let's we play it again, all right? So you can see that it's kind of zooming, right? Okay, so you can see that it's kind off. It's not really smooth batting out of Bhakti can fix that. But for now, I think it's it's It's very cool so far is it's very good now. All right, so let's we, uh, do the next that which is when you see click on these few all we won. I want to show the user this this overlay so help to do that. So this is the principle is the same, like Hardy. Profess so on the profuse. This is the first state, and this is the second state right on. In this case, this is the first state, and this is the second state so on the element should be contains in that part. So if this is the the first state and this is the the second state, let's say the first state has several elements. Then on the on the second state, it should have seven element as well. So the question is, Well, we have cars here, right? We have offer later. So it means like it is additional elements. The answer is no. This element should be access here as well. But the trick is you want to set the capacity to be zero here. So these cards we could hear it's not showing. Here. You go to buy tonight. Okay, Now, let's lead with that. So I've grown Did in has enough for later. Okay, so the suffer lay contains off Ha. These dark Grady ins and this cart. No, let's Chicopee. Dennis Well to decide board. Okay, Okay. So you can see that this is like this. And the next thing is it want to set the opacity. Okay, The opacity to zero. We want to set the capacity of this zero, and then we want to set his capacity to zero is well, before that, let's remove it to the bottom. Here and l A v changed its 20 So the an emotional pull shows like this car will show from the bottom. Okay, so So let's we board. It's like we go to protect. But unfortunately because, um, as you can see, that this offer lay the awful A is on top. This is the on top off everything layer off place until everything. So when we click on the prototype top, we cannot access these fuel object more. Because when we click it Ah, what selected is this'll a er off layer. So the trick is who want to create another object? Okay, who want to create rectangle as we place it on Tom a fit. Who you gonna remove the border? And when I said the capacity to zero. So when we go to prototype, and then when we click on this, he can see that we can add the hot spots here. But basically we're adding our spot on top off the infeasible rectangle. Okay, go to point. And then that's we. So I like this report. Okay, so let's we, uh just so the trigger is step. Why is that? Why not time? Because we're clicking here, okay. And the next thing is actually out of a teammate. But for this one, we want to make the direction is squat faster. A run. 0.38 Ok, so I think it's cool. Now, let's we blade broadside. Okay, Now let's we click on this field, All right? So hey, looks very smooth. Now. We want to set the part type. When you see click on this area, they go back, the scar will be hidden again. So as we go back to our X'd and on the partners type section here, we're gonna sell like this rectangle. Just this linear. Hear the background off this card, and then you want to add that instruction. So what does these statin direction do is when you click it? I want to return it to this outboard. Okay? And his can see that the setting will automatically being said by the outer back city. So it's copying the profuse interaction, which is the same, like dis instructions. Okay, no less. We played it again. Who? Play it. And now we click on a few. All Okay, I can't see it. When we click on this area, it go back. All right. Expectable Rx on Ellison corset. The next thing is, we want to make a drug interactions. The dragon direction is also very simple. You know, the big city. So what we do is we want to at drank interaction on this card. So to do that is also very simple. We click on this card. Okay, we click on this card and then who at a link to this hard work instead off tap as the trigger. We want to set this to be trucked, okay. And action also enemy. And this is a swell we want to add. So make sure that what selected what selected is only this group. So you're not adding going to discover, like work, but only to this but them. Okay, now let's we click it, and just but it here it is also automatically using the same setting. Now let's we play it. We click on a few, all that's we move it. All right, So it's move when we drug it. All right. Current relations 10. Adding Interaction to 2nd City: we have successfully create our first instruction urges on the first City. Now we want to continue to working on the second city interactions. So let's get started. First of all, we need the first initial state as well for the second city. The same, like this first city. Just we need to set the capacity, like Like, this is the same. So we're gonna reduce the opacity for the initial state. So for that, we want to copy days. So we go to resign. Unless we place it here. That's who you may. If it here. Now, let's we changed the capacity of the object the same like this. So the opacity is 10%. We're gonna make it the same Gail. So let's we reduce it to 10% camera does it. This wall. All right. And the next thing is, we want also Teoh to change the position off the object, like you can see that. Ah, these taxes about a bit above here. So we want to take the wine positions, and we're gonna play it here a school. So it is a consistent we're gonna take this, like was a sureness wall. It's basic. Here you can see that. Ah, the button. You need to be changed. School. So this is 31 pixel from the text. Let's remove it mentally. All right. And this one, that's what Kobe, This all right? It's cool. And the next is Ah, this ling. That's what got me this as well. All right, so it looks good. No, let's we does Britain like so we want to add Lingus wall form. Ah, this hot born to these. So let's we drank it. Click and try. And then we're gonna set the trigger to time, Russell, because you want to make this to be automatic. So we want to make sure that ah dissecting is the same like this one. So it's timer is your seconds. Also, any meat. He's out two seconds and swan is the same. Zero sickens. He's out in two seconds. All right, so if you want to test it, if you click on this play buttons here, it will start with the home with the outboard that you already Marcus the home with indicated by this blue icons. But if you want to start the prototype on the at boats that you want to start to, for example, we want this thought we departed site for testing proposes from this one because we were working on this currently. So what you do is instead off you are creaking. This play button before that, while you have to do, is just choose which are bought. They want to play as the starting at port. So because you want to make this airport as the starting our port for this design purpose at this time, so we click it for us. We click it first and then but click it play button. So Ah, this at what will become the initial outboards when they brought it up lunch. All right, It's looks nice. No, let's we apply the same thing. We apply the same thing like on this diversity. Okay, so the next thing is, when you click on this for you all Ah, they see it is card instructions. Well, so to do that let's we copy this this wall because the design Alice, we copy this offer lay folders. We're gonna pace it here. And the next thing is, we want to reduce the capacity. So that's where it is it Before that I want Teoh just putting here below it. All right, That's cool. And let's who reduced capacity 20 Swan, asshole. All right, so let's look at some rectangle here. So it is just, like, quite tricky. Okay, Syrian borders. And we're going to read this, Theo Opacity to zero persons. All right, now, let's we go back to Prototype Tab, our click and dragon. I'm gonna use the same settings. So in these raising tap or to any meant outboard is out. And is there a 0.3 seconds? Okay, this one, that's all. Well, today, maybe he's out. We're gonna make sure that these 0.3 seconds it's like this one. All right, so let's redo it. Now, let's see. So, like, this outpouring will click, click, play again. Gay worked, like, feel all all right. It's working now, so let's be at the another instructions. So, in your cellar, click on these overlay. They go to this outboard. So how to be extra? You automatically that just dissecting the automatically copied the setting from the prefers instruction so you don't have to adjust it again, all right? And the next thing is, we want to, um, recites the image so you can see the ism interruptions. Let's let me play the first, okay? For you all. All right. So it looks cool. Blading. OK, so we want to add ism interruption. Like like this one. You can see that is instructions. So it's very simple. Where you were going to do is just recites the image. Sim egx. Okay, so we go to resign moment for us. Lots we dislike. So, like, the image, Okay, lets we recited a bit, So Okay, so, yeah, it's quite it's tricky to attorney. All right, so let's check it. So I like from sketches. If you want to select, um, de layers below in, I can. Right click. And there there is, like, a select liars options. But in Adobe X'd, uh, there's no that's that kind of feature. So when you forget the name of the foul, then it's kind of problematic. Now, let's we turning before first. Okay? So this is the image, all right? Unless we precise it. Okay, So I want to hold my option key, and she saw it recites center. Okay, so we're gonna we're gonna recites it. Just slight resize. Not too much So resume is not too extreme, Will. Not too fast. Like I think this one is. That's fine. Let's we play it again, Okay? I'm a forgot to select this force. And as we click bay Okay, so now you can see that the zoom instructions. Right? All right. Okay. Now let's we continue looking at at dry construction here, so it is very simple, actually. Once you understand the concept, then this is quite easy, okay? With clicking and drag it here and trigger his strike. Okay. And we also at the same into Russian on this card, click and drying. Okay. The triggers. Trying how to any main. Now let's we play it again. Okay, So it's working. All right, so it Congratulations. 11. Connecting Interaction Between Cities: after we successfully created the interactions off this second city and the next they're best. We want to add interaction when you say click on these cards. So when they click on this current digger to, ah, this city instructions and something, when there's a click on these quality and poor card, they go to these animation interactions. So that's we do it. So let's go to or the type tap. And basically it's very simple. What we do is we add tap directions on this car so we select this card, so I make sure that it is selected and click and track. So we're gonna drag it to this outboard. Why? Because this is this initial starting point from these interactions. So when you click it, we want that user to land toe this hut board. Okay, so you can you can adjust the setting here like the transitions, and for these swine we want to set the action to transition, not out to animate. Okay, because, ah, we're not out to any meeting it. It's actually different thing. OK, so we just, uh, select it, asked the transitions. And for the an emissions, I will prefer to none. Because how we won't resort to directly, um, see the interactions and emission from these at board itself. So this add more. Already have. It's an emissions. So when you see click on this card to this car, it basically we just want to let these air see this car directly. So let's replay. This broader type could play Alice Hebrews feel all and ways to click this card. Saudi seat is identically goto this initial outboard. Okay, lets you play it again. Click. Few all click this card. Okay, so this is very simple. No, Let's we at the same interaction with this car. So you're DoubleClick kid and click and drag, and we want to add the introduction to the support. Okay, so we're gonna apply the same setting, which is tapped trigger and the same thing for address. Alyssa, click play. Feel all so it still breakable. Click manning a. Okay, click at the game. Click quality. Poor. Okay, Okay. Okay. It's frequent when it's live in. When you click on these, it does work. Why? Because you haven't add the interactions on this one. So you want to do that? You can't do something. You add the interaction on this Carcelle. So let's we do it. Click and dry. Indra gets here, the Tigger stabbed. Transition on an emission is not. And we're gonna sort of we're going to do the same thing for this one as well. All right, so I think it's works. Now let's replay it. We click on a few all when on Medina. All right, we cook for you all and click on this quality poor. All right, so it works Very well. Now are excellent. Congratulations for completing this classes. So I hope you can enjoy it. They can learn something from it. Well, basically, this is very simple concept. You want to understand the basic principle out of intimate you can You can apply it to any project for this kind of interaction. So this is a very simple actually what we wanders if you I suggest you to practice it. If you want, you can download the assets and, ah, recreate this from scratch and do it yourself and try it yourself so you can get better understanding how to use this auto animate features in other B x D. So so congratulations for finishing this class so I hope you can learn something from it. If you have any questions, you can ask me. OK, so Gore installations. 12. Finalize the Prototype: in this video. I want to fix two things in this part type. So basically it's not a big issue. It's just a quick fix because ah, there's one thing that is missing. So when played the protest site, you can see that when you click it, it is work. DeCero doesn't worry. And the second thing is on this Marinus city can see that the country still Malaysia. So it's it's wrong permissions. Now I want to fix it this video, so it should be really quick fix. So we're gonna start with fixing this information's so make sure that we when we changed on the design of we are on the design tab, not in the prototype. Okay, so I want to move this overlying layer first to write because we want to access these texts because it's hard to click, and it's very hard to click. So gonna just body here for us gave him off this layer to it, right? And then we can access this tax when ah changed its to Saudi Arabia and the populations is 1.1. The language is Arabic on. This basing has 50. Okay. All right. So it looks good. Now let's we put back these over a layer we can change Expedition s wall zero. All right. Okay. And the next thing is, we want to add these interaction. So we go to prototype and then when you said click and these are Oh, they go to to these Ah, at port. So we want to do the trick as well, because we cannot access these arrow. So we want to add some rectangle on top if it gate when a remote Forneris and sadly, a positive zero. All right, let's go to broadside again. And now let's be add this to here. And it triggered a step. Transitions, reductionist, transitions and animation. It's none. Okay, so the same thing for this one who get not to go to designed for us, that's we had rectangle here. Okay, Gonna Border said is 20 angered a prototype. Now we click this and drag it here and a Tigger step. The this nation ists correct had a machinist line. Now let's we profusely broadside where we click it, Click it Click this one. It's working. Click. Here It's working. Click This one being click here. It's working. Okay, Sorry. Correct relations 13. BONUS - Share the Prototype: So after you have successfully courted prototype, you probably want to share the prototype bitter your user or to a stakeholder to do that in Arabic. Status quo. Simple. You see on the share buttons here, what you want to do is just click at once, and then you can see a few options here. So because we want to share the prototype for Refute persists. So the best option is to click on this share for if you, because you can interrupt it. Brought outside the can can comment. But if you want to share a prototype for development purposes, then what you do is just click on the share for development so you can you can, ah, your developer can inspect the parts type like city spacing between one object to another object, but for a few proposes, for example, that you want to conduct use Erviti testing studies. What you want to do is just click on these share for here, so let's we click it, and in the settings you can feel the titles, and also you can see there. There are so few options here who do We want a lot of comments on it brother side or not, whether you want to show the hot spot scenes are not things like that. One of the triggers. If you want to conduct usability testing, you probably want to. And check this because it is showing the hot spot hands. It's means that you so I can see. Okay, this one is clickable. Okay, I have to click that. I have to go there. But you want to Really? Ah, test the Yusor. You probably want to in check, because you, sir, should not get some here because we want to really test it. All right, so to do that very same board, you just click on these, create lean, and then the process will be uploaded to the adobe cloud. And then you will get some sort of like a lynx. And then you can copy that Lincoln share to your stakeholder or your users. Okay, So it's creating public laying. It takes sometimes. Okay. Okay. Just white. So is usually not too long by their on war minutes. Two minutes. Okay. Sometimes could be faceted. It could be slower, but it should not be like one hopper sick. It's on stun our It's 100% now. All right, so dissuade a couple of seconds more. All right. Okay. So you can see that the sister Ling, why you want to do is just copy to Sling. And you can share this linked to your friends. To you, sir, to the stakeholder. So let's we check this link, I'm gonna goal with Google Crumb, and that's we check it. Okay. All right. Side loadings So I can see that on the right side. Here, there is a common sections. Where is this? Can comment to depart site. All right. So you can hide the span, Elissa wall. Just just click it ones, All right? You can also just expand if you so let's go. Intricate. Because I allowed the hospital in. So when you click on these area where there is no hope of their report showing the hot spot locations So if if you want to conduct use abilities, then you probably want to inject that. Okay, lets we see it. All right. So you probably notice that probably the process it's not That's very smooth, but I think it rosary depends on, um, the complexity of the prototype. And also probably he depends on the computer that you use. You have more far, sir. Computer with really high performance processors. Probably the quite, um, smooth. But so far I think it's this very cool. And you can try. It became copied ling and shared. Cling to your friends, to users, to your stakeholders. All right, good luck.