Transcripts
1. Introduction: have you ever wanted to convert your feet more prototypes into a native Rus and Android app ? If so, you are in the right place. Hi, My name is a rash and I'm a UX designer in the scores, you and I are going to design and create three different re award APS together, a contact app and RSC PM, and a fair insurance without cutting. You heard me right now, with the help of the Bravo platform, it's possible to actually convert your feet. My design into native APS quickly. And the good news is that you can publish your app to the app store or place. Or by the end of the course, you will learn how to make riel world applications that are connected to a database using the Bravo Story a platform. So if you're ready to level up, your skills are seeing class
2. What is Bravo?: Hi, everyone. And welcome back to another video of thes course in these video, we're gonna be talking about Bravo. What's Bravo? Bravo is an online platform that that's you. Turn your figure prototypes into native Rus and Android app. Incident. No quoting required. It's amazing, isn't it? But how does it work? Bravo uses special tags in order to divide your app design into different parts. For instance, if you have a navigation bar and it needs to stick to the top of your screen, we can use its specific tag to do so. Where should you write these tanks should at the tank you wanna use after the name off your layer in the layer east In the falling videos, you learn how to use these tanks in your project, so see that
3. Create an RSVP app: Hi, everyone. And welcome back to another video of the scores. In this video, we're going to create a simple R S V P application, which is going to be collecting some data. To do so, we need to create an account on Bravo study, a website which is called bravo studio dot app. So what I want you to do is to go ahead and open up this website and here you can easily sign up. Perfect. And for sure, you need to have a feat. My account and it be mentioned that using Bravo is totally free. So you don't need to pay anything for these services, which is awesome. All right. And then you can sign up with your feet, my account or with your Google account. However, I suggest that you sign away to your feet my count, because later on, it's much easier to connect our fig, my design to Bravo studio. So let's go ahead and click and sign up with Vignal. Pretty good. And here it's asking you for your permission and I'm going to click on allow access pretty good. And there we go. When you sign off first, you have three projects to create. However, if you want to get more, you can easily referring to your friends. And if they sign up, can get more projects. And now it's time to go to our feet. My account. There we go. As a matter of fact, the objective of these course is to give you the ability to convert your figment prototypes into a native IRS and Android. So we're not going to talk about design specifically in the scores. So first of all, as you guess, we need to have an art board. So I'm gonna press a on my key word and on your right side, we can choose between different devices. Make sure to use a mobile device art board because Brahma studio is made for creating mobile applications, not websites. Okay, so I'm gonna go ahead and choose iPhone 11 pro or ex, fantastic. And let me double click on its name in order to rename me to R S V. P. Uh, pretty good thes project is going to have only one screen. OK, now, let's go ahead and change the background color to something like dark blue. It's pretty good. And after that I'm gonna select text by pressing tea on my keyboard and creaking here. Fantastic. Let's right. Welcome back. I'm going to change its color to white and let's make it larger. So I'm gonna set the fund size to 60 points pretty good. And let me decrease the with off this text layer. I think if I decrease the farm, size would be better for is pretty good. It's top heading is going to be 90 and it's left. Patting is going to be 40 are right. And now I'm gonna go ahead and create a rectangle like this. Let's drag and drop pretty good. And I can also increase the corner radius to 20. Fantastic. The color of this rectangle doesn't matter, because later on, we're gonna put ever. Were you on top of this rectangle? Okay, are right. Fantastic. There is one thing you need to keep in mind. And that is how Bravo can recognize different parts off your app. Okay. As I've mentioned in the previous video, Bravo uses some tanks in order to divide your app screen into different parts. Ok, One of those tanks is called container. So, for instance, here we need to have one container, which is the whole screen, because we're not going to repeat thes screen again and again. So what I'm going to do is selecting the frame to right at the top. And that's Dragon Drum up, nerd. Two feet, the whole screen Fantastic are right. The name doesn't matter here. As I told you before, we're going to load a webpage here. But what kind of webpage? I'm not sure whether you're familiar with the type form website or not, But let me give you a short explanation about this great platform. Actually, type form is an online platform which lets you create dynamic forms in order to collect data from your customers or from your clients we can create. Surveys can create different forms. You can even accept payments. However, in these tutorial, you're going to use a simple type form in order to collect some data and type form will save those data for us for free. That's pretty cool. So, first of all, make sure to sign up on type form that calm and with free pen. You can create up to three forms and you can get up to 100 responses a month, which is quite acceptable for the purpose of this course. So, first of all, what I want you to do is to click on new type four, and here you have access to different templates. You can open up, for instance, forms and registration. There we go, and there are two options here. Let's click on online registration form template, the right one Pretty good. Here, you can preview your template, as you concedes, us hello to us and let's click and get in touch. Let's start with your first name. Let's write a rash, a right hats a damn and your email address asked at test dot com, and here you can choose a country. It doesn't matter what country you choose and register my info. Perfect. So this is basically how type form works. And now let's go ahead and click on. Use this template pretty good here. You can create different questions based on your needs. We can constant lies them some off. The teachers are paid, but we don't need to work with those paid features for now. So what I'm going to do now is to click on this design icon Fantastic, and let's go to customize. And here you can customize your form as you wish, which is pretty cool, isn't it? First of all, I'm going to change the background color because if I go back to our fig MMA design, we have used a dark blue color. And when you're loading that rep age here, it's not that cool to have a white background here. So what I'm gonna do is selecting the whole screen. I'm gonna copy the color code from the fuel section, and it's come back to our registration form on type form that calm. And here I'm going to open up thes Bagram color. And let's pace this code here. Fantastic. The next thing we need to change is our questions color. I think if you change it to wife, it would be great. Now let's click on publish, you know, to publish your changes and then and let's click on Save as New Thing it saved. Once again, that's publish it fantastic. And if I go to connect, you can see that you can connect your type form account two different services such as Google sheets, Google analytics, etcetera. We can even connected to your air table account which is quite useful. And we will use this website in our next projects. Believe me, it's gonna be so interesting. All right, Now, let's go to share. And here is our link. Now it's time to head over to the Brambles tanks. Page. Okay, so if you open up, brother studio dot website and you scroll down to the end of the page in the footer section , we can see the learn link under the resource is section. So I'm going to click on that. You can also get access to this page using this help guide. Fantastic. And in the concept section, you can open up Bravo tanks. So let's click on that. There we go. And here is at least off Bravo tanks that you can use in your projects. In these project, we're going to use a weapon. You okay? There we go. Here is our element. And here is our tank. So I'm going to double click on that copied and its head over to our figure project. And here is a rectangle. I'm going to double click on that. Let's rename me to for you. The name doesn't matter, so you can choose whatever you want, and I'm gonna paste our component. And last but not least, we need to copy this link from time form that come and let's paste it here, right over there. Nature to paste the link in the correct place right after this, Colin. And that's O. But how can you check your app? It's so simple. First of all, let's go ahead and change your name to R S V P. New. And then I'm gonna click and share and ka peeling, then head over to Brava Studio and click on Import from Fig MMA and let's paste the link here. Import. It's going to take a moment, and there we go. Now you're FEMA Project. It's successfully connected to your Bravo studio. And in order to preview your app on your phone, you should download the Bravo vision app on your phone. If you can, you can preview icon on your right side. There is a Q R code. Okay, this is the cure code of your application, and if you want a preview it on an iPhone, you can click on discerning. It's not on the APP store yet, however, can download test flight application and then you can in Seoul the Bravo vision app easily . And if you want to use an android device, you can get the app from the play store. When you got the app, you can open it up and then you will see two different bottoms. The first one's called Preview an APP, and the 2nd 1 is called C Scan APS. Let's click on Preview an app Fantastic. And as I can see, you can now scan your cure code so that miss can it. And there we go now. As you can see, your time form is low that in your app, which is pretty cool. And if you click can get in touch button, you can see that it works perfectly. So I'm going to write my name, my last name and an email address. That's you, the country, randomly submit. And that's all. It was pretty cool, wasn't it? But where our data is saved. If you go back to your type form account, there is another tap called results. So I'm going to click on that and there we go here we have one response, and if you go to responses here, we can see your response. You can also download all the responses here. And the great part is whenever you decide to change something on your four, for instance, if you go to create and you want to change something here, it's gonna change immediately in your app. It's pretty amazing, isn't it? All right, guys, that's own for these video. I hope he enjoyed it and I will see you in the next video.
4. Create a Contact App: Hi, everyone. I hope you're doing well in these video. We're going to go ahead and create a contact least together. However, this time you're going to use an A P I in order to pull some data from a server. Okay, but don't worry, I'm gonna make it so simple for you to under sent. So first of all, let's go ahead and open up Sigma. And here I've just created a new project called Contact That. Okay, it's gonna have a single screen. So let's press a on our keyboard and I'm gonna insert a new art board. Let's choose iPhone 11 pro or eggs pretty good. And it's call it contact. Fantastic. And in our contact, least, we're going to have some cards. Okay, which holds the information off our contacts. So let's suppose that we're going to put the name and surname and also the email address off our users. Okay, So, first of all, we need to create a card. I'm gonna go ahead and choose the rectangle from the toolbar, and let's drag and drop like this. Fantastic. I'm gonna align it to the center or is entirely. And as you can see, the right and left pad. Ings are said to 24 pixels, which is fine. I'm going to change the high to 80. Fantastic. And then let's increase the radius to 10 like this, and I'm going to set the color to white pretty good. As you can see, it's invisible because we don't have any shadows. So I'm gonna add effects and that city to drop shadow. And I'm going to set the Blair amount to 20 and of I amount to 10 pretty good on. Let's decrease capacity to 10% or even less. Let's set it to 5%. It's pretty good. You can also add struck to it. So I'm gonna add stroke and let's decrease its thickness to 0.5 pretty good. You can change its color to whatever you want, but for now it's amazing. Now we need to take slayers, the 1st 1 for our first and last name and the 2nd 1 for our email address. So I'm gonna press tea on my keyboard. That's Quicken here. That's right. First and last name that's decreased the font size to 18 points. Fantastic. I'm gonna move it to the left side. It's left and top headings are going to be 16 pig cells like this and let me change the way to medium. I'm going to duplicate it, move it down, and the padding between them is going to be six big cells. I think it's fine. And now let's change the way to regular. And here, let's write email. However, keep in mind that we have no information about the length of our first and last name and also the email address. So let's increase the with off our text. Layers like this fantastic and this one as well. Pretty good are right. Everything is fine. Now. Let's select all these layers and right click and one of these layers and choose frame selection. As I've mentioned before, you need to structure your app in a way that Bravo can understand easily. Okay, so these card is a container. I'm going to change its name to least and in brackets. Let's write container and we're basically done. However, one more important thing as we can see the frame that we just created, is not touching any off thes edges off our art board, and this is a problem because Bravo can recognize a container whenever at least one of the edges off each frame touches the art board. Okay, so here we can easily fix this problem by increasing the with off this frame. So I'm gonna increase it like this. Fantastic. And then I'm going to show you a good trick. Let's select all our elements by holding shift on our keyboard. Group them by pressing command G. If you're using Mac or control. Gee, if you're using windows and here we have a group. Now let's aligning to the center horizontally and one more important point you need to keep in mind. Bravo doesn't let you at pad ings to your elements in Brava Studio. So you need to predict your padding in advance. For instance, here supposed that we start duplicating these card okay, because we don't have any padding. It's gonna look like this. Okay, which is not what we want. So we need to add some pad ings to it in order to make it clear. So let's increase the height of our container as well. Like this. I think it's great, are right. That's all for now. Let's go ahead and get the link. I'm going to copy it. I'm gonna go to Bravo. Studio imports from feet. Mama, I'm gonna paste it here. Import it. And there we go. Now our design is connected to Bravo Studio, but it doesn't do anything. How can we add some functionalities to eat? As I mentioned before in this project, we're going to use some AP eyes. What is on a P I Ap I stands for application programming interface. Some of you may have no idea what it is. So let me explain it to you in simple words. Suppose that you are in a restaurant and you want to order something to eat. When you order, your order should be transferred to the kitchen. Right? So the person who transfers your order to the kitchen is called an A P i or a waiter in a restaurant. So an a p. I is basically a messenger that is going to send a request to the server and then takes the response to you as well. All right, that's enough for a theory. So now let's get into it. What I want you to do is opening up Google and look for Jason Placeholder and click on the first inning. There we go. This website provides us with the friend public AP eyes. Actually, we have different kinds of AP eyes, for instance, who have public or private AP eyes. But for you as a designer, it's not important to dive into the technical points. However, you should know that with the help of an A p I, you can receive some data from a server remotely Okay, right over there under the resource is section. You can see that we have different resource is such as posts, comments, albums, photos to do's users and these are the numbers are responses. Okay for these project, you're going to use the last one, which is called users. So let's open it up are right There we go. As we can see here we have some techs which is structured weirdly for those of you who don't know what the structure is called. I'd like to say that it's called Jason. Okay, Jason stands for JavaScript object notation, and it helps us to strike her data in a clear way. And it also helps us to retrieve and read data easily. Okay, So as you can see here, we have I d name, user name, email address and under address. We have street suite C T Z code, etcetera. So what I'm gonna do is selecting thes link that's copied and go back to Brava studio. And this time, instead of going to project section, I'm gonna go to the data library. So let's choose that. As you can see, I've already added some data collections for testing stuff. So click on new collection and its name it. Contact up the description doesn't matter. Contact up as well. That saved. And there we go here, you can create a request. As I've explained you before, we will send a request in order to get some responses. So let's click on this blue icon. There we go. And you can change the name of your request here. So I'm gonna rename me too Contact Least Fantastic. I'm going to remove these u r l and let's pace the u r l that we just copied from the Jason Placeholder website. And because this is a public AP, I we don't have to provide Brahma studio with any password or let's say key, Okay, so we can just simply go ahead and bacon send our right. And now, as you can see, we've got some responses here. It seems complex. I know, but believe me, it's so simple. So as you can see, we have data we have that i d that a name, user name, email address and all those things that we've just seen. For instance, As you can see, they've got I d one name. And here you can see the name of idea Juan as this one because of the fact that we are retrieving all 10 records. As you can see here, we've got 10 different I ds. We need to select all from this drop many. So I'm going to select all and let's check this Jake Marks. Then we need to select name and also the email address, and that's all. So what else should we do? The last thing we need to do is to bind our retrieve data for our design. So let's go to projects. And here we have the contractor. I'm going to click on this contact screen and here we have to drop menus, collections and requests. So from collections that shoes the contact abd and we just created and from requests we have only one. Let's use the contact least pretty good and I'm going to click on the add content button. Fantastic. The first thing we need to add is the least. As you can see, it's indicated that this is a frame, and if you remember, we've created a frame here. So I'm going to click on that Thank Leak anywhere outside of this window. Fantastic. And from thes drop menu, I'm gonna bind this least two data. And if you wait a second, you can see that a plus icon appears immediately. So I'm going to click on that. And now we need to add first and last name and email address. And as you can see, the email is automatically connected to email and we need to change the first and last name to name. And that's Oh, so now if the preview our lab, you can see that we don't have so much white space at the top, so how can we feats that let's go to feet must project, and here at the top, I'm going to create another container, which is invisible. So let's create a rectangle like this. I'm gonna move these container down and that's increase its high to something like this. And remember, when you're working with Bravo, your frames should not overlap each other. OK, so make sure that they are aligned perfectly like this. And I think it's a good idea to add a little bit of top heading to our container. So I'm gonna choose this group movie down. And remember, Tongue Group. It's okay like this. And that's changed the color off this container. I'm going to set it toe white since we wanted to be invisible. And now let's right click on that and choose frame selection to create another frame. And I'm going to rename me to Top Frame and in brackets. Let's right container. Fantastic. Now let's go to Brava Studio and inner to update your app. You should always click on updates pretty good on now. If you preview your app, you can see that we have a negative space at the top, which is exactly what we want. It are right, guys. Thank you so much for watching this video. I hope you enjoyed it and I will see you in the next video. So see you then
5. Design a Furniture App - Part 1: Hi, everyone. In this video, we're going to design a furniture app in Fig MMA in order to connect it to Brava studio and pulling data from Air Table. So first of all, let's create a figment project and I'm gonna name needs design Los New Perfect. You can name it, whatever you want. And then I'm gonna press a on my keyboard and that's shoes and iPhone 11 pro or Eggs art board. Fantastic. Actually, I'm gonna keep it so simple. So it's not gonna have so many art boards. I'm gonna have a launch screen, the slide menu, a product screen. And then we will add a detail screen promotion screen and eventually you screen OK, so let's get started with creating our launch screen. So first of all, I'm gonna change the name to launch screen. We need to come back to these names and add some tanks in the end. But for now, let's leave it as it is. Then let's create a simple logo here, so I'm going to create a rectangle. Let's hold shift on our keyboard and dragon drop. I'm gonna make it 105 5 105 That's a line into the center and I'm gonna increase the corner radius to 30. Fantastic. Then let's change the field to 20 to 22 22. Fantastic. I'm gonna move it up. Then let's add a D letter here. So I'm gonna press the and let's change its color to White. I'm going to change the phone size to 65 points. Awesome. Then let's add another text layer and add a plus sign. I'm going to change the way to Regular, and that's changed a color to double F D 600. Fantastic. Then that's right. Click on that and I'm gonna make it an outline. Okay, so it's not a text that your anymore, I'm gonna make it smaller, pretty good. And then we need to have a text layer right under our logo. And let's call it design. Plus, I'm gonna make it smaller. So let's set it to 24 points and aligning to the center Really good. I'm going to select all these layers, group them by pressing command G or controlled G. If you're using windows and that's name it logo and then select both their years once again , group them and leave it as it ease are right. Pretty good. One think you need to keep in mind is that this lunch screen is not gonna sharp in Bravo vision app. Okay, we only create is for the actual really app whenever you want to publish your app, the app store or play store. Okay, then let's go ahead and design our menu screen. OK, so I'm going to duplicate this lunch screen and that's remove these elements. I'm going to rename me to menu for now. And let's change the color to something dark hair a little bit pretty good. And what I'm gonna do is creating snipe menu. So I need a rectangle that's drag and drop like this pretty good. I'm going to change its color to a solid white. And let's change the with 2 281 and then I'm gonna increase the corner radiance to 20. However, make sure to set the corner radius off these two corners. Top left and bottom left to zero. Okay, so I'm gonna click Andy's icon and let's set this amount of zero and this amount was Iran's where are right. And now we need to add a profile image right over there at the top. So I'm gonna go ahead and create a rectangle here that set its with and high to 50. Fantastic. And then let's increase the corner radius to 18 like this. And now we need an email. So now I'm gonna use a plugging called contents riel. And if you don't have this plugging, make sure to go to the plug INS menu and from manage plug ins can easily find the content tree of plugging and in stuff. All right, so now let's run the plugging fantastic and let's click on the Avatars Town. I'm going to click on female like this, and then let's add a name and a user name. Okay, so I'm going to write Emma, actually. And as you can see, I'm using the robot a fund. Let's change its way to medium, and I'm gonna set the fund size to 16 points. Really good. It's left padding is going to be a pick. Sounds I'm going to duplicate it by command D or control. The If you're using Windows, let's move it down and I'm gonna write a use early. Are right. Let's right at Emma underline Ashley. But this time let's change the way to Regular and the fund size to 14 points. Then I'm gonna make it a little bit lighter. So let's change it to something like this. Seven. C seven c and seven c. Pretty good. Then that's group. These two takes layers, and I'm going to select our image place, Hohler, and that's aligned them vertically. Fantastic. We can also add status indicator as well. So let's add a circle like this, and I'm going to change its color to 20 C 96 8 Then let's add a stroke like this. I'm gonna set the color to solid white and let's change its thickness to 0.5. You'd be good, and I'm gonna add a drop shadow to eat. So let's change. It's why to one, it's pretty good. Then let's select all these elements and group them, and I'm gonna call it well, fine detail. Fantastic. It stop adding, is going to be 68 pixels and it's left padding is going to be 30. Pixels like this are right now. It's time to create our sub menus. We're going to create four different sub minions products promotions website and support. So I'm going to start by adding a text layer. So let's right products and then that's increased the font size to 18 points. Fantastic. When a zoo mean and I'm going to open up the assets, find that you can download from the resource is section of these cores. I'm gonna import some icons. So for the first sub menu, I'm gonna import products. So let's drag and drop it here. Pretty good said, like both off them and align them vertically. Fantastic. Then let's check the pad ings. The left padding should be a peak. Sounds like this. And we need a small right arrow here. So from the same assets file, I'm gonna add these right arrow. So let's drag and drop it here pretty good. That's a line. All of these three elements fantastic. And the Roy padding of thes right arrow is going to be 32 pixels. Pretty good. Select all these elements, group them and let's rename me too products. All right, now let's duplicate it movie down. The padding between them is going to be 50 pixels like this. And now I'm gonna write promotions and let's change this icon, so I'm going to remove it and let's bring its own icon Fantastic. Let's line them vertically and I'm gonna put these promotion. I can write under the products group here and let's rename me to promotions pretty good. And then we need to check the pad ings. It's gonna be eight pixels like this. Once again duplicated movie down. The padding should be 50 pixels, and this time I'm going to write website that's removed the icon and bring the website icon . There we go. Let's move it right into its own group, which is this one I'm gonna renaming toe website and it's right padding is going to be eight pixels as well. And last but not least, I'm going to duplicate it. And let's change you to support pretty good. Let's remove these icon and bring the support icon here. There we go. I'm gonna move it to its own group and that's rename me to support and then check the pad ings. A pixel owns fantastic are right now everything looks great. The only thing I'm going to change is the signs off this indicator. So let me enlarge it a little bit. I'm going to set it to 10 by 10 and let's increase its thickness to one. I think now it's much, much better. Perfect. The next screening is going to be our products screen. OK, so let's press a on our keyboard. I'm gonna add a new artwork here. Let's change its name to products. Fantastic. So in these page, we're going to have a hamburger menu right at the top left. And after that, we're gonna have a large title, which is going to be the product title. And then we need to have one card okay for our product that's bringing the hamburger manual icon from our assets folder. There we go menu drag and drop its I'm gonna move it here. It's top heading is going to be 60 and it's left padding is going to be 16 like this. And then that's at a text layer here. I'm gonna write products. However, let's make it bold, and I'm gonna increase the fund size to 32 points. Fantastic. Its top adding is going to be 30 pixels and the left padding should be 16 peaks cells as well. All right, So, as I mentioned before here we need to create a container. So let's select a frame to and I'm gonna drag and drop it. In order to create a perfect container, I'm gonna set its high to 144. And now let's caught it Products title. For now, we don't add a tanks because in the next video, we're gonna add those specific tax, So the next thing we need to do is creating our card. So for our card, we need to have an image and name assured description and a price tag. So first of all, I'm going to create a rectangle here. There we go. Let's make it square. So I'm gonna set it to 156 by 156 Pretty good. And let's increase the corner radius to 16. And this time I'm going to use another plugging for adding an image to eat. So let's go to plug ins. I'm gonna choose Young's splash plug in, and if you don't have this plug in, you can again go ahead and install it. So let's run it. Of course, you can add whatever image you want, it doesn't matter, and now I'm gonna choose the interior. You are right. I think it's great. Then let's add a text layer. I'm going to write name and that's decrease. It's fun signs to 16 points and a way to regular. Pretty good. I'm gonna align it. It's stop heading is going to be eight pixels and these two should be align perfectly fantastic. Then that's duplicated. Moving down here, I'm going to write short description and then let's change its color to something lighter. There we go and its top hiding is going to be four pixels. Once again duplicated movie down here. We need to have to text layers. The 1st 1 is going to be a dollar sign like this, OK? And I'm going to change its color too. 20 c nine and 68. Fantastic. That's duplicated movie to the right side. And here let's right, Price. So why did we split these two text layers? Because later on, you're going to pull some data and you're gonna change. Thes takes layers according to our database. So because we're storing data without the's dollar sign in our database, we just need to change the amount off thes text layer. So these dollar signs should be intact are right. It's left patting is going to be two pixels. Fantastic. And now it's time to create our friend because thes card is another container. So what I'm going to do is selecting all these elements by holding shift on my keyboard like this, make sure to select all of them and rightly can one of thes layers and press frame selection. And now we have a new frame. However, as I've mentioned before, when we create a frame, at least one of its edges should touch the left or right side of our screen, okay? Or the top of our screen. So in this case, I'm gonna enlarge our frame. So let's enlarge it like this. I'm going to set the with 2 183 and high to 249 like this. And then that's group All the elements inside these frame like this, and I'm gonna align them to the center both vertically and horizontally. Fantastic. Now we can group them, select the frame, and I'm gonna align it with the edge of our screen so it should touch the left edge. One important thing you need to know about Bravo is now that we're creating this one car, it's going to repeat it across our art board. Okay. However, how can you decide whether it's gonna be repeating horizontally or vertically in these games whenever the with off your friend is less than 50% of your screen? Like in this case, Bravo first is going to repeat it or is entirely and then vertically. So the next card is gonna show up right next to it and then the next row. And this is exactly what we want are right now we need to make sure that our frames or align perfectly and that me rename it to product card. Fantastic. Perfect. Now we're done with our products screen as well are right, guys, Thank you so much for watching this video. I hope you enjoyed it in the next video. We're gonna finish designing this project together. I hope you enjoy this video and even to see you that
6. Design a Furniture App - Part 2: Hi, everyone. Welcome back to another video of the scores in this video. We're gonna finish designing this project together. So now I'm gonna go ahead and insert another, aren't bored by pressing a on my keyboard and let's choose this art board. And that's Renay me to detail because this is going to be our detail page. So whenever a user clicks on this card, it's going to take the user to these detail Page and the user can see the specific details about that product. So in these page, we're going to have a large image. Okay, so let's go ahead and create a rectangle like this. Fantastic. I'm gonna increase the corner radius to 30. However, let's set the corner radius off thes two corners to zero. So I'm going to set it to zero and this one as well, like this. And then, once again, let's run the UN splash plugging in order to retrieve a great interior image are right pretty good, and let's add some drop shadow to eat. So I'm going to change the Blair amount to 20 and A Y amount to 10 and let's decrease the capacity to 10% fantastic So what else do we need? Right at the top? We're gonna add left Arrow for the navigation purposes between our screens. So let's open up our ass. It's fine. And here we have a left arrow icon. I'm gonna drag and drop it. Year it's left. Padding is going to be 24 peaks old, and its top heading is going to be 46 like this. And I'm gonna add another icon right over there, which is a share icon. And from here, I'm gonna drag and drop these share icon like this. I'm gonna move it up, and it's right. Padding is going to be 24 peak cells. That makes you mean. And the top heading is going to be 43. Pizza one's perfect. All right, here, we need to put a play icon. However, I'm going to show you how to create one easily and quickly. So we need a circle. So let me draw a circle here and I went a city to 64 by 64. Let's make it white. Fantastic. And then we need a triangle. So I'm gonna create a polygon like this and let's increase the corner radius to five like this, and I'm gonna make it black. Fantastic. That me rotated by 90 degrees and I'm gonna align into the center both vertically and horizontally. So let's group them and I'm gonna colleagues play button. Fantastic. All right, Now it's time to add our text layers. So here we need to have a name, a price tag and a lying description. So let's add a text that you're here. I'm gonna write name and let's make it medium. And I'm gonna increase the fund science to 24 points. Really good. It stop heading is going to be 16 peak cells and the left fighting should be 24 pixels. However, remember to increase the with a little bit because we don't know about the length of our name that we're gonna pull from our database. Okay? All right. Let's add another text layer again. We need a dollar sign. Let's make it regular. And the font size is going to be 16 points and the color should be 20 c 968. Fantastic. It stop hiding is going to be four pixels. Let me duplicated movie to the right side. And here let's right price. I'm gonna enlarge it a little bit are right. And last but not least, we're gonna add our lying description here. So I'm going to copy and paste Alluring Epsom description from epsom dot com website. You can write whatever you want, so let's add a text that your paste it here and remember to decrease the with off your text layer. Pretty good. Let's set the with 2 327 Pretty good. And I'm going to change the line height to 24 let's make it a little bit lighter. Fantastic. Let me a line into the center. It stop heading is going to be 24 pic cells and we're done. All right, guys, that's all for this video. In the next video, we will connect our design to Bravo studio and we will use air table website in order to retrieve some data from our database. Okay. Moreover, we will add two more screens tire design as well. So see you then
7. Connecting Your App to a Database: Hi, everyone. I hope you're doing well in these video. We're gonna add the broth studio tanks to our design. And after that, we're going to connect it to brother studio in order to retrieve some data from Air Table. But before explaining about air table, let's add those tanks to our components here in order to make them recognizable by Robert Studio for our launch screen. As I've mentioned before, it's not gonna shop in the Bravo vision up. However, we should specify it by its specific tag. So if you open up the Bravo attacks webpage from their website, you can see that we have splash screen right over there. Okay, so I'm going to select these tag command, see or control. See, Let me remove its name and paste it here and it's done. Then we need to make our menu screen recognize a bell by Bravo studio. So we need another tag Forest night menu. We can use thes tag. Okay. Menu Colin Snide. So let's select it. Command C. And here I'm going to rename me to the tag name. There we go. And after that, we can connect our screens. Okay. So, for instance, here we have the products. So let's click on the prototype tab like this. And as you can see, Circle appears immediately. I'm going to click on that hold and drop it here. There we go. And now these subterranean is connected to products. And also we have promotions on website. However, we didn't designed these two screens yet. So for now, let's leave them as they are. But for the support, I'm gonna add a specific tag for calling a number. So I'm going to scroll down and there we go. We have open phone dialogue, so let's select this. As you can see, it's an action, are right. And after its name, I'm gonna paste it. You can change this phone number to whatever you want. Pretty good. And then we need to connect these hamburger menu icon toe our menu. Okay, So let's select this icon and drag and drop it like this and wants her son. So I'm going to select this menu screen. Remember, we need to connect the whole screen there bego drag and drop it pretty good. And one important thing we need to change is the starting point off our screens. So As you can see now, the starting point is the menu screen, which is not what we want. So let's drag and drop the's square icon right over there. So now these products page is our first screen. And after that we need to connect our product card to our detail page. So let's connect it like this pretty good. We need to also connect this left arrow to our products screen. All right. And now we need to add some tags for this play button and this share. I can't let select this play button. I'm gonna click on design and from the tax page, I'm gonna look for open video. Okay, remember that you have different kinds of videos. You have video, which is this fun? It's an audio less video. That other place when a user is on the app screen, OK, but whenever you want to play a video with audio, you can use this hack. So I'm going to select it and it's paste it after the name of this bottom. And here you can add anything, so I'm gonna paste a link here from you to you. There we go. And that's all for the share icon. Let's go to the Bravo Tanks Page. And here you have open share dialogue. So let's elect that, copy it and paste it after the name of this icon. And here you can add any U R l you want It could be your website, your client's websites, whatever you want. All right, So what else? India's products Page, we have a card component here. Okay, However, we need to add some tax. For instance, here we have two different containers for the 1st 1 Let's select the products title. Let's add brackets. And between those brackets, I'm gonna add container. Check this paling. It's so important and let me copy it. And I'm gonna pay seat for these product card as well, because this is our second container here. I'm gonna add an asterisk for our product card because later on when we're connecting are designed to Bravo studio. It's much easier to recognise thes elements with these asterisks. And then I'm gonna add an asterisk for our price for the short description and lastly for our name, text layer, all right, and in the detail page, we need to have a large frame. Okay, which includes all our elements. So let's select our friend too. And I'm gonna drag and drop like this. I'm gonna name it frame and inside brackets. That's right, Container. And then I'm gonna add an ass series before our takes Layers name here and for the price as well. And here, let's call it description. Fantastic. Now I'm gonna add another attack to this description, which is called Flexo. So what is the flake? So tack. If you head over to the Bravo tanks, I can show you the exact explanation. There we go. So whenever you use the flexor tag, it's going to make your tank spikes expand down to feed the content connected Y a p I OK, but you should keep in mind that the tax marks must be the bottom most element off the container. Like our design. There is nothing after it. Okay, so that's add attacked it like So. So now it's going to grow vertically, no matter how long our taxes are right. And the next thing we need to change is the name of our image. So let me right image, and that's all. All right, now let's click on this share icon. Copy Link. Let's go to Bravo studio. I'm gonna import from Fatemeh Paste it here. All right. As you can see, we've got a warning here to fix, but it's not a problem. So we will check out our app. And if there is something wrong, we will come back and fix it. All right? So now our design is connected to Bravo studio, and it's time to create our down the library. Okay, But this time, instead of pulling some public data, we're going to create our own database. Okay? It's gonna be so simple, Believe me. Now what I want you to do is opening up the air table website, so every table is basically a spreadsheet. Okay. However, it's more flexible, and it's gonna let you create your own database based on your data so you can use it for free. Make sure to sign up here, but for now, because I've already signed up, so I'm gonna signing are right. There we go. Now we are in our air table dashboard, okay. And there are so many features you can use. However, for these tutorial, we're going to focus on creating a simple database. Okay, So let's click on this plus icon, which is called at a base. Start with the template. And here we have some pamphlets. Okay, let's choose the product. Catholic used template. There we go. Here it ease. I'm gonna open it up. All right, Here we have at least off products with an image with a price with a description, as you can see here, and plenty of other data. So what we're going to do is pulling these data into our Bravo studio and binding them with our design. Okay? Liking our previous projects, we're going to send an A P. I request for that. However thes time, we're not going to send a public ap I request we're going to send private AP request. OK, so let's go to help. A p I documentation are right. And now let's go to the authentication section. There we go. Let's elect these your l, which is your unique ap. I feel here right before the question mark. I'm gonna copied and let's go to Bravo studio and I'm going to create a new that a library click on new collection, and I'm going to write area table to again Air table to save it. And here I'm going to create any request. Let's change its name to product. Least because our first request is gonna pull some data for our products. Page. Okay. For our detail page, we will create a new request later on. So let's pace that you're all here pretty good, but this time, because this is a private AP, I we need to add a key value here, which is kind of like user name and password. Okay, for these i p I. So what you need to do is to go to your account setting. And here under the A P I section, you can generate an A p I key. Okay. All right. So this is your key. However, let's go to this page. So let's copy this authorization word. Go to Brava Studio and paste it for the key. And I'm going to copy and paste thes part as well. For the value. Fantastic. However, you need to change thes point with your unique key from here. I'm going to copy it and paste it here, and that's all. Now let's send our request. There we go. We've got some responses. So what do we need? We need our dad or records. So let's say like that. We need all of them. So let's choose all from the drop menu. We need also the data records I d. Because we're gonna connect our products page with our detail page. Okay, so each product has its unique i. D. We need that as well. We also need the u R l of each image. So let's check that check box. Then we need the unit cost, which is the price, the name and the description, and that's all. As you can see, it's automatically safe so you don't need to do anything else. Now let's go to projects. Open up our design plus new project, and let's use our products screen here from these drop menu. I'm going to choose Air Table to and from request. We have only one product least, let's add content. First of all, we need to add our product card because it's gonna be repeating. So let's like that. And now let's use records and then click Candies plus icon. And let's add our name, short description, price and our image. Okay, so here let's select the correct data for our image. It's gonna be the fields image of your l The price is going to be the unit cost. The short description is going to be this one, and the name is gonna be this one. Fantastic. Now we can actually go ahead and preview our app. So I'm going to open up the Bravo vision app on my phone. And whenever you want to test a new app or you want to quit your previous app on Bravo vision, you can shake your phone, right, preview an app, and there we go. As you can see, we have our products with all the details. However, the descriptions aren't the same because in our database, if you see here, you can see that all descriptions are the same, so we can go ahead and change them if you want. And remember, if you make a change here, your APP is gonna change automatically in real time. It's pretty awesome, isn't it? So let's check it out. For instance, I'm gonna go ahead and change this name. Marjorie Change. Let's change you to moderate. Okay, now that shake my phone and press manual update, that may scroll down there we go, we have Modry pretty good. Let's check out our slight menu as well. And as you can see, it works perfectly. It's amazing, isn't it? But what's gonna happen if I tap one of these products? So let's use this one. And, as you can see, because we didn't make a request for our detail page and we didn't bind any data with our elements, it doesn't show us correct, Dad, however, all other things worked perfectly. So let's check our share icon. There we go. It works perfectly. All right, So now let's go ahead and create a request for our detail page. So in data Library, I'm gonna open up the air Table two and let's create another request. And that's changed its name to detail page. And this time we need to copy the same your l here. But this time we need to add something after this furniture word. Okay, let's add a forward slash a dollar sign to care Lee brackets and inside that that's right, I d. So what does it mean? It means that we are sending a request in order to get products with They're unique ID's. If you remember We've selected the record ideas well here in order to connect it to our detail page. Okay, so here we need to get specific ideas. Well, for the header, we need the same thing. I'm going to copy and paste them here are right. And one more thing left to go. Let's go to the product list. And here I'm gonna select the selected outputs. And as you can see, we have a data record, okay? And this is already so let's select that. I'm going to copy it. Let's go to the detail page and in the perimeter. That's right. I d here. Remember that it should not be capitalized. And for the value, I'm gonna pace the takes that we just copied pretty good. And now let's send our request. There we go. We've got her responses, and this time we need the dad. I d. We need the images. You're l we need the unit. Cost the name description, and that's all. OK, now let's go back to our projects, and I'm going to select the detail screen here from the collections. I'm gonna select area table two, and here now we have two requests that select the detail page and add content here. Let's add our image, our price, our description and our name pretty good. And now let's find them without data. So the name should be connected to the field saying the description is connected to feels description already, and the price should be connected to the fields, unit cost and the image to images. You are L R. Right. And now let's select the selected outputs in our detail page request. And here, as you can see, we have the ideal able. However, it is capitalized. So let's change you, toe. I d. All right, so now let's go to our product least request and select a selected outputs. And here we have data records. I d Okay, we need to change its label to I d. But remember that it shouldn't be capitalized. Okay? It's so important. Now let's go back to our project, and I'm gonna open up the Bravo vision app lets shake the phone and press manual update, and I'm gonna tap on one of these cards. There we go. Now it works perfectly. I'm going to select the moderate as you can see everything. It's fine. It's amazing. isn't it? Let me open up the menu. And if I press support, you can see that a collection pumps up immediately. Pretty good. All right. Now, as you can see, whenever we update our area table databases, Okay, here. We need to update the APP manually. OK? There is no way to update it right in the act. So we're gonna fix that problem in a second. Let's go to our Fatemeh. And here we're gonna add a new tack. I'm gonna go to Bravo Tanks, Page, and I'm going to show you a new amazing tank, which is pool to refresh. That's double click on that carpet, and I'm gonna paste it here instead off the product's name like this. Now, we've just added the pool to refresh functionality to our app. So one of every add a new product here or we remove that and the user refreshes the page here, the user can see the changes that we made immediately. It's pretty intense. We can also add it to this page as well. Pretty good. Let's keep those names right before these tanks in order to keep everything organized. So I'm gonna add products here and detail right here. Okay, so let's check out our app once again. However, before that, we need to press update Here are right now. If I pull down, you can see the loading indicator, which indicates that this page is refreshing previous, um, also in our detail page, the same thing happens. All right, guys, that's all for this video. Thank you so much for watching this. I hope you enjoyed it. And I will see you in the next video, So see you there.
8. Adding More Features to Your App: Hi, everyone. And welcome back to another video off the scores in this video, we're gonna add two more screens to our project because I want to show you the other functionalities off Bravo tanks. So let's press a on our keyword. I'm gonna add Any are poor to our canvas, and I'm going to rename me to promotions. Fantastic. Let's go ahead and select these container copied and pasted over there with the help of command. See or control C and control be. And I'm going to remove these slight menu on Let's rename me to promotions Pretty good. I'm gonna rename these title as well Promotions title. Fantastic. Here, I'm gonna add a rectangle. Make sure that it has a frame. So let's right click on that. Let me increase its height leader. It's pretty good. Right? Click on that and click on frame selection. Fantastic. I'm gonna name it Animation. Okay. I'm gonna so mean. Make sure that those containers are aligned. Or remember to add the container tag as well. Pretty good. Let me move it up. Fantastic. Now I'm gonna show you how you can add a lot of animation to your screen. So let's look for Lottie animations and there we go. I'm going to open it up. This is a great website for finding cool animations, and from here you can download some free animations. Let's choose this one, and we need the Lottie tag here. So first, let's copied. I'm gonna pasted here. Fantastic. Once again, let's copy this your l and paste it right over there. Pretty good. So for sure, our animation will be played. But before checking that that's at another screen. Let's press a on our keyboard and add another our port here. I'm going to rename me to Website, and it's either rectangle like this. And this time I'm gonna use this Web EU tank that's copied and pasted. Here. You can put whatever you are really want. For instance, we can write you to you dot com. There we go, and that's all. Before testing our app, we need to remember to connect these two screens toe are many Okay, so let's select this menu slide screen could become prototype, and I'm going to choose promotions that's connected to promotions and the website that's connected to website. Now let's update it to once again open up the Bravo vision app on your phone operated manually or you can preview again. There we go. Let's open up the slight menu and choose promotions. Can you see how amazing and easy teas to add an animation to your AMP. It's pretty cool, isn't it? Now let's go toe Website and here it ease. This is the you to you and you can see that all its functionalities work perfectly are right guys that zone for these video. I hope you enjoyed it and I will see you in the next video.
9. Publishing Your iOS & Android App: Hi, everyone. I hope you're doing well in this video. I'm going to show you how you can get your APP packages in order to publish your app to the APP store or to the placed, or it's so cool, isn't it? First of all, let's open up your Bravo studio. And as you can see, I'm in the dashboard section and choose the app you wanna publish. Okay, I'm going to choose design plus new. And here at the top, you have an option called Download the APP bundle packages. Okay, I'm gonna click on that. And there is a brief explanation about the process of publishing your app. Okay, so you can request your bundle packages for on us and Android separately here, and it could take up to 24 hours. Still, the Bravo team prepares the package for you and send it to you. Okay? It's gonna be sent to your email. Now, let's open up the Bravo Studio website. And as you can see, they've updated their landing page. So right at the top, you can see the learn button. I'm going to click on that. And from here under the resource is section I'm gonna open up resigning APS publication guide. Okay. And since thesis ditto really is not going to focus on the development process, I'm not gonna go through every detail here. However, I'm gonna going to you how you can publish your app. So when you've received your bundle packages from Bravo team, you can then publish your app on the APP store or play store. Okay, If you wanna publish the on US version, you need to have a mackerel s computer. Okay? It's a must have. And also you need to be part of the Apple developer program. It's a subscription based program that you can check hounds from this link. There we go. We can go ahead and check it out. And you can also use different services such as the fast lane website, which is gonna publish your app for you. Make sure to follow these guides step by step. And also, if you want to publish your app on play store, you need to download the Android studio, which is available for both windows and my class. And you can follow the steps here. All right, guys, that's all for D senatorial. I hope you enjoyed it. Make sure to write your opinion about it in the review section in order to let me know what you think. If you want to learn more about Fatemeh and you want to become a user interface designer, make sure to check my other course, which is called Learn Feet. My User Interface Design Essentials. You are UX design. It's available on skill shirt, and I'm sure you will like it once again. Thank you so much for watching these tutorial, and I hope I see you in other courses.
Arash Ahadzadeh, UI/UX Designer | University Lecturer
