UI/UX Design: Create Interactive Registration Form in Axure RP | Irfan Rosandi | Skillshare

UI/UX Design: Create Interactive Registration Form in Axure RP

Irfan Rosandi, I Teach Design on Skillshare

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (55m)
    • 1. Intro

      0:33
    • 2. Let's Start!

      6:02
    • 3. Designing Custom Text Field

      3:54
    • 4. Floating Label Interaction

      2:18
    • 5. Finishing The Form Fields

      6:00
    • 6. Line Interaction

      6:18
    • 7. Create Thank You Screen

      8:26
    • 8. Loading Animation

      5:07
    • 9. Registration Success Animation

      11:38
    • 10. Publishing Your Prototype!

      5:00

About This Class

Do you want to create a realistic prototype for your project? do you want to get early feedback for your app before development? Join Irfan Rosandi for a fun class in designing an interactive form prototype in less than an hour. Whether you are a UX Designer, UI Designer, Developer, or anyone who want to create a realistic prototype, this class is for you. In this class you will learn how to use one of the best prototyping tools called Axure RP to create an interactive prototype.

Enroll now!

Transcripts

1. Intro: welcome to actually brought the typing class. My name is a friend, and I use actual lot for prototyping actually squandered the best soul for rapid prototyping. It can correct from simple to complex interaction in actual in this class the oil and how to correct a simple interactive registration form prototype. We will be working with dynamic panel custom widgets on animations. You will learn to stay bicep process and heart equipped, interactive form prototype from scratch and lecturer Let's get started and click and roll. 2. Let's Start!: All right, let's get started. Said the first thing that we're going to do, we're gonna open. Actually, let's re open, actually, and then we're going to correct any project by go to file and click New. So it's opening new documents by default. Actual automatically create four pitches for you. But this time we don't eat all of this page some going to the lake holidays on when I use the late on my keyboard. Click Yes. To add new Bates, you can click on the seconds at bay Chaikin click it and then I'm gonna name it to be for And then I want to say for this project by go to file and safe, we're gonna save to be form and safe. All right, let's we double click on it to upend e. They working are here, so as against is still empty. Let's repair for your new Brosa is against the biggest steel empty. It's white. There's nothing here. All right, let's go back to actually And they were going to change their background colors. We're gonna style on the back color sections were gonna make to be gray Let's go back and I'm gonna refresh it So a change. Cool. We go back to action and then we're going to add the beggar Another form. I'm gonna use bucks one and click it and drag it and they're gonna set the with the 500. And that had to be 500 that's all. And drag it and then I want to hide this border of the box a click it And then on this line with section I'm click on this drop down And when it's so like it to be not and I'm going to add to shadow on it click on this struck down I'm sorry And this other shadow and then activate the shade options They're gonna said the X and y to be zero because he wanted shadow to be centered. And I want to change the color of the shadow. Did these scullers so we can have more soft shadow. And that would make this to be run. Did we click on the box and on the corner ready sections We're gonna set the bait on. So we have funded in the corner. Let's do it before you're back on the bus. It's cool. We get back to actually and now we're going to lock this box. So we're not accidentally moving it when we design it. We do that by goods arrange and then looking. So kiss alike look, location and size. And now we're going to add label to the form we clink of these search icons led to a search label. We're gonna type label, we drag in, and we're going to edit the label. We double click on it will open the editor, so I'm going to make it to be, Well, the Zeina meet And they were going to change the size of the level, click it and said the to be 25 because there's no 2012 here, so we're gonna It's I would minimally 25. All right, so we're gonna add another level. Drank it. I'm gonna add the tech line to be me designer Jain food. All right, so now we're going to add button to the form. I want to use boxes, click the books one and drag it how to set the with to be 400 pixel and hate to be 50 pixel . And they're gonna change the colors today to be discovers 666699 and then I'm going to add text. So I double click on this. And the ad register. No, I'm gonna make to be white and said the form to be 14 and make it bold. I want to make these buttons to be rounded as well. So, as you can see, there is a little triangle here. Click it and then you drag it to dry like this. All right, It's cool. And now I want to move it to the bottom. Cool. And that we're going to at the Tex. Let's have a tax. We're gonna search Texel. We're dragging. We're gonna set the with to be like the button. And now we're going to add the placeholder two districts, Will we get the properties, and then on the hints section, we're gonna add a perilous holder. So because thes is going to be the first name, so gonna make the him to be first name. All right, so let's we'd be free on Bryce, sir, I'm quickly fresh. All right, so we have that sexual with placeholder. So when I type, it's gone. No, let's go back to extra 3. Designing Custom Text Field: No, we're going to make the text, Will to be like material design. So I'm gonna Hi. The boulders off this tax will right. Click it and then just hide border And then I'm going to add line and I want to set it to be decisive thing, But then as well. And I want to set the width of these line to this. And I want to set the capacity to be 10%. You can find opacity under the taps style, and then I want to zoom in. You can East Command placed ism in. I want to make it. It's a bit closer to the line and I want to make it decides to be a hiker. All right, so I want to make it a little bit closer. All right? Cool. I'm going is a month. And then let's repeal free only Brosa when we time. Cool. No, let's go back to extra. No, we're going to add the floating label. So what we want is that when you see, click on this stacks first name so the placeholder would disappears and the floating label were shows lets you make it the first thing they were going to do? We're gonna add the floating label. We're gonna use label and they want to set decides to beat off. And they were gonna change the colors to be great. I'm gonna use something like this Crate my thing, it's too. So Okay, I think I'm when I use discovers. All right, Cool. And now let's we change to be first name. We're gonna make it on some. So what we want this will this apace and they sort shows. So we're gonna put name on this section. We're gonna make it to be label floating first name and this on to be thanks. And also, we're gonna add the name also to the line. So what? We need to add the name to this rigid. We need to name the widgets if we want to add instruction to that widgets. Because that's important. Because when we go to properties and then on these interaction sections, when we add the interaction, For example, if I want to add the on click interactions and then I want to show action. So this is the list of possible actions that we can do. So we need to find specific widgets So that's why it is really important to name the witted so we can find the exact widgets here. So make sure that you name your widgets if you want to add interaction on it. So against the like, which we just you want to add the instructions. All right, so in a clique in sulfur. So we have named these to be label floating first name and this one text first name and this one line first name. All right, so by default, we're going to said to be hidden said it hidden. And now let's we at the interaction. 4. Floating Label Interaction: for the first interactions we want. When you see, click this first name decks will we want to show this footing label how to do that? We said like this text, Phil. So it's selected and anomalies on focus sections. We're gonna add the interactions. So we're going to show this floating label so you can do we're gonna go on these shows sections and we click it so it's mean that we're gonna add show instructions and then would we just that we're going to show because we're going to show these floating label first name. So we select this So witness said the to be show and we're gonna tow at any missions we're gonna use the slight up and emissions and the timing. We're gonna set it to be 200 milliseconds and click. OK, so let's repair fee on Bursa. When I had a fresh when Actually it shows the first name, but you notice that the place all there is still there, That is because if we go to probably is a good click on the text first name first and we go on the hints sections. We noticed that the hidden will hide after we type. So, for example, if I go to fight folks when I type, that's when the king will be hidden. So what we want we want to him will be hidden when we click on this text, will. So we go back to actually, I'm gonna set it to be focus so the hair so the him will be hidden when it is on focus. So let's we go back to Prosser and refresh. So I will click it. You can see it's gun, so I will floating label with shows. All right. Good job, guys. 5. Finishing The Form Fields: who have successfully created the interaction for the first name. And now we're going to add another text will, which is last name and email. So let's we do the same thing for that. We just going to copy this you can create from scratch, but this video, I want to copy it. So how to do that? I'm gonna select it by Click it and then I'm going to hold my shift key on my keyboards. And then I select another widgets. So I click the first name takes first name. Well, I'm holding my shift key on my keyboard, and then I'm gonna click on this line as well. So it's has been selected, and then I want to move it a little bit to do it up. And there aren't copy amusing command, See? And then I'm gonna pace it using commend fee and I'm dragging, and then I want to copy it again for the email. So I'm using command V because it's been copied. All right, so let's we do some little editing here, so I should not this when we double click it, it's still first name will be changed to listening. And this one as well. I want to change to email. And then, as you can see, the placeholder. Still first name. Let's we go change it. We're gonna change to be listening. And this one also still first name when I changed to email. All right, Another important thing that we need to change is the name off the widgets. So as you notice when we click, it is still label footing. First name. So we're gonna need to rename it, because we're gonna add the interaction to it as well. All right, so that's why we need to rename it. So we're gonna only name to be available floating listening So we can differentiate on this instruction section later. When we are the interactions, this one as well takes lessening the Linus. Well, line, I'm gonna do the same thing for email. I'm gonna available for CC mail this oneness wall text email this one line. All right, so let's we prefer you under Brosa fresh when Ecklie shows. Right? But unity's when we I lost focus. The label is not hidden. The label isn't being hiding. So willing to add another instructions here. What we won when you said lost focus on these steaks, Will the's floating label will be height back. So what we can do on this text? First name. We're gonna add another interactions. So what we want on these Unless focus sections, we're gonna make this labeled to hide. So we're gonna add on the show sections and that we have added, and then what we want to hide. We want to hide this floating label first name. So let's search. So label 14 1st name. We're going to select it. And then instead of show, we're gonna hide it. We're in a height. We're gonna add any missions I'm gonna use slide down and click. OK, so let's we see in Brussels when I do fresh when I click it the shows. But when I lost focus on the stakes will, let's say I click on this last name Dixville. You notice that the floating label will hide again? All right? No, we haven't added two last night. We're gonna added this well, so we go back to actually we select in the text Last name. That's who add it to on the unless, of course sections. When I go to show and this when a fine thing. Let's name and I want to set it tight when I use the slight down on a mission click. OK, we're gonna do the same thing for email on the unless circle sections on the show. That's we do for email when I hide it and the main slide down click. Ok, all right. Like we see in the brush. I'm going to refresh when I click first name shows. All right, you can do it consolations. 6. Line Interaction: No, we're going to add another interactions. We're gonna add the line interaction. So when users click on the first name, this line will be high collected. So let's we do that the go back to action and then we're gonna add another interactions. So we click on the text first name, and then we're gonna add an ad in traction on this unless on focus sections. So we double click on it and I'm gonna at a night interaction. We want to add the set capacity instructions so it clicks at capacity. So what we want when you see click on this text, will the opacity off this line will be change. You know, this this line a pass ity right now is 10 persons. So what we want when you see click on these text will we want to change the opacity of this line 21 handed person. So it's to be 100% black, so it's looks like this is it's being hike lighted. So let's do we do that on the center capacity we're gonna find line first name. So that's why it's really important to name your widget. We're gonna set capacity to 100 percents. I want to use animation, ease in out keeping, and I want to make it to be 100 milliseconds and click. OK, so let's we go back to Brussel at the C. D. Your soul. I'm going to refresh. And when I click it, there's highlighted. Let's go back to extra now we're going to add And I did interaction that is under on low circus sections. So you notice when when we unless a quiz on another text will This line is still buying high collected. So when I click it so this line is still buying high collected what we want we want when it is when these texts Willis unless vocals this land will be set back to 10% the capacity of this line or be sent back to 10%. So that that's we add another interaction. I'm going to copy this How to do that? You click it once and then just using command seat, Cupid or Control. See if he is using BC I'm copy and then a click it once on the unless focus second and then I'm gonna pace it using command a fee and then I double quick. I want to set it to 10% because basically the value off these interactions and this interaction is on Lee on this a passivity. So that's why I just copy it a click. OK, and then let's we see theirselves going there a fresh when I click. It shows when I plus of course, it's being said back to 10%. All right, call No, let's we do the same for the last name and email they go back to. Actually, I want to add the interaction for the last name for us. So I click on the text last name and then on the unfocused sections I'm gonna add that interactions said the capacity said a positive line less name, and I want to send it to 100 persons. And then he made a scene out cubic with 100 milliseconds. Click OK, and then this time I want to do it manually. So could have basically gone in. And I said the capacity I'm gonna find line less name so we set it back to 10% to an emissions is in out Cubic wonder Melissa Kans! All right, so the more you use actual, you probably will more likely to copy in Pace. But for this video for lending, I'm going to add it manually. So I click on the email. We're gonna add it again to email. Before that, let me check on the brother. Have been a fresh when I click it when I click on the last name. This one is not a collected again. When I click back on the first name Cool, it works like a chunk. Let's go back to actually, we're gonna add on the unfocused sections We're gonna add capacity again, said a pass city for line email by an email. When I set to 100% I need made a scene at cubic 100 milliseconds. Click OK, and then on the Unless circus sections. We're gonna set it back. When I said a paucity back to 10% an email 10% and remained. Is he not? Cubic? 1%. All right, let's go back to Brussels. We need fresh when I click and first name shows last name an email. All right. At school. It's works very well. Congratulations 7. Create Thank You Screen: all right, We have successfully designing our forms and have aiding interactions to the forms. And now let's we make a little adjustment to the forms before we making the thank you screens or the loading screens. All right, so what we can do? We're gonna fix this a little bit. I want to change the color less well, and I want to Murphy a little bit onto both with this wall. So you want to sell, like, multiple widget, make sure you press the shift key and select the widgets to select more than one witch. It's say I want to just just a little bit. All right. Cool. And now I want to grow bit. So I click it whole shifty click gain and click this line and right click Ping group. And I wanted to same thing for the last name. Right? Click anger plate Klay. Click right click angrily, Eric. All So I want to my feet a little bit on the top. Full. Ah, right. That's what you're feeling, Brossel fresh. All right, Cool. It's looks very nice. Hurry, gays. Congratulations. No, let's We create the thank your screens we go back to actually so what we can do. We're gonna use dynamic Bennell, CIA. So just for your information, dynamic panels lets you search the widget place. Dynamic panels. So dynamic panel. It's like a container, but it has several states. As you can see, there's this icon. It has like liars, so you can design this form on the first layers, and then you can design the thank you screen on the another layers. You can design another screen on another layers that pretty much dynamic panels. You can set these layers which want to show, for example, if people click these buttons, then sat it to another layers. So that's what we have to do so you can create Dine McDonnell. Just drag and drop it. He can drag, and then you start adding liars. You can adding layers. So in dynamic panel, it's called ST Second's thought designing. For example, when I double click it, it will open Step one, and I can start designing a state one and then I go back at the booking again. I'm gonna at Step two and I double quick it and I designed the state to that's one off the way how to do with the diamond panel how to design with dynamic panels. But this time, when I use another methods, so I'm going to delay these. So what we want to do is that I'm going to select all the widgets. But before that, I'm going to and log these good to arrange lucking and unlock. All right, so let's we copy, not copy it just Celac We're gonna still, like all the widgets and alter its selected We right click on this. And then, as you can see, there is a comfort to dynamic panels. So let's we click it so all of these widgets has been confected to a dynamic panel. And now let's we name this dynamic panel, so I'm gonna use DP the P stands for dynamic panels and the I'm gonna use for a DP form. All right, so when you double click on the stomach panel unit, please. This is the first state which is state one. So we're gonna every name it buying, right click, and then when ah name to be full from input. And then we're gonna add another state. You can add by clicking on this at Aikens, it will give you the empty state like this when you open it, it's antique and designing. But another way of doing that you can copy. You can do placate. So this time going to delay its that one. What I want is that I want to duplicate So a click duplicate and I'm gonna make to be Thank you. Thank you. So this one is from input. And the 2nd 1 is Thank you. You notice that there's a layers so the first layer is formed input. And the 2nd 1 is Thank you, Lee. You can have multiple state and there's you can do a lot of states, but this time we need only to state for input. And thank you. What we want to do later is when you see click on the register buttons we want to set the stunning panel to do Thank your screen. That's it's very simple. So let's we designed this. Thank your screen. We're going to open by double King it and double kick. So I want to just delay this. All of these are gonna late are gonna click and hold shifty. Okay, so I'm going to dilate. All right, so I want to look at the game that we're going to add the colors to this that would add color to the box. And then when I said the colors to be this colors this 1666699 and let's we pray for you on the Brussels when we BaFin where we click on their guests and now nothing happens. That's because we haven't added the interactions. So let's we add the interaction. Now we go back to lecture. So we opened the dynamic panel on the forming. Put the booklet on on this. Regulators regulation now buttons who add the interaction. So when you said click it so we add the interaction on the on click sections. So we want to set the panel, which is the dynamic panel form savvy to thank you. So when you say, click the register now buttons set dynamic Bennell form state to the thank you screens, right, so let's we click. OK, let's sweep graffiti on the Brosa. We go back to Firefox and going to refresh, so we're not click. It shows, so let's we add any mission to it. We double click again to edit it, and then any mating, agonize the fate and emissions. And then I use 300 milliseconds later. OK, let's go back to pressure. Fresh. We click raising now. So it's not that grill Isa Pantani is showing this state to. But there is a fate and emissions, all right, so let's we play around with animations on this right now. Let's go back should actually And then we close it and then we go back and click on the sinking screens. So what you want? We want to add the animation. Here's the fun parts begin, but before that, let's we add the widgets that we want to animate. 8. Loading Animation: I'm gonna find a ticket. I can't. So we're gonna drag it, and then we're gonna use label. So for the first animations, what we want, you want to make this stick it to any made, like, like many me like this. And then this label will be, like, booking year to get All right, So we're going to make any minute animation that this. So I want to make it to be wiped and then thesis also to be white. I want to make it to be centered. I want to know if it to be sent it. All right, so I want to make it to be sent us. Well, all right. Cool. And now let's we add the end emissions. So let's we name it, you win a name I can get, I'm gonna name it to be label boo. Getting your ticket. All right. Cool. So, what's the fen? What's the triggers? So this animation will start afters this dynamic panel form change the states. So when we click regular now buttons, we're gonna change from state form input to state. Thank you. So the three girls is when the ban ill state change. So let's we add on that defense triggers. So on this DP form and on the on panel state change that is where we put the interactions we So we double click it. So let's we add the animations we're gonna use move here. We're gonna add more interactions. So what? We want to move. We want to move this. I can ticket. So let me find Aiken can ticket with clicking. I want to move it should the up a little bit. So on the section, move by on the y axis We're gonna We're gonna make it meanest, meanest, an so mean. If we don't make it meanness, it will move to the bottom so it wants to make it move to the top. We're gonna make it to be minister. We're gonna make the animations to be swing. That's we click. OK, And so let's will be free. And Brosa, we go back to five folks when I am fresh In a way, I click register. Now you see, it's moving. No, let's we make it. Move it back to done to the bottom. That's what we go back to action. Who add another move. Satya. It spoke to the top then Bixel, we're going to set it to be moved back to the bottom, then pixel. So I want a copy having an icing com NC and then I'm gonna base It commends E so we're gonna change the value for me. Niss to be positive. So the first when it executed this line, you're gonna move to get up, And then when they execute this line, you're gonna execute and magnetic it two d puts him again by 10 pixels and then click OK, and let's see, Go back to fry, folks. When I click Fresh and Wycliffe Gregerson now I click it right It's moving. No, let's we copy it several times I'm gonna copy and publicly, and we're gonna hold my shift key. And then I may select the 2nd 1 I wanna could be commencing E and then they're gonna I'm going to pace it two times in a base it once and sick click OK, and let's go back to Firefox. I'm going to click a fresh when I click register now, so it's like any meeting cool. So let's go back to actual 9. Registration Success Animation: And now, after these animating, we're going to show another level. Let's you add that and drag it. We're gonna make something like your ticket. It's been sen to you're email. So, Jess, fully see you there are Okay, so I'm going to make it, and it's up. So I'm gonna make it to be centered a line. I'm gonna said to be white as well. Oh, this one. Andi, I want to use the checks icon district cycle. I want to make it. Why does Well, all right. So unless we name it, we're gonna name to be I can check. And this one to be label. See, you are All right. Cool. So what we want wound after these, animating the stick, it is animating. We're gonna hide this and I'm gonna show this label and Aiken's all right. But before that, we're going to hide it for us. We're gonna set to be hidden in a right click and set hidden. We're gonna make it here and then so let's we add the interactions. So after it's moving out there, it's smooth. We're going to hide it. So let's we at the height interaction I'm gonna use search the search ticket This ticket I can't take it. And I'm gonna hide with animation. Faith. And also, I'm going to hide the dis label as well, blocking your to get label so going to hide its wall with the fate and emissions. And now let's sweep it for you on the browser force. We're fresh when I click Reagan Zanele, Wait, what's disappears? It is because we haven't at their weight interactions. So what action does when actual reads this commands? It's meant that we're going to move, but actually will read these at the same time. It's all so when they executed it also going to execute this one height. So that's why this stick it and his level well disappears even if this not being executed all because actually has looked there is high command here, so actually will execute this command at the same time. So hard to offer companies. We're for companies. By adding weight interactions, we're gonna use weight. So how many really sickens? We have to wait. We're gonna wait by the total amount off the animations. So from this animation to this animation, we need 1000 milliseconds. So if we add all of these. We need 21 2000 milliseconds this time this animation and destination. So that that's all we need. 3000 milliseconds. So we're gonna wait 3000 minutes again. So you gonna tell actual actual when actually all sick execute all of this line. So actually, when they were actually execute Wait, actually, we'll wait full 3000 milliseconds. All right, so let's we click, OK? And we go back to Firefox when we're fresh. When Ferguson now. So you know, actually, we'll wait until it's finished, and then it will hide the label. All right, so let's look at these interactions. We're gonna move it to the top. So after we hide it with a re hide this icons and the level, we're gonna make it moved to the top, and then we're gonna make it show. No, we're gonna double here tonight, so we're gonna show this icon in a show. I gun check. And then when I show you with faith and Emissions 200 milliseconds and then we're gonna move, we're gonna using Move. We're gonna move this icon as well. So we're gonna find econ. I can check. We're gonna move by 300 pixel. So I remember he wants to move it to the top. We need to add dreaminess. We're gonna use any mission swing. We're gonna make 500 milliseconds and then that's we try on the brother when we are fresh tackling Rogozin Now say its weight. Okay, so it seems really, really fast. So let's we fix that. We go back to actually, and as you know, it's a little bit too high, So gonna just fix it. So let's we fix that. So we want to move it to around to handle it and 50 and then I'm gonna make it to one Tencent and 500 milliseconds on the animation. Haven't I changed to be easy now? Cubic. Well, you can play around with animation. There's several animation you can play runs in actual, it can just experiment. And then let's we use the East in art Cubic for this time. And then let's week like gay and we go back to five folks and let's were fresher when I click Coraghessan now. So it's any meeting, all right? It's very smooth. So after it's moving to the top, we're going to show the label available. Sheer See Iran, Syria on Oracle. So, by default, we want this level to be moved as well to the top at the same time when this widget move, Frank. So we want to add that. So we're not only moving the icon check, but we also want to move this icon at the same time. So we find the label labels Iran. Let's we find. So this label see Orion will be moved this wall by your handed and 50 pixel. That's we check it. We're gonna have a fitness wall. Meanness 250 pixel. But this time we're not showing it yet. We're not showing this this label yet. We have shown the Eiken checked, but we have not show this label yet. So at this state, we only move it. So after we move it, we're gonna show it. So let's we add another interaction, which is show we're gonna show this label labels Huron during the show can make it a nimit with faith and emissions. When I make to be 500 milliseconds and wait, I see GNC, we are using any mission here. So we need to wear these animations to perform for us. So as usual, we need to add weight. So at weight, Khomeini milliseconds we need. We needs 1000 and 500 milliseconds. Let's we add 500. Sorry, let's you add wonders and 500 milliseconds and click OK and let's sweep Free and Broza going a click of Fresh where Click Greg isn't now. All right, It's very nice. So let's we fix a little bit. It seems like still habits to the topic. Let me make it game. So when I changed to 200 that's we changing. We're gonna move feed to 200 200 this one. So it's 100. So and then slow. If you're in Brussels, why click Rogozin now? All right, It's very cool. Congratulations, case. 10. Publishing Your Prototype!: or, I guess, congratulations again. So you have successfully designing uniforms. You can still play in the do it experiment with the forms, but the main idea is that you get the understanding how to create these interactive forms. So right now what we're going to do, we're going to upload this body type to the Klatt. That that is what we call the actual share the actual Shays when you can ability, prototype and to the cloud. And then you can shadowing off your prototype to your friends, to your clients or to anyone's. And then they can open the parts, like on the computer, using the link that is provided by your So let's we applaud this prototype. We can do that by go to publish, and then you can see there's a published section Let's we click publish to actually share with Click. It's and then there's several options here you can Cranie Project can replace an existing project. So I was trying to upload this before, So, as you can see, there is existing projects. So the actual notice that this project has been uploaded before, so it's strike my project, i D. But this time we want to create new projects. They want to upload this part cyp to a new cloud project. So I'm going to create any project and just name it. I want to name form. I can name anything you want and then we publish and that's it. We wait to actual to applet our part time. And then, well, it's done. Everything you can see there is ailing here. So this ling that we're going to share to your friends or your college your clients to anyone. So I'm going to copy and then close it and we go back to five folks and then I'm gonna pace it. Unit. Is that this? They sure I'll sell my local, So I'm going to base it. And that's why we see. So this is the radio online guys and he gets thought. Here we go. We can studied fun, sanity inkling. Regular Now. All right, it's perfectly done. Congratulations again, Gates, But wait. As you know, these despotic type, it's like it's not centered, right? So how to fix that? How to make it sent it? We can do that. Bye. Go back to actually. So we right click on the dynamic. Bennell. We right, click and then we click on the being to browser, click it once and then makes you click it bean into Brother Window and just check center. We'll make it mental and just lift it. Just make it unchecked. So click OK, I'm going to safe in. Let's we prefer it on local furs when we for a few on local. So it's been centered now, even if when I this make it disappear so it's it's centered now when I just recited Blossom , it's centered now article. But this time it's still local. It's not being applied to actually share, so when I refresh it, it's still not century it. Why? Because we haven't uploaded again to actually share. So let's go back to actually, let's we applauded again. We go to publish and then we publish structure share. So this time we're not going to create new project. What we want to we want to update the existing project, which is this project so actual automatically detected. So we want to replace this project. The existing project. Let's click publish, we publish and we'll wait. So that actually is generating the broadside. It's wait So this is the coursing of actually can update the prototypes and the links. Still the same. The laying is not changed, so you can. You client, your friends can get the Lecter's freshen off your prototype. That's that's how amazing, if actual. So we close it and that we go back to five folks and why you're a fresh. So it is his online and it's has been sent it. Alright, it's Burbank now. Correct relation. Guys really excited. Let's do your project.