Domina Figma en 2025: diseño de aplicaciones web y móviles desde cero

1. Course Promo: No Yeah. Hey, designers. Welcome to the Figma master class. Your step by step guide to mastering Figma and leveling up your design skills. When I started using Figma many years ago, I did not know how to maximize every tool that it has to offer, and sometimes it would take me hours to design a simple page. After many, many hours of watching tutorials, attending config, experimenting and refining my skills, I packaged it all into one course with the latest updates and features from Figma. Nima Tahami. I'm your instructor for this course. Throughout the past 12 plus years, I both developed and designed dozens of successful products. Along the way, I've also been lucky to teach more than 15,000 designers, helping them work smarter in FIGMa and not harder. Now in this course, we'll be designing a travel booking app from start all the way to finish. You'll learn how to wireframe, create components, leverage auto layout, even mastering variables and prototyping features to put together a complete app, and by the way, we'll leverage Figma AI to help us generate first drafts, images, texts, making designing just a little bit easier for us. By the end of this course, you'll know the ins and out of FGMaGting the skills to design faster and deliver designs more confidently to your team members, clients, and so on. This course is for designers looking to grow, those breaking into product design, or those looking to refine their craft and design faster and smarter. So if this sounds like you, then jump right in and I'll see you in the course. 2. Introduction: Hi there. Welcome to the course. You've taken a big step today to getting to the next level in your design career by upgrading your Figma skills, and I can't express how excited I am to have you in the course. Throughout this course, you'll be learning the newest and the latest features by FIGMa including the UI three, FGM AI, and all the other tools that it already offers like components, auto layout, variables, advanced prototyping, you name it. In order to learn those tools and concepts, we'll be doing it in practice while putting together an actual web and mobile app. This app is a travel booking app called Wander wise. It's a fictional client, but it's super exciting and definitely one that you can put on your portfolios after this course. Going through the steps in this course, number one, we'll start with the basics. Now, I recommend everyone to go through this, even if you do have Figma knowledge, just to kind of brushing up any little details that you might not know about the new UI features. We'll then jump to wireframing. So we'll use an iPad, pen and paper or even Figma itself to put together wireframes for the screens for our project. Moving on to setting up a design system, how to use variables, style for both color and fonts, we'll then jump to creating our first mockups in Figma, design our complete booking flow from end to end from signing up all the way to completing a booking on the travel app. We'll make a mobile version and learn how to create responsive designs before then jumping into building your prototype. Then we'll take our prototype, make it more advanced with variables, smart animations, and so on, so that you can share it with your friends and colleagues and show them how cool of an app you made. Our last section covers how to work smarter in Figma and collaborate better with team members. With that said, let's kick start our Figma basics and go from there. 3. Getting Started: Started head on over to figma.com to create an account if you don't already have one. Go ahead and login or if you've already logged in, you should then be brought to your homepage that might look something like this. Now you might be in the resents folder or drafts folder. That's totally fine. From here, you can explore your files. Now, one thing I do recommend is if you do like to use desktop apps on your computer, you can go ahead and click on Get Desktop App from the menu up here. For the remainder of the course, I'm going to be using the desktop app from Figma. It's pretty much identical. There's no huge difference between them. Although when you do have the desktop app, some of the options are accessible through the menu at the top. If you do prefer to continue with Desktop, go ahead and take a pause here, download that app. Otherwise, feel free to continue in the browser. Starting from the top, you see your profile where you can go ahead and sign in to multiple accounts. You see a notification bell here which shows you all the activities that are happening in your files. We typically start in the drafts folder when we're starting new projects, and you can create a new project by hitting Create New up here. Now, if you click on the Down arrow, you can create a different type of projects. If you're working on a FIC Jamboard or a slide deck, you can also do that from here. If you're importing from a dot FIC file that you have or even sketch, you can also import by clicking here. It will ask you to drop any sketch files, images, PDFs, and so on to add it to your drafts. You can organize your files differently by showing them as a list or as grids. I personally like the grid option a little bit better. And on the left side here you can see different teams that you're part of. Now you can always create new teams here, but it's not necessary to do so I'm going to continue in Clover school here and in my draft. I can either create a new file from here by clicking Plus or again, from up here, I can create a new file. From down here, you can also explore community which will give you access to the files that are shared by other Figma users. This includes things like slides, design resources, plugins, and so on, which we'll explore further in the course. For now, I'm going to go ahead and hit Create New File, Design File, and this brings us to a new file. And again, I'm going to go ahead and continue in the desktop app, open that same file, and let's come back in the next secture to learn about the different panels. 4. File Layout: We're in a new file. Let's explore what do we have access to. Starting from the left panel over here. First things first, if you notice my Figma is on dark mode. This is my preference for using Figma using the dark mode, starting from the top left here. You get access to the left panel from where you can go ahead and access FIGMA menu options. You can go ahead and access your file options as well as doing things like duplicating the file, renaming moving or deleting files. You can give your file a title like this, and you can see where your file lives. Right now, it's in my drafts folder. Right below that, you'll see two tabs. You can either switch between the file or the assets tab. Now, we'll get into the assets tab and how you can access resources from there. But simply put, you get access to resources that you have access. From here, you can go ahead and browse design system components that you have, as well as other ones that you've added to your projects like the ones that Figma already gives you. From the file, you can see the pages that you have in your design. Your designs can have as many pages as you like by clicking this plus icon here and adding new pages. Now under your layers panel, as you start adding things on the canvas, they will appear on the layers panel. Just as an example, I'm going to create a rectangle by hitting R on my keyboard and drawing a rectangle here, as you can see, it shows up in my layers panel. Now, if I frame that rectangle by hitting F and drawing your frame around it, you can see a hierarchy is placed here in my layers panel where we have a frame with a rectangle inside of it. Anytime you see layers indented, it means instant side of another layer like this frame. By selecting a frame, you can always add things inside of it like this text. You can always move things outside of frames or back into the frames itself. Now, I was using keyboard shortcuts, but if you want to access all of the tools that you have access to in Figma, you can do that from the toolbar down here. The toolbar gives you access to multiple move tools like the MVTol which is selected by default, where you can go ahead and move things around. Hand tool if you want to just browse, but you don't want to accidentally move things around. And a scale tool if you want to scale objects, which we'll do throughout the course. Going to move to the move tool. And from here, you have access to the frame to create frames, which are containers for your designs, as well as sections and slides. Right next to it, you get multiple shape tools from rectangles all the way through to ellipses and polygons. There's a pen tool if you want to create custom shapes, text tool to add text to your projects. If you want to open up the comments tab or panel. You can do that from here, and over here, we get the actions panel, which you can also open by hitting Command K on your keyboard or Control K on Windows. Now, from here, you get access to some AI features, your assets again, and plugins and widgets as well. Now, whenever you're working with developers, they probably want to use the Dev Mode, so they can do that by toggling into Dev Mode here. We'll explore DevMde later on. For now, we're just getting overview. Now, the right side holds all the properties for your objects. Whatever you select in your canvas, you can see the properties on the right side. And right now, we don't have any styles. Otherwise, they would show up here as well. From here, we can control the color of the canvas itself, make it lighter or darker. And I can always go to the prototype settings as well from here. Now, once you do select an item in your frame, you get access to a lot more options here, starting with the position. So where this object lives inside the frame, you also get access to constrain options, layout options, so the size of this item, for example, the appearance, the fill, which is the color, stroke, effects and export tools to export this rectangle out of here. Now, if I select the text, I get slightly different options here, like typography options. Now we'll explore all of this and we'll use it a lot throughout our course. So stay tuned for how to use all of the options that you have access to. Now with that, let's come back in the next lecture to start diving into our project. 5. Starting Our Project: The very basics are out of the way. Now keep in mind as we start working on our project, we're going to learn a ton more about all the tools and plugins and components and so on and so forth while we're doing the project. That's why we're now jumping directly into our project so that we can learn the most. So over here, I have a product requirement document open, which is typically what a company or a client or your product manager at a company that you're working at would share with you when there's a new project to work on. Now for this case, we have a project called Wander Bye. Wander Boise is a web app designed to enable users to discover and book destination trips around the world. With a focus on seamless user experience and an intuitive interface, Manda Boye helps users find, plan, and book their dream getaways. Pretty straightforward. We have an app, a travel app that's a web app. The objective of this platform is to allow users to explore exciting destinations, customize their trips, and manage their bookings. Essentially, we're making a booking travel platform. Now in this product requirement document, there's typically an overview, an objective, and then there's core features and pages that we need to design. You can of course download this in the resources to go through it in more depth. Just at a high level, we are going to need some user authentication pages onboarding page, a profile management page, destination discovery which I believe is the main screen that users will be looking at because this is where they'll find trips to take with the option to filter by price, location, activity, type, et cetera. We also need the destination detail page that they can view specific destinations in depth, booking management, a booking page to be able to select packages, dates, accommodations, et cetera, very straightforward, assert and filter functionality, payment and checkout, favorites and wish list page, reviews and rating, of course, as part of the app. Then we have here, the design goals is an intuitive UI, creative visually appealing and easy to navigate interface, consistency, maintain consistency in design elements, including colors, fonts, icons, et cetera. Of course, make sure that it's accessible to all users accommodating various needs. Their target users are travelers looking for inspiration and trip booking, various ages, and seeking crated travel packages. So their target users are essentially people who want to quickly book trips without having to do a lot of research or a lot of separate work to book separate parts of the trip. They want an option where they go seamlessly book a trip, and they're good to go without having to do a ton more work around their trip planning. Now, it does say that it's a web based responsive app, so we can make it so that we start with the desktop version first, work on the desktop designs before moving on to then making it friendly on the mobile as well, and integration with third party API for payment. So with that, I think we have enough information to start setting up our project. So first things first, we're going to take these requirements that we have and turn them into wireframes. Throughout this step, what we're trying to achieve is to get an idea of what we want to include in each page, how do we want to define those user flows at a high level without going too specific, as we'll get to that while we're doing the mockups. But for now, we want to jump into wireframing right away and get started with each page. Going to just jump right in with my iPad and continue on my iPad. Feel free to use pen and paper. Feel free to use Figma itself or Fikjam. Whatever method you find best when it comes to sketching ideas quickly without taking too much time. Go with that option. Don't spend too much time on this step because it's not the step that's worth spending too much time on. It's just for us to get a high level overview of what we need to include in each page, where we want to place it, and start brainstorming and ideating who want this app to even look and feel like. Without further ado, let's jump right in. 6. Finding Inspiration: The biggest things in being an efficient designer is to be able to learn from other designers. Now, simply put to be an excellent designer, you don't necessarily need to reinvent the wheel all the time. In fact, I encourage you to be creative in your designs. For the majority of the parts of the screen, we don't need to come up with a new innovative way for users to interact product. A lot of the app, like the sign in pages or the pop ups that we're going to display and so on, have already been defined in many apps and in many products that it's best if we go with something that we get inspiration from. And, of course, take that and implement our own styling and our own design and our own twist to it. And that's really how I define becoming an excellent designer is to be able to quickly do that process over and over for different designs or ideas or requirements. Now, with all that said, there's three resources that I use for inspiration when it comes to putting together designs. Before jumping into any project, once I get the product requirement document, I recommend designers to go through some platforms like this one here, which is collecti.com. Now, when it comes to inspiration, here are three resources that I use and recommend you to check out. The first one, collecti.com. This tool allows you to actually see different designers uploading stuff, and you can even filter by, let's say, sign up pages and see different sign up pages that people have uploaded here. Let's say you're designing a food and drink menu. You can even get access to food and drink menu in both paper versions and even in app designs. So there's a curation of multiple different designs some older, some newer that you can get access to through this platform. Definitely check it out. Now, this one gives you specific components. For example, if you're looking to design a pricing page, you can simply go to pricing pages and see all the different resources they have for pricing here and really get inspiration from them and see what elements you want to include from each one and put together your designs using the help of designs that have already been put out there using a ton of research time and design time. And last but not least, mobile.com. Now I use this one constantly, and I even have a paid account with them, but you don't need to necessarily create a paid account. All you need to do is search for different apps or different types of pages that you're looking for. Let's say I'm looking for inspiration for our travel app. I can just by searching Travel see other travel websites. So I can even go to one of them and start looking at their screens. Now upon signing in, you can see the designs from that specific app that you opened. They have different destinations and hotels that you can choose from super cool. We'll take a closer look at this one. That's awesome. And we can even do travel or destination booking. Let's see what will come up if we do that we don't have anything. Let's just search for booking screens or booking reserving flows. You can see different websites that have booking flows and what they look like, what elements they include. Here's a car rental option reserving your room from Expedia, booking an interview, booking a slot. There's different types of bookings that you can see. This is an interesting one since we have a travel app here. So feel free to really take your time with this one, get some inspiration. I'll do this, as I'm putting together my own wireframes, I'll do this as well. But keep these three resources on the side for when you need inspiration. Now in the next lecture, we're going to see how we can actually use hat GPT to help us come up with inspiration as well. 7. Using ChatGPT for Wireframing: I've used HGPT, you've used HGPT probably and we've all used HGBT. It's one of the tools that we can stop getting enough of and sure enough, there's a way that it can help us with wire framing. Now, how do we do that? All we need to do is define the app that we're designing and have HGPT come up with ideas for what we should include in each page. Just as an example, let's say we're working on a destination discovery page before that, what I'm going to do is I'm going to go ahead and copy the overview here from our product requirement document and say, we're designing an app with the following overview from the PRD, give us ideas for what to include on a destination discovery page where users can find trips to book for the wireframe. A simple prompt like this, will give us a breakdown of what to include in this page. So we already have a hero section with feature destinations. So basically have a rotating carousel of popular seasonal destinations, a search bar that's prominently displayed, very important. Call to action buttons with clear buttons of explore destination or discover deals, search filter options with all the details of what we should include, even down to weather preferences, types of experiences, trip duration, and so on. Destination card Grid slash Carousel, personalized recommendation, interactive map view options. So that's a cool one. Maybe we want to allow users to also have a map of each destination so they can click and see where each destination would take them. Inspiration and experience section. User reviews and testimonial, booking and availability indicators. So it even gives you idea on how to create scarcity with users, which is a great UX tactic. Only three spots left. We've seen this on other airline platforms and booking platforms like that, comparisons and bookmarking tools. And so this gives you a ton of things to include in your page. And if this is too detailed, you can probably ask it to give you a summary. Give me a short summarized bullet point format of things. To include on this page. So if you want to have a more summarized version, there we go. It gives you in bullet format all the little things to include. So as we're going through our wireframe, we can definitely use HGBT to help us come up with ideas of what to include, to make sure we're not missing anything from our designs. And while this is great, we can take this one a step further by using FICMa AI to actually help us come up with first drafts as well. And we're going to do that throughout the course. For now, let's jump into the wireframes based on all the inspiration and the resources that we have so far, as well as our product requirement document and get started from there and then move through all the pages that we need designed. So I'll see you next 8. Sign Up Page Wireframe: Mentioned, I'm doing my wire framing in Fig Jam on my iPad. You can do this. If you do have an iPad. If you don't, you can do pen and paper, you can do just FIG Jam on your computer. It's really up to you, however you do the wire framing. Just again, don't spend a whole lot of time on this step. This is a low fidelity wireframe that we're putting together just to know what are we including in each page, where replacing it, and to note all the little details that maybe we'll forget by the time the prototyping or the mockups come around. Now first things first, I'm going to grab the Pen tool and with a ruler turned on here, I'm going to just draw a rectangle to represent my wire frames, fix it up here. Doesn't have to be perfect. As you can see, I'm not the best at drawing these rectangles, even with a ruler turned on here, but again, we're just doing a rough draft here. Now, what I'm going to do is I'm going to go ahead and use this tool here to select everything here and click on I guess a copy and a paste like this could work. So this way we have multiple one that we can use for different screens. First screen we're going to focus on is our authentication pages. This will be our sign up. Screen so this is where users will come to sign up for the app. Typically on a page like this, we can either have a little image on the side or we can just have a box with the inputs for their users the user's email, the password. Now, it's really important to look at the PRD or the product requirement documents to make sure you include everything. So what I'd like to do before I even start sketching anything inside the window is to write sort of a bullet form. What do I need on this page? So first things first, we need email. We need password. We need the logo, which for now will be the name of the company Wonder Wise. Then I'm reading the PRD, specifically, we also want social accounts. It doesn't specify which one, so this is something that you want to check with your, you know, uh, PM or your client if you're actually working on a real app. This is just a fictional company, so we're going to just choose to sign it with Google as well for now, and there's also an option to use phone number. Let's do phone number field two. As a way to log in. And so that should cover most of the things we need here. Optionally, we can have an image again, or we can just have a box to log in. Now for this app, I think it would be cool to have part of it showing an image of people traveling or something like that, and then half of the screen would be the login options. So maybe I can divide up the page, you know, two thirds to one third, something like this. Where on this side of the screen, it will be an image. And then on the other side will be all the content that we discussed. So maybe starting with the logo here. Maybe we'd want a brief description of what does Wander Weiss do? If I can just replace this with Wander Weiss little slogan line over here. Then we want the email box. Again, this does not have to be perfect as long as you can read your writing, which for me, sometimes it's difficult password, and then we need an option maybe or login with your phone number, phone number or Google. I'll just put a little G here. Now, I do want to move these down to include a button here and I'll just do the button over here to sign up. Now, somewhere we should also include that if you have an account, link to Login. So if the user already has an account, we should link to a login page. I'm not going to wireframe the login page because we're going to do pretty much the same thing. So I'll just title this one signulash Log In like this. But of course, we will go ahead and do the changes and the mockups once we start putting things together. Um, so yeah, we do want a link to login in case your user already have an account. They can go to the login screen instead of the sign up. And then once they go to the next step, depending on which step they go through, let's say they go through the phone number, then from the phone number, we do also need a verification or a way to log in using the phone number. And typically, this is a verification code that gets sent. So probably our second screen will be verifying the login, and we'll come back in the next lecture to put that design together too. 9. Verification Code Wireframe: All right now for our verifying login, it's pretty simple. We're going to follow a similar layout. We'll have the image on one side, and then the verification code right over here. Then we'll do here verification code. So you need to enter some digits in here, and then we'll call it Continue button. It's a button to continue to go to the next step and then verify login or something like that. So we want a field in there. We want a button in there, and that's pretty much it. Maybe also a button here to resend code. So somewhere over here, resend code. If they didn't receive it the first time, they can receive it again. So that would complete our authentication pages. The next pages that we have after that are profile management, destination discovery. I'm going to go in order of the flow that we want. So typically, we want users to go through the login pages here, and then we want them to jump into the main page of our app. This main page is the destination discovery because this is where users will go ahead and discover destinations, input their preferred destination and apply filters and so on before actually booking a trip. So then we're going to go ahead and draw another rectangle here. And this one will be for R. Destination page. So right at the top, destination. Discovery, we'll call it. Again, as we did on the other page, we'll write down what do we need on this page. I'll refer to the resource that we went through with hATGBT where we looked at some of the things that we need, as well as the PRD that was shared by the client. So we'll look at both of those and kind of cross reference, as well as our own ideas and our own inspiration that we found on other websites like the ones that I shared earlier. Feel free to take a pause here. Take a look at some similar websites. I do recommend even going on expedia booking.com or any other platform that you use for booking trips and maybe seeing what are the things that they offer on these destination discovery pages that they have. What do their sort of booking flow look like? This would be a good time to do that sort of offline on your own. And then continue on to draw and add elements from those websites into your own app as well. Again, to be a great designer, you don't need to reinvent the wheel all the time. In fact, it's quite the opposite. The more you can leverage and use other designs that have already been established and designed by other designers, the better you'll be the faster you'll be putting together wireframes and mock ups and prototypes pretty fast. 10. Destination Discovery Wireframe: There are two components to this page. There's the part that will be the destination related specific things. So we'll probably have a navigation bar at the top to include things like, you know, any navigations to different places of the app, as well as back to the homepage. So we'll probably have the logo here to take us back to the homepage, wherever we are, and then a bunch of links on the right side that for now, I won't add. Want different cards here. So we definitely know that we want some destination cards. Probably these cards should be a little bit lower so that at the top, we have some space for input. You want to separate your list of things that you need in two different categories. The first one being in the page itself, the second one being in the card itself. So in the card that we want to include details about specific destinations, we want to make two separate lists for each one. So for now, let's do the discovery page itself. We want a search bar in here to search for destinations. So we want them to write what their destination is. Now, because we're not booking flights for them, we don't necessarily need to know where they're coming from. We just need to know the destinations. And as part of that search bar, we probably want some date filters. So we want date selectors to ask them when do they need or when do they want to travel. Now, throughout this page, we also want sorting options. We want to let them sort by popularity, price, ratings. And again, most of these are coming from Chat GPT. We also want filter options. For the filters, we want to do budget we can do we do have date range already so we can do just duration of the trip. So how long do you want the trips to be experience type. Again, we can always change these later. It's just good to have an idea of what do we want to initially start with at least also whether preference. Those are some good filter options. So we need these as part of the page. We might want to include a map view, so this is a good one to think about. I'm leaning more towards not putting a map view on here just because of the fact that the destinations are not going to be specific places. They'll be just specific cities. So we probably don't want a map unless they're choosing, you know, a place for their accommodation. So perhaps in the detail page, we can include a map with different options for accommodation and so on. But for the page itself, I don't think we need a map. But again, these are part of the features that we can always add later. Or if we're working with our client, we can definitely chat through this one with them. So in a real life scenario, this will be a little bit different. Now maybe we also want some sort of different categories of options. So maybe a category or we can call it themed collections. And these could be groups of categories of destinations that they can see by clicking on there and seeing destinations that, let's say, are romantic escapes or resort trips or different categories that we can classify trips under. So in case they want to see sort of what's popular under those categories, they can do that, as well. I think these are good ones to start with at least for now. For our destination discovery. Now for the card itself, we can come back in the next lecture to put together a list of things we want before putting together the rest of this page. This is probably one of the more important and most visited pages of our app, so it's good to take our time with it and not rush into skipping this detailed planning. So let's come back in the next lecture to start planning our destination cards. 11. Destination Discovery Card Wireframe: Destination cards. What do we want in each destination card? We need the name of the city and country. Probably want the rating. We need some sort of cost for that trip, and probably it will be something like price per day or per night unless they type in a specific date. In which case, we can show them the total for their trip. So I'll do slash total. We want a button for them to view more info or continue or book that destination. For now, we'll just call it a button. We definitely want an image. It's important not to overcrowd this card, though. We could have a popularity badge if we want. So if this destination is a hot pick, we can show that with a little icon. And also, if you want to add this or bookmark this destination, we can bookmark it as well. So we can save it to our profile or bookmark page and so on. So I think those are good things to start with for including in our destination cards. Now, let's wireframe the page itself. We want our search bar or sorting options and filter options to be at the top, somewhere over here. So we'd probably want the search bar here with a destination. Now, why at the top left? This is typically the first place that a user would look at. So we want them to quickly put in a destination if they already know where they're going, or they can just browse what's available. We can also then have our date pickers over here, and we can have buttons here to filter and sort. And we can have the destination cards right below that. Now, we'll have a bunch of rows of these destination cards and probably right below somewhere just going to go ahead and extend this page a little bit. Right below, we might want to include themed collections. We can just call it collections and have different destination collections here. So these could be images with just a collection name. With the ability to go and browse all trips under those collections. I think this is probably a good start. Don't worry about the navigation bar at the top. For now, we'll come back and wire frame that together. We could also wireframe what this destination card could look like. Perhaps we could do an image here of the destination with the name of city slash Country. Could do the rating here. Perhaps a cost. For now, I'm just writing $1,000 a week, but again, in the actual mockups, we'll fix that. You can include icons here. This is a FR icon, in case it's popular. Maybe a button here to bookmarkt then a button here to continue. I think this would work for now. Feel free to take a moment if you need more inspiration and look at some similar apps that have cards and how they design their cards. This is something that I've seen in a lot of apps and how they present things. So that's why I'm quickly putting them together, but you can take your time and pause here to take a look at some inspiration. Now, as a little exercise, I'll leave the destination detail page with you to do as an assignment on your own. And this destination detail page is essentially a more detailed page with our destination info. So all this info that you have in the card, plus other things like reviews in depth and things like description of the trip, booking options. Now, I'll be putting that together in the mockups. Myself, but feel free to do this as a little assignment to sharpen up your wireframing skills, then we'll come back and continue with the next step in the booking flow, which is the booking management or the booking page, and then booking confirmation and payment. So let's come back and put that page together. 12. Destination Details Wireframe: Right, so for the destination details page, I left this as an assignment for you to do if you wanted to. I've gone ahead and did my own destination details page. Again, yours might look completely different than mine. The main part is to make sure that it includes the main components that we need. So some of the details from the destination card itself, as well as anything else that might be secondary or other important details that we'll need in order to also connect the screen eventually to the booking flow in the booking screen. Um, so for mine, at the very top, I put the image here on the left with the ability to see multiple images. Right below it, I put some included things that comes with their destination. So this could be like list of amenities, and we can do this in an icon format. At the top here, name of destination, the city, um, the country, um, the ratings, the fire icon, and the um, bookmark button here, as you see in the card itself too. So that details there with a short description of what this destination is all about, right below it, and then a button or may call to action to select the room because this is typically what booking pages allow you to do. Once you get to a destination details page or a location page or a hotel page, the next step is to choose an accommodation. Now, they could be in different places or they could be in the same place. Um, so this could be either a room type or even a hotel type. For now, just put room type. So right below it, it's accommodation with all the different filters as well. So if they didn't select one from the page before, the destination discovery page, if they didn't put it in a date and such, they can do that from here. They can add their number of travelers and so on. And then see the different accommodations for that trip. Right below it, I put a little ratings. So you can see what the ratings for this property is or actually destination is with the ability to see it in a carousel format. Then right below it, you see some similar destinations. If this is not as pleasing to you, you can find other ones that are available through the cards that are here, these are all destination cards similar to this one. Of course you can include a lot more in this page, maybe a map all the way to things like policies for checking in, checking out, and so on. There's a lot more that can go into it. For now, I'm keeping it simple. I'm putting the very requirements, I think, for this page. We'll go ahead and move on to our next page in the wireframe, which is the booking page. Now, this booking page is essentially the booking page that comes right after selecting accommodation. So if I select one of the accommodations here, this is the page that will open. 13. Booking Screen Wireframe: I've gone ahead and listed the items that we need for our booking screen. Now, I've done this through the help of looking through other similar platforms, as well as referring to Chat GBT on the side. And here's what I came up with. We have the accommodation details. So we just want to see the room or the hotel they're booking or they'll be staying at. There is a possibility they might be staying at multiple places if this destination, you know, this place that they're going to has multiple different, you know, locations in the packages, so we might want to include that in the design, dates selected, the B button, and a book button, some add ons. So in the PRD or the product requirement document, a mention of needing to book additional services like car rentals, local guides or activities and so on. I've added this here as well. Payment info and then personal info. So name, email, phone number, and check in and check out details. Now on a screen like this, it might be nice to include some of the accommodation details on one side, and then the rest of the information or the input that the user has to put on another side. And typically, I like to keep things consistent. So by keeping details to show on the right side, they can see the accommodation that they're booking. And then on the left side, we can have all the fields here. So we can have so starting from the left side, I'll just put a back button here and then right below it, just a title to confirm booking. Then we want to probably collect our personal info here. We might not call it personal info, but for here, I'm going to go ahead and just add that here with the different fields, email, phone number, first name, last name, email, phone. That could be part of one section. Then the section right below that could be payment info. For that one, we probably need a credit card number. As well as expiry date, CVV and probably the person's name on the card. So I'll just add that here, but in the actual mockups, we'll probably place it slightly differently. Then we want to add our add ons, so add ons could go over here. And we can have little cards like this that represent the different little add ons that they can add to their trip with some title and some short description of what that does. We can also include an image if you want here, maybe right at the top. And then what's left here. We have our date selected accommodation details, so those could go together as well as a book button. So I'll just go ahead and make this slightly shorter so that we can There we go. Image. The name. And then what are they booking? One room, for example, and some of the details from the other page, like the dates and number of people. And, of course, it's really important to include the price. I haven't addted here, but we definitely want to show the price, the total price and what the user can expect to pay. And we can have then a book button down here to complete booking. So we have the button down there. Now we've done more of the complex pages together. As an assignment, I'll leave the profile screen and bookmark screen or the page where they can see all the bookmarks items. These two pages, I'll leave the assignments for you to do. We'll come back in the next lecture and start jumping into creating our style guide for the app and moving on to designing our app together. 14. Choosing a Color Scheme: With our wire frames out of the way, time to move on to the next step of our project, and that's coming up with some styles for the project. Now, styles are the foundation of our project, and styles include things like the color scheme, the typography that we're going to use, and in some cases, the design system that we want to use, if you do want to use one or create one from scratch. So in this section of the course, we're going to go ahead and focus on setting the basics up so that we can jump into putting together the mockups, and we won't have to worry about colors and type anymore when we get to that part of the project. So there's a couple of resources that I use when it comes to generating color schemes. Before jumping into the other ones, I want to show you that CHA JBT also comes up with decent color schemes. If you tell it what you're working on and ask for some colors, it does come up with some nice hues that you can use for your projects. And here are some other resources that I generally use, and I recommend you checking these out. The links are in the resources as well for all these tools that we're going to go through. One is coolers. You can hit start the generator here and simply jump right into the first palette that it gives you. Yours will probably be different than mine. You just hit the space bar on your keyboard and it keeps generating different colors. Now if you like a color, let's say, I like this navy blue. I can hit Lock on it, and then keep hitting space to get matched with other colors that are similar or complimentary, and I can keep locking different colors that I want to use for my project. So if I see a nice one, I can always hit Lock on there and then continue generating the rest of my palette. Generally, we don't need more than three colors in a project. One for things like backgrounds or alert boxes and things like that. Another one for primary actions like buttons, another one for secondary actions or even an accent color to use on certain parts of the project, like the text or potentially some backgrounds here and there and so on. You don't need a whole five sets of colors. In fact, that might get a little bit too much. Feel free to experiment with this tool. There's another one, ai coolors.co. This is an AI generated color scheme. It gives you some initial ones that you can experiment and see what it would look like on a dashboard display like this one here. Or you can also give it prompt. You can try to search for specific colors. So if I say something like sunset colors, let's say, and generate I'll go ahead and come up with some colors that are related to sunset. And of course, if you don't like some of the colors that it came up with, you could go ahead and change those around. You don't have to necessarily go with the exact color scheme it gives you, or you can do things like Ocean, since we're doing a travel app, or even let's try beach, see what it comes up with. Yeah, this is a little bit nicer. So feel free to give this one a try. There's this other one called colors do MSI. Again, describe the purpose of your color combination, travel with different hues of beach and water. I'm just coming up with a random phrase here to see what it would give us. Yeah, it does give us some light blues and some interesting shades. And you can always go ahead and generate it again if you don't like that one. It's definitely some hues of blue. We got some sandy colors here. That's nice. Last but not leaves de blank.com also helps you come up with not only colors, but also fonts. Maybe we'll give it a try for the fonts when it comes down to it. For now, let's try the colors. Write a prompt that describes your project, travel destination, booking app with sunny destinations. Again, totally random prompt there, but we have some interesting colors here. I even comes up with a mockup that you can see what it would look like or that color palette would look like across different projects. That's an interesting one. And you can go ahead and change specific colors. If you don't like this orange, you can make it lighter. And it would show you across different projects, what it would look like. Now, I'm personally leaning towards using coolers just because I've used this platform more, but, of course, feel free to use one to come up with a color scheme of your own, or feel free to copy the colors that I'm going to be using. I'll share the hex codes of the color scheme in the next lecture. Go ahead, take a pause here, pick a color scheme from your favorite platform, and I'll see you in the next lecture. 15. Choosing a Typeset: So I've picked this color scheme to move forward for my project. Now, of course, yours could look different. So feel free to follow along with yours. I'm going to use the blue as the primary, secondary orange here and use this black for things like fonts and text. And then this white here for things like backgrounds or card backgrounds, and so on. So now for the fonts, where are we going to choose a typeset, and what are some resources that we have access to? Now, for this one, by far, the easiest and the most reliable one, Google Fonts. Google Fonts is now also in Figma itself, as well, so you don't need to download or import any of them into Sigma anymore, so that's great. So just make sure if you have any custom fonts, just restart Figma if you don't see it right away. Now, feel free to browse Google fonts. When it comes down to your fonts, we want to do is pick two fonts. One for the heading text. So this is things like titles, the name of the app or any heading titles and things like that. We use a heading font. So this could look slightly different from your other font, which is the body font. So ideally we'd want to pick two different fonts. Now, for a really simplistic app, you could totally go with one, and some do have different versions of the font that you can use. So you could use, for example, robotic condensed for your heading and then use roboto mono for your body just as an example. I'm not necessarily saying you should do that. But there's tons of good fonts that you can use in here. The other two here that I was showing you deblank also gives you fonts that you can work with. So if I open it up and go to fonts, enter your prompt, I'm just going to search Travel app in here, and there you go. You get different font pairings that you can work with. You can see it in different shades. And if you click on Get font, it will take you directly to Google Fonts itself. And you can also type something in here. Of course, you'd want to consider what you want your branding to look like. So if you're working with a client, you'd want to get this part down before getting to the next step, you'd probably want to consult with them on the branding stuff, especially if they already have branding material ready, like fonts that are already available for you to use. Now, here, I'm just going to go ahead and pick two fonts, move forward with those ones. And those two fonts will be Libre Baskerville for my heading fonts. And for the body fonts, I'm going to pick noto sends right here. So those are going to be the two fonts that I'm using. But again, feel free to use your own pair of fonts. We'll come back in the future lectures to actually add those as font styles to our app. 16. Creating Color Styles : All right, so I've gone ahead and picked this as my color scheme, and I hope you've also locked in your own color scheme. If not, feel free to follow along and use this one. Basically, I'll use the blue as our primary and this orange is a secondary color. This black as a primary text color. The reason why we're not going with a fully black color like zero, zero, zero in terms of the hex code, we want something that's subtle and a little bit less dark just because it's easier on the eyes. And this is a good background color that we can use. And of course, we can create multiple shades for all these colors and use the shades that's appropriate. Now, what we want to do is move this over to our Figma file, and before doing that in figma, we're going to go ahead and create a new project and feel free to create this in your drafts folder or anywhere else. Create new design file. And this design file will be our project where our styles will live, our actual mockups and everything else. So we're going to go ahead and rename it Manderwis. And for this first page, we're going to rename it our style guide, and we'll place all of our styles here. Now, to create a style, all you need to do is go to the local styles here and add a new style. Now, right now, we're putting together the color style, so we'll start with that. If you click here, we'll ask us, what do you want to name your color? In which case, we can actually give it a name like primary. You can add a description if you like. So if you're working in a team and you want to describe exactly where you're using this color, this could come in handy. Now I'm going to copy the hex code from here. Feel free to take a note of this color if you want to use the same one. I'm going to take the hex code here for the blue. Feel free to take a pause here to also write it in your project, switch back over here and paste it for the properties. And now we have the style with this color as the primary color and a free hit creates style, the style has been created. And anywhere where we have an object, let's say we have this rectangle and we want to apply that fill, we simply go to instead of picking the color or manually every time putting that hex code in, all we need to do is go to our apply styles and variables and choose the primary style. It's been applied. Now, benefit of using styles, instead of not using styles is that anytime you have a change in your color scheme, let's say, instead of this primary color, I want to go with a different shade of blue, then it will also get changed wherever you're using that color as well. As you can see, right now, I'm only changing the color style and not the fill of this specific rectangle. So wherever I'm using that color, it's changing automatically. So that's the benefit of using styles. So right now what we want to do is create styles for all the colors, all these colors over here. So we already have primary all you would need to do is repeat that process for a secondary color, for a text color, and for a background color. Now, I'll leave that as something that you can do. So that's how you create color styles. Now we're going to take a pause here and we're going to come back in the next lecture where we'll actually use a plugin to help us do this faster and also introduce shades into our color styles. 17. Using Plugins to Create Color Styles: So in the introduction, I explained how we can add plug ins from our action tap down here or by hitting command K or Control key on Windows and going to our plug ins tab. Now, we want to do is create different shades of our primary colors so that we can apply different shades. If you want a lighter blue, we can apply a lighter one. If you want a lighter gray, we can apply a different gray. And so this way, you don't have to repeat this process multiple times to create different styles with different shades. We can just use a plugin that helps us do that. Now in order to use that plug in, I'm just going to go ahead and delete rectangle and also delete the style that we created here, the local style for that primary color. Now this plugin will set up everything for us. All we need to do is go to our action menu, go to plug ins and widgets and search for the plugin called Foundation and select this foundation color generator plug in. Right when you open it, you can see you have different shades and they use different systems from orbit to Atlassian system to material design and design, which are different ways where you can call the shades with different naming conventions and so on. The one I often use as a material design one where your color 500 is the primary one that you select, and then it creates a bunch of shades darker and a bunch of shades lighter. Now, this is not the color that we want. This is the color that I've copied from my color style. So this is the blue that we actually want. We can name it blue or we can actually change it to primary, and then we can hit Create styles. Now, this plugin will go ahead and create those styles under the foundation folder here or category, and under primary. We have all these colors now. Now, that Hexcoe that we copied is four primary 500, and it's coming from this color style that I've created. So feel free to take a second here, set that up. And what you can also do here is you can actually get the palette, by hitting palette here and get the same thing pasted in your design file. This makes it easier for developers to view your color scheme after you've put it together, and I recommend in your style guide to include all your palettes that you use. I'm going to repeat that process a few more times one time for the secondary color, this orange. There we go. Rename it secondary and use material design, create styles, get the palette, Oops. I'm going to paste in the code and make sure that I call it secondary here, then hit Create Styles, get the palette. And it's just pasted on top of the other one. We want to go ahead and we want to just Now, it's pasted on top of the other one, so I'm going to move it out of the way here. There we have it. That's our secondary color. I've input the black color that we have, and we can name this one text and use it for our textiles. Now these ones are all the same. We don't really need them. So we can actually go ahead and just delete everything 600-900. Create styles, get the palette here, move this out of the way. Let's delete everything 600-900 because they're all the same shade, pretty much. And from my secondary or actually text, 600 to 900, we're going to select shift and select all of them and delete these styles. That's all we need. For the background color, I'm going to just go ahead and copy the seashell color and add in a style called background and paste in that hex code here. Now I don't really like how there's this foundation folder or category. We don't really need it. So we're going to select all the primary secondary text styles here and move them outside of that folder or category, and we'll go ahead and remove it. And for this one, I'm going to go ahead and rewrite it as capitalized like this. So now we have all these styles that this plugin has set up for us. We have a bunch of different gray shades for our text we can use, for our secondary color and primary color, and a background color that we can use. For these ones, let's go ahead and add a section. We can section them together and create a color scheme like this. So it's neatly organized. And that's how we use plug ins to help us add our styles to our projects. Now we're ready to use colors in our project. Let's come back in the next lecture to also apply our textiles. 18. Adding Text Styles: Have our color styles. Now we want to add our textiles. I've picked these two fonts to use for my heading and then this one for my body font. Feel free to use whichever font that you like from earlier. I'm going to go with these two. Again, feel free to follow along, apply the same colors. These are Google fonts that should automatically be added to your Figma file so you don't need to download any fonts. What do we do to apply these to our project? First of all, I'm going to hit the T key on my keyboard, or you can select T from here and write a text and write heading over here. I'm going to apply my heading fonts to this and change the font size to 16. 16 is a good base font that is typically used for web and mobile projects. And then what we do is that we scale our font up or down from 16 points. That's a good system to use, and it works generally across most devices. Now, I'm going to duplicate this one by hitting Command D, so we have a duplicate of it. Move it over here and change this one to body. So by just double clicking and changing the text. And all I'm going to do is change the font family here to Noto Sans, which is what I'm using for the body. Again, go ahead and apply your font family if it's a different one. For me, I'm going to use these two. Now to turn these into textles, all we need to do is select them, go to the typography here, apply styles, and hit Plus. And we'll go ahead and create a style from this text. And we can call it, let's say, Again, if you want, you can give it a description, you don't need to though and I create style. Now this body text has turned into a style which we can unlink from here if you want to make changes to it or detach the style. Or if we click anywhere on our Canvas, we can see this textile added here as well. Another way to create a textile is to click Plus here and then give it a name, choose the properties, so the actual font family. This way, I would have to search Noto Sans. And let's say, I want to make a bold one. So I'm going to choose bold here and then call it body bold and choose the font size, which is 16. And so now I have two textiles. One is called body with a 16 point pixel note sense, and then we have a bold one. So let's say I want to change this text that I have here to the bold one. We just click our applied textile and change it to the bold one. Now at any point, let's say we want to make changes to this bold one, we want to make it even bolder. We can actually apply that here. And as you can see, it's gone ahead and applied to there as well. So there we have it. Now, that's how you create textiles in Figma. And of course, there's plugins to help you set up a system for your text because right now, we're sitting at the foundation of our project, and we want multiple fonts that we can use in multiple places. So you'd want a bigger font, maybe for the titles in your page, then we want a smaller font or a medium size font for, let's say, the description, and then you want a smaller body font for generic use. It's always good to have a font scale or type scale applied in your projects, and we'll come back in the next secture to look at type scales and how we can use the plug in for it in setting it up faster. 19. Using a Typescale: So now we've created these two textiles. I'm going to go ahead and hold Shift and select both of them, delete them. And this way, we can go ahead and set one up using Typescales. Now, there's a plugin to do this easily. All you need to do is go to the Actions tab or the Actions menu, search for Typescale and I like this one with the yellow background in the logo. So I'm going to go ahead and open that one up. And there's different systems that you can use in your typescale. Now, if you go to typescale.com, you can see this in action to see what that looks like. I can even change it to the noto Sans font I'm using. Just to see what that would look like. So this is my font. The body size is 16 pixels, and I can use different scales. So starting with a minor second, which is a smaller gap between the different sizes, there's a major second with a bigger difference. And as you go up to major third and perfect fourth, you see a bigger difference. Now, typically we see projects use major third, perfect fourth, or even maybe minor third. I think major third is a good option to go with. Now, for our body font, we don't actually need that many fonts. It's really for the heading that we need different fonts. Or different scales. For the body one, we might actually just go with slightly bigger one and a slightly smaller one. So maybe three in total. Now for our heading, so that would be this one here, ibrevascular roll. This is the fonts that we'll set up. You can see them in pixels as well. And we can always round it down, so use 61 pixels for H one, use 49 pixels or 48 pixels for H two, 39 pixels for H three, and so on and so forth. So we want to set this up using this type scale plug in. Figma. And all we need to do we can select that text that we have, which in this case, is this heading text with the heading font 16 pixel selected, and we're going to go with the major third as the option. And choose round to the nearest whole pixel, so we don't get any decimals and then do create Typescale. And there we have it. The plug in automatically sets up in our project. We can just select all of them, move it down here. And with all of them selected, you can space them out a little bit more like this using this purple divider, using this divider here. And going to get rid of this very small one here. We don't really need that. And also, because we're using a heading text here, probably not going to need the 13 pixel one either. We're going to use these ones here, starting with H one. So we're going to call this one H one or H two, H three, four, five, six, and then call this one R seven, two. To do that because right now that plugin doesn't create styles for us. So what we need to do is select the font here. And again, go over here plus and call this one H seven. Create style and work our way up all the way to H one. So create another one, call it age six, create style. For this one, we're going to do plus H five plus H four. So take a second to do this with me. Three more to go. This one's age three. And these are the names for it so that when we're applying them, we know what they mean. Age two, and this one's going to be H one. Whoops, H one, there we go. So now if you click on our Canvas, we see we have all these textiles, too. They're not really organized. We can also group them together. And so if you want to do that, we can actually select the first one, hold Shift, like the last one, right click and do Add New folder and call this one or heading fonts like this. So now they're all under this heading folder. Beautiful. Now we want to do the same thing with our body font. Let's run the same plugin type scale. And again, for this one, we only want to go one font up and one font down. We don't want to go too many and also round to the nearest pixel and also do Major Third. Create type scale. Now we have three different ones, slightly bigger one, slightly smaller one. I'm going to space them out again a little bit. And we're going to do the same thing. We're going to select the first one, call this one our body LG to stand for large, create style, this one. We're going to do plus, and just call this one our body, create style, and we're going to do here plus again and do body SM for small. Or you can call this one a footer texts as well. Really both work. Go to call it footer. Now, one thing I recommend you to do is to firstly organize them neatly like this and also duplicate them for your body fonts, and we're going to detach all of them here. We're going to select all of them and set bold as weight, and then also create the bolt styles. So we're going to do plus on this first one, call it body g bold. Create style. And this one we're going to create style, body dash bull, create style, and this one we're going to do footer dash bull, create style. Now, they don't really look good the way we have them here. It's not really helpful. So instead of this placeholder text of Quickfox change this to H one, change this to H two. Changes to H three. Again, this is not just for you. This is also for the developers who are going to look at your design systems and apply the colors and the styles for the text that you have. So that you have the naming convention here properly set, we're going to do the same thing, give these the names that they have, so this one's body LG. This one's just body. This one is footer. And here you guessed it. We're going to rename this to body g bold. This one is going to be body dashbl and this one's going to be footer dashbl. Organize them neatly. We're going to also place these all under body text on the right properties panel here, add a new folder, and call this folder body. So we have our heading fonts. We have our body fonts as textiles set up here, ready to be used, and organize them all using a section, draw a section all around those texts and call it our text styles. Just neatly put them here for reference. So our style guide is pretty much set up. We're ready to get started setting up our project and applying our colors and type as we need. To do that, I'm going to set up a new page here, call this one our mockups, and this is where we'll do our mockups. So let's come back to the next ecture to get that started. 20. Styles vs Variables: Before continuing, I want to also touch on local variables. Now, we have styles and we also have variables. In our variables, we can also set up things like color variables and string variables, which we can use for things like font family, and so on. Now, there's two benefits in using variables over styles for our colors, at least. And those two are number one, you can have a design system that's more complicated and have variables interconnected with each other. So let's say you're creating a surface color to use for your buttons. By creating a design system around it inside of your variable table, you can get more specific with how these colors are meant to be used. And as part of that, you can also have different modes. So if you want a dark mode, you can set that up more easily using variables compared to styles. And the second benefit is that you can actually use what's called scoping. So if you want to, let's say, create a color that should only be applied to your borders. So that's the stroke around, let's say your buttons, you can make it so that with variables, you specify where that color should be used so that it's not very complicated when it comes to selecting colors. So with those benefits, I personally recommend setting up colors as variables. But really, this is up to your personal preference, and maybe you're working with a team that's already using styles and they're good with it. Then feel free to skip this step and continue with styles. And in case you do want to continue setting up variables, then all you need to do is for the styles that we've created, you need to simply search for the styles to variables, plug in. It up, and we'll go ahead and detect all the styles that you've created so far. You can give them a collection name, so they're all together under the colors collection, and then go ahead and convert styles into variables. So now if I close this plugin, you can see under the collections here, we have a colors collection, and all those fonts with even their grouping has been transferred into the variables table. Now, we still have styles here. So what will happen is if we, let's say, create a rectangle, when we select the color, we see we have these variables, and you'll know it's a variable because it has a square shape here, and these ones with a circle are actually styles. Now, because I'm continuing with variables, I don't need styles anymore, so I'm going to go ahead and delete all these styles. And continue by just selecting from the variables. Now, let's say for these texts here, we're not going to apply the text colors to a rectangle fill. This is where you can use scoping by going into your variables and going down to, let's say, the text ones. Holding shift and selecting all of them and clicking this option to define the scope for only the fill of texts, not stroke or effects. So now what will happen is for our rectangle, we won't see that text option anymore. But if we do create a text, let's say here and choose the fill, we will see these text options, and there we have it. So that's one of the benefits of variables and why I'm going to continue using variables throughout the project. But again, it's really up 21. Creating Frames Layout Grids: It's time to start putting together our mockups for our design, and I have here opened my wireframes. So if you have your wireframes handy, just put them in front of you so that you can use them for your mockups. I'm going to get started with the signup page over here and then work my way to the right for all the other pages. And there's probably a couple of pages that I'll leave as an assignment for you to do on your own time. Together, we're going to work on the pages that we have here. So starting with the signup page, then I head on over to the mockups page I've created. If you don't have a mockups page in your project, you can create a new page by hitting plus over here and add a new page and then rename it to mockups so that you can organize your mockups and keep them all neatly in here. Now, to start our project and to create our signup screen, we need frames. Frames essentially helps us put together our designs for each screen. So typically, we use a frame for each screen. Now you can access frames by clicking frame over here in the toolbox or hitting F on your keyboard. And then on the right side, you'll get some default options that usually show. You have some default Android iPhone sizes, some tablet sizes. And what we're interested in is the desktop sizes. And I typically go with the desktop size over here. There we go. By clicking on it, I've created a frame with a desktop size. That's 14 40 by 1024 pixels. Now, of course, you can also draw frames. So if you hit F on the keyboard, you can draw a custom frame for any size that you like, and at any point, if you hold Shift while you're drawing your frame or rectangles or anything else, for that matter, the width and height will be locked so that it's the same width and height, so you can draw a square frame if you want. That's also a handy tip to keep in mind. Using shift one, you can zoom to fit to see everything you have. So I just quickly went back to this desktop frame that I have. I'm going to zoom out a little bit here and I'm going to double click to rename it to Signup. So now the name of this frame is signup and this way me and anyone else looking at this design will know that this is the signup page. And if they need to find it, they can also see it in the Layers panel. From where you can also double click to change the name. Awesome. What do we have in this page? We have two sections in the page. We have an image section over here on the right, and then on the left, we have an email. We have the title of the company alongside some descriptive text of what Wander Weiss is, or why they should create an account followed by some input fields and the signup buttons, as well as some social logins. Or we have a Google sign and button, and then also a phone number sign and field. So let's get started with this design. The first thing we want to do is divide up our screen into those two sections and to clearly divide those frames. What we can do is use what's called a layout grid. Now to set up a layout grid, all you need to do is click your frame and then go over here to where it says layout grid in the properties panel and then add one like this. Typically, you get a grid like this, but what we're interested in, which is the most commonly used is a column grid. So we're going to switch the type to a column grid. And then we're going to click the layout grid settings to apply some custom settings. Typically, in a web project like this, we see a count of 12 for our columns. So we have 12 columns across the page. And this is more of a standard sizing or a standard grid that websites are made of, which is 12 columns. And you'll see pages dividing those 12 columns to show different content on the right side, on the left side, and in the middle. Now for the margins are the spacing from the left and right, I typically like to use an eight point grid system, which is basically you want to keep all the spacing multiples of the number eight. So consistent with that, a margin of 48 pixels happens to be a pretty good margin to use. Now gutter is spacing between each column. And currently it's at 20. But again, using that eight point grid system, I'll go with eight times three or 24. Beautiful. You can also drop the opacity here or even change the color of your grid if you want. I'll do 5% so it's a little bit lighter. We don't need it to be that strong. Now you can always toggle your grid on and off over here so you can toggle it off or on whenever you want to quickly access it. So we've set up our frame. We've set up a grid inside of it. Let's come back in the next secture to start putting those sections together. 22. Sign Up Page Columns: Time to put together our sign up page. So we're going to set up two frames here, one for the image that we're going to have on the right side. So we're going to find a nice image to use, and then we're going to have the left side, which will have the content over here. So switching back to our project. I'm going to hit F on the keyboard and draw a frame like this. And right now, while you can't really see it because there's no fill yet. I have a frame over here, and I'm resizing it, and we're going to use four columns over here. In fact, I think five works. And the thing you'll notice is that with your grid active, things will snap into place right away when you're close to the edges. And for the height, you want to make sure that it's full height. And you can also double check that from here. You can see it's X zero and Y zero, which is the top left corner. And it's also 1024 for the heights. That's awesome. So now we're going to go ahead and hit F, create another frame, and this one's going to be on the other side of this. So over here taking up seven grids. And so now we have two frames dividing the page. And what we're going to do is we're going to go ahead and for now, toggle to hide the grid and focus on our design. Now that we have the division of where the image will go, as well as where the sign up content will go. For the fill, I'm going to go ahead and add a fill here so we can add a color to the background of our frame. And I'm going to choose the background variable that I've created. So that will be used for the background of this. Signup page, and then we want to start adding a few elements on here. So we want to add a text over here using the Tiki, right wander wise. And then from our styles, we're going to choose let's try H two. That's a good font size to go with. H one might be a little bit too big, so it's probably best to go with H two for this one. It's looking good. Now, I'm not going to worry too much about the alignment and everything. Right now, I'm just going to align everything to the middle. And I'm going to duplicate this text by holding alt and dragging away from the text so that I duplicate it and create another one. And this one is going to serve as the description. So we're going to probably go with an H six so let's try body Large for this one. And let's write book Amazing destinations and packages all in one go. So this will be the slogan we'll use. And I'm using Alt here to resize this textbox from both left and right. And we're going to do middle text aligned so that everything in there is aligned in the middle in terms of the text. For the VanderbisFont, I'm going to try one of the secondary colors that we have here. I like the bit of a darker one, but not quite that dark. I think secondary 800 looks really good for the logo here or the text. And, of course, if we do have a logo, we can add it over here. But for this project, we'll use the text as the logo itself. And for the description text, we'll use text 400. So it's subtle, gray, it's not fully dark. It's a bit lighter and easier on the eyes, too. Okay, this looks good. Now we want two inputs here or in fact three, one for phone number two, and then two buttons here. One signup, one signup with Google. Now, these inputs will become part of a design system that we're going to use throughout our project. So it's important that we design a nice input that we can use everywhere and not have to remake an input everywhere, everywhere that we need one. And ideally, we want to use Autoayout to put together not only that input, but also set up the content over here using an auto layout. And we're going to come back in the next lecture to explore the benefits of doing that and also set up our input fields. 23. Color Contrast Check: And you're placing colors on top of each other. Like we have this text on top of this other background that's slightly a different color. It's always good to make sure that we do a contrast check just to make sure that it's accessible, and these color combinations are actually good to use, especially when it comes to things like buttons and so on, to make sure people can actually see them, and they're easily readable. And so to do that, Figma has this neat feature where you can go ahead and select anything. So let's select this vendor wise title here. If you go to the fill section. Now, right now, of course, if you select it, it will ask us to choose from the libraries. But if you switch over to custom, you will see this little check color contrast, which shows us this line, and it will let us know what's the ratio of our foreground color to our background color, and you want to, of course, make sure that it meets the contrast standard, which in this case, it does. Now, you don't have to do this, but if you were to select, let's say, color over here, where it doesn't meet the color contrast check, you can see the ratio is much closer to each other, and that's not good. And you'll see this little icon here that says contrast standard not met. And if you do go ahead and click on it, it will make sure that your color gets to the closest hue here that does meet the standard, which is roughly around three to one here. Of course, you can always go ahead and adjust that within those areas. If you want a darker or let's say you select the color here, it will go ahead and find the closest match and same thing here. If you select white, it will actually go ahead and find the closest gray so that it does meet the color contrast check. That's always good to keep in mind when you're going in your project and applying colors against different color backgrounds. Now I'm going to just command Z to undo all of that and go back to the selected color and let's come back and continue on our signup page. 24. Using Auto Layout: Been putting together designs usually without auto layout, then I hope this lecture really changes your mind and also shows you the benefits of why you need to use Autoayout almost everywhere in your designs. Just as an example, let's say I have a bunch of inputs here that we want to place in our design. So I'm not creating the impos right now. I'm just showing you an example here. If I have a bunch of inputs, even a button, let's and let's say another input here, these are not organized in any structured formats. A couple of things could happen where I can accidentally misplace items or misalign them. Also, if I want to move this one here to let's say somewhere else, so I want to move it a little bit more down here, I have to move this one as well. Same thing here. If I want to, for example, move this one a little bit higher, I would have to make adjustments everywhere in my design. And now if this goes too high, this is close to these texts here and I have to move these texts. And so there's a lot of manual work in adjusting frames manually inside of your designs. Now, even in development, it's more systematized where things get placed within a structured format. And so that's where auto layout helps. If I click this frame and hit Shift A on my keyboard, it will turn the frame into an auto layout. As you can see, everything just got neatly organized. Itself, and it doesn't quite look like what we wanted, though. So I'm going to hit Command Z to undo that. I'm going to show you another way to do this that's a little bit smarter. And if you right click on your frame and instead go to more layout options and do suggest autolayout, FIGMA will go ahead and actually look inside of your frame here and notice that you have a bunch of different things that may actually need an additional auto layout inside of it. So now FIGMas created three Auto layouts, in fact, technically four, considering this is the main frame that also got turned into an auto layout frame. So I have one here for these two buttons or inputs or what have you. And these ones also got in place into an auto layout, and they all have their unique spacing between them, which for this one is 21 pixels or the gap in fact. And this one here has a gap of 124, so they all have different gaps between. I remember what I mentioned a few lectures ago is that I typically recommend using the eight point grid system even for your spacing between elements. So now over here with my auto layout for the Wander ois and the subtitle or description, I would recommend either going with a 16 pixel spacing between these two or a 24 pixel. 16 looks good, so I'm going to keep it at 16. Now for the content over here, we can leave it at 60. Don't really need any of this just yet because we're going to actually create our own inputs. Now one thing you'll notice is that with autolayout, if you do delete content, the auto layout frame will resize according to that, so you can see all the properties of an auto layout on the right over here, starting with the width and height, alignment options, so you can actually align objects in your auto layout to the center to the top. Now, right now, we don't have even spacing. So the gap between all of our elements inside of this auto layout is 60 pixel. So that means if I add an element in here, like a rectangle, it's going to have 60 pixels from other items. That makes sense. And then over here we have our margins between each side, the left side, the top side, and bottom. Now, this is turned on right now because it's allowing us to add individual paddings between different sides. We don't really need that right now, so we can actually go ahead and add a padding on our right and left at the same time using this number over here, and we'll use that 48 pixel padding that we talked about. When we were setting up our grids, and we're going to apply the same one for it over here. But for our vertical padding, we're going to do a little bit higher, so we might do 86 or we can do 96. So they have more spacing at the top and bottom. Typically autoayout frames have flexible sizes. So that means if things inside of an autolayout frame shrinks, like we get rid of this text year, as you can see, the auto layout is shrinking to match the content inside. I'm going to hit Command Z to undo that. That's because currently we have Hug turned on over here. But if you want to actually switch to a fixed size, all we need to do is actually resize our autolayout frame here, bring it all the way down again, and now it has a fixed size, which is what we want for this case. But that's not always the case, as we'll learn when we put together our inputs in the next lecture. So now we have an auto layout frame here with 1024 pixels as the height and a fixed 594 width it's formatted. Is layout is vertical, which means as I add elements inside of it, it will get vertically aligned. Otherwise, if I choose horizontal, things will go in different directions. We're going to create a lot of a layouts so you'll learn different directions on how to use them. We can see the gap here between different objects, our margin from the horizontal to the left and right, and vertical margin or padding over here. So that's it. For now, let's come back in noch sexture to start putting together our inputs. 25. Creating Input Fields: Hope the previous lecture gave you some idea of how to use Autolayout. If not, don't worry, we're going to use it a ton. So you'll definitely have a chance to understand it a lot better. So now we want to put some input fields in here, one for email, for password. How do we do that? Well, we can actually create fields using Autoayout. All we need to do is hit T on our keyboard and click over here in our frame, and for now, we'll call it input. Or better yet, we'll call it placeholder. Now we'll hit Shift A or right click and do add Autoayout. And now we have an auto layout around this with no padding on the left or right on the horizontal or vertical. So we want to actually change that and have a padding at for horizontal let's do 16 pixels. And for our vertical, let's try eight pixels and see if that's good. Now, what we're going to do is we're going to actually hold Shift, select this title and subtitle here as well, and hit Shift again to create another auto layout. And so this way, we have this element inside of this one here. So now what we can do is go to the width, and instead of having this fixed width, we're going to choose fill container so that this input takes up the entire horizontal that this parent auto layout frame is taking. Because again, we want everything to be consistent here. Now we're going to add a fill so that our input is white, and we're going to add a corner radius of eight pixels around it. We're going to hold command so that we can quickly select items inside of our auto layout frame like this text here. And instead of body large, I'm going to switch it to just body. For our input, we don't need that large size, and we also want to left align our text. Starting to come together. Lastly, I'm going to do text, maybe 200 for this placeholder color. And then once we have text actually written inside of it, we can make it bigger. All right now, it's a little bit small for text input. So instead of eight pixels, so instead of eight pixels for the bottom and left for the bottom and top, I'm going to try a spacing of 12 pixels, and I think that's more of a typical input size. So our input is coming together. We might want to add a title for it so that users know exactly what information to type in here. To do that, hit T again and write a title like this and hold shift to select these two again, these two here, hit Shift A, and now these two are inside of an Ato layout too. We don't want this gap to be so big here. We want a gap that's smaller, so we can just drag that spacing here to maybe eight pixels. You can also adjust that gap from here. And then instead of a center top align, we want to do a left top align so that inside of this layout frame, everything is aligned to the left of it. So now we have this nice placeholder text field or input field with a title here. It looks like it's missing something, and I think that's a nice border around the actual input. So go ahead and select the auto layout inside of this parent one so that you only select the input itself like this and then add a stroke to add a border around it. Now we have a black stroke around it. It's a little bit too dark here. So what we want to do is do something around the secondary color that we have, maybe a secondary 700 or maybe even lighter. I think this primary 200 actually looks a little bit better. So I'm going to go with that. Now we have an input here. This looks great. Now, because we're going to reuse this input in multiple places, it's best to turn it into a component. And to do that, let's come back in the next lecture. 26. Creating Components: Last lecture, we put together this input and use auto layout to put it together. Now what we want to do is actually turn this input into a component, which will allow us to reuse that component in multiple places. And in case we need to make changes to the input here, because it's a component, changes can happen a lot faster because you only need to make them in one place, and that's the main component and it gets applied to all the instances. This will make more sense as I start to put it together. So what we want to do is actually we're going to go inside here, select this layer that has the auto layout frame holding the title and the text box over here, and we want to hit Alt Command K on a Mac or Alt Control K on Windows. Now, alternatively, you can also go up here and hit Create component from this button over here. And so now this has been turned into a component. You can see the color is not purple for the border, as well as in the layers panel, it's also purple here, indicating that it's a component. Now, this symbol here is showing that this is actually the main component. And so you don't want to really have your main component inside of a frame. You want to have them separately somewhere else, like in a separate page with all the other design systems or just separately placed with all your other components. So for that reason, I'm going to drag that outside of here, outside of the sign up frame, place it over here. And in fact, we can even rename it by double clicking and calling it input feel. There we go. Right now, it's hard to see the title. So one thing we could do is we can create a section for our components. So I'll go ahead and create a section here so that we can just place our components inside of a section with a background color. So why not change the background color to white or better yet, you can even choose the background color to white, and we're going to rename this section components. So any component that we have, the main one, we're going to put it inside of this components section. And now we have the main component here to actually have a copy or as it's called, an instance of it inside of here. We can just simply copy and paste it using Command C. Double click here, click into here and paste it with Command V. Awesome. And as you can see, it's been resized because in this auto layout frame, this is the size that we have for the content. And by default, the text box is filling the entire container, which is what we want. Now, in fact, this might be a little bit too wide in terms of the text field. So we can go into our all the layout here and add a little bit more of a margin. Perhaps instead of 48, we can do 80, and this is a better size for this in terms of the spacing from the left and right. So now, you can tell this is an instance and not the main component using this symbol here. It's not the same symbol as up here indicating that this is an instance. What does that mean? That means that if I make any changes, let's say, to the text here and start writing anything in here, my main component stays intact, and this is how it looks like. However, from my main component, let's say I want to make a gap change instead of having eight pixel gap between the title and the box, I want to have a 20 pixel gap. That change has automatically been reflected in my instance, too. I'm going to hi Command Z to undo that. And one more time to undo the text change here. So this means in our instances, we can make any changes that we want, and it won't be applied to our main component, which is what we want. So this way, we can double click the title, change it to email. We can double click the placeholder and change it to email at@gmail.com, for example. And now we have an input for the email, and we can simply duplicate it by hitting Command D and having another copy and renaming this one our password. And inside of here, we're going to put some placeholder password using Alt and number eight on my keyboard to create some placeholder password here. So there we have it. Now, the gap between these two is a little bit too much. So what we can do is select them hit Shift A, and change the gap to maybe 24 pixels. That's better. So that's how we create components from elements. Moving forward, we're going to be creating a bunch of other components for other things like buttons, some cards. And again, any element that we think we're going to be re using a lot throughout our designs. One more thing I'm going to do is I'm going to change this title text over here. Instead of it being black, I'm going to change it to our text 500, which is slightly lighter. And again, that's better on the eyes. So let's come back in the next secture to complete putting together our signup page. 27. Adding Buttons: All right. So continuing with our sign up page, we have a few more elements to add to this page. Looking back at the wireframes, we've already added the fields here, which is great. So now we need some buttons to sign up or sign in with phone number or Google account. So we need a few buttons in here, and we also want an image. So why don't we start with the button components first, create those, add them to our page, and then come back later for the image part. Now for buttons, the easiest way is to create a button using Autoayout as well, and we'll do that outside of here so that we can create a component that's reusable throughout our project. With things like buttons and inputs, you definitely want to make them as components. So if you need to make any changes, it's quick and easy and it's all in one place. So now to create the button, just outside of my canvas, I'm going to create a text layer using the Tiki on my keyboard and write just a simple placeholder text like button works like this. And to turn this into an autolayout I can either right click and hit at or layout or as a shortcut Shift A does the job. So there we have it, we have a button now. It already has some padding on the sides, which we can see is ten pixels from the top and bottom and ten pixels from the right and left. So we can definitely use this or we can bump it up a little bit more. So first things first, I'm going to rename the layer to button and turn it into a component using Altommand K or Alt Control key on Windows. Again, you can also do that by hitting this little button here. Now, we have this button component here, and we can at a background and a text color for it. So for the background, I'm going to add a fill, and I'm going to use the applied styles and variables, and we're going to use our primary 500 color as the primary button color as well. Typically, you want to use your primary color and some secondary color to create different types of buttons and different feels and looks. I'm going to apply the same corner radius as the input field that we've done, eight pixels for our buttons as well. So simply by clicking it and going over here to appearance and changing the corner radius. Or you can also drag it to eight pixels like this. That works too. So now we have this button and the beauty of using auto layout is that if this text grows or shrinks, so let's say we have a longer button name, the background or the container will also grow and shrink. So this is why you want to set up an auto layout for your buttons. Now, the spacing from the top and bottom is, I would say pretty nice, although we can bump it up a little bit to 12 pixels and also the same thing for the sides. I think we can bump this up to 16 or even 24 pixels would look great. Now this section that we have components. I'm going to drag our button in here as well. So now we have this beautiful button component. We'll come back to create more different variations of it later. But for now, let's apply this one here by copying it. So I hit Command C, going into our frame over here where we have our email and password and pasting it in by hitting Command V. Again, on Windows, it will be Control. Now for the button, I wanted to take up the entire space of the container in terms of the width. So there are two ways to do that. You can either go over here where it says Hug currently, and it says the width in pixels. So it's 101 pixels right now, and it's on hug. Now hug means whatever content there's inside of the auto layout, which is currently this button, the autoayout will auto resize itself based on the content. So again, if the content is longer, so we have a longer button text. The auto layout will resize. Now, another thing you can do is instead of having hut contents, you can do fill container. So in this case, when we do fill container, it takes up the entire width of the container that it's in. And because the current container that it's in is this one here, this autolayout frame here where we have our inputs, it's taking the same width as those input fields and filling all the space. As of now, no matter how long the text is here, the width is always going to fill the container fully. Now I told you there's another way to do it. So I'm going to just hit Command Z to go back. A shortcut to doing a fill container is to hold Alt and double click on the edge of your component here. So if I double click, it will do the same thing. I will change it to fill. So it's a little shortcut that I learned not too long ago, and it's actually been super helpful. So now we want to rename the button here by double clicking and changing it to sign Up. And if we look back here, we have a sign up button, and then we have a divider. So we'll come back for the divider in just a second. For now, let's add two more buttons. One to continue with phone number and the other one to sign in with Google. So I'm going to double click, hit Command D twice to duplicate. For this one, I'm going to change it to sign up with phone number, and this one, sign up with Google. Now, one thing that's wrong with this design is that all our buttons look the same. We want to do is create different variations of buttons so that we use a secondary type of button in some places where an action is considered secondary. So for example, the sign in with phone number and sign up with Google are not the most widely used buttons, or even if they are, we want to separate them from this sign up button. So that's why we do two things. One is that we want to change the color of these buttons from the primary blue we're using to either the secondary or maybe a white button. And the other thing we want to do is add that divider. So let's come back in execture to do those two things. 28. Button Variants: Two things we want to do is change these buttons to a secondary type and also add a divider. I'll start by adding a divider first, and to do that, we're going to also use Autoayout and using lines and one text. So to add a line, you can hit L on your keyboard, or if you go down to your shapes here, your shape tool, you can also click Line from here. Now, when you're drawing a line, if you draw it anywhere, let's say over here, you can draw a line randomly like this. I'm going to undo or if you hold shift, you can draw straight lines. And these straight lines will be at zero degree angle, a 45 degree, 90 degree, and you get the point. So we want a straight line. So I'll just let go over here. The width doesn't really matter, and I'll drag this into our auto layout frame here. So now we have this black line here. You can see it. It's very clear. Now we want two of those so that we can sandwich a text in between them. So that's why I'm going to hit Command D by selecting it. When there's an object inside of a frame or our layout frame or any group or container for that matter, to quickly selected, you can hold Command and directly select that item. Otherwise, you have to double click into this frame until you reach it, and both methods work. But using command and click is just faster. So now I'm going to hit Command D to duplicate these two. I'm also going to add a text for the O, so I'm going to hit T on my keyboard and type in O. Amazing. Now, what we want to do, we want to actually have all of these in the same line. Because our auto layout right now is set on a vertical layout, everything is going in the vertical direction. What we can do is we can create auto layouts inside of each other like we have so here. We have an auto layout over here for the parent frame. Then we have two inside of it, one over here, and one over here. So in fact, we can add another one inside of this one to hold our dividing lines and the text here. And to do that, the simplest way you can double click to select your line. Or if you don't want to do that, you can also select it in your layers panel. Hold Shift, select the Otext and the line two without letting go of shift. Now hit Shift A to create another auto layout inside of here, and we can see over here we've done that. Now instead of a vertical layout, you guess that we're going to do horizontal layout. And this is looking good. There's a few things we can do about it. One is that it's currently going outside of our parent auto layout. And another reason for that is that the elements inside have a fixed width, except for this texture. So our lines have a fixed width of 188. Now you don't want to manually change that. What you want to do is to change these so that they're filling the container that they're in. So no matter what this container is, we want those to equally fill the auto layout inside. But to do that, first, we should select the dividing auto layout frame here. Instead of hug, we want to choose fill container. So now, as you can see, it's only filling up the container that it's in, which is great. And now what we want to do is we're going to select the line and this line, and I'm using command to select different items in my ris panel. And instead of a fixed width, we're going to change it to fill container. And now they have equal widths, and they're taking up as much space as they can in the container with respect to the spacing or the gap that they have here. So if you want to reduce the spacing, so from 24 pixels, go down to eight pixels. As you can see, there's less spacing between the text and the lines, which is a little bit too little. So I think 16 pixels is a good gap between them. Now, another thing we want to do is we want to actually make it so that they're vertically all in the middle. So the lines right now are at the top because by default or alignment in auto layout frame is align top left. What we want to do is align center so that everything is aligned to the center both vertically and horizontally. Now, right now, it's a little too strong. So what we want to do is change the black color to something else. Currently, we're changing the color of everything, so the text and the lines because when we select the auto layout frame, it's showing us the colors that are being used inside of it, and we can quickly set the new color so we can do something like secondary 200. I think this text 100 looks good for the dividing lines. For the text itself, though, we can make it a little bit darker, so maybe text 400 or actually a little bit lighter text 300 works. Nice. So now we have this dividing line. We want to do one more thing, and that's to create another variation of our buttons, and we can do that up here. By clicking our component for the button, we want to create another variation, but without having to create another component. Sometimes we have components that have different variations with the main thing being a slightly different background color or any slight differences where we'd want another variation of it, but we don't necessarily want to create another component. So that's why we can select the components, and over here, we can actually add a property. Now there are different properties, and we'll go over them in a bit. But for now, we're interested in another variant of this button. If you hit plus on the variant, now we have this property here. By default, it's just called property one, and the value is default. But we can use that for whatever we want. So in this case, what I want to do is create a property, set this to our primary button as a value of that property, and then create another one with a white background and set that one as a secondary button or something along those lines. We want to click Plus on the variant here. So now we have another variant of this button. And we're going to click the parent container and change this property one by double clicking and changing it to type so we're just calling it type. This one is our default type, but we want to change that to primary like this, so the value of this is primary. And this one we're going to call it secondary. And we're going to change the fill. Maybe this primary 50 works instead of white fill. And we can change the text color so we can double click the text. Change the text color to maybe text 500. So now if we go down here for these two buttons, we can actually click them. And now in our instance, we get this option called type, and we can choose primary or we can choose secondary. And on second thought, I think maybe just going with a simple white button looks better. Maybe you want to add a stroke to it and make the stroke primary 100. We're going to click and also change this one to secondary as well. So now we have these two buttons here and it's starting to look good. So with that, let's come back in the next lecture to find an image to use here on the right side. 29. Finding Images to Use: Right side here, we'd want to put an image that's related to wander Wise and what they do. Now with Wonder Wise, book amazing destinations and packages and all goes. So we want to travel picture, and we can find one on, of course, Google or other places where we can use the actual license of the image in the project. Or another option is to use plugins. And one of the plugins that I really like if you hit on over to the plugins and Widget tab and search for Unsplash, you get this plug in here that gives you access to a lot of photos that you can use. And by clicking on it, it will open, and we'll show you some random pictures at first, but you can actually go ahead and narrow it down and search for specific pictures. And so you can go here and search for, let's say, travel, hit Enter, click Search, and you get all these cool images. And you can really browse them and see which one looks best for your project. And I think for me, I'll go with one of the pictures here. This looks like a pretty amazing destination, so I'm going to add this image here. You don't have to exactly do that one. You can do whichever one you like. One just looks beautiful. Definitely want to be there right now. So we want to drag this over here inside of a container, but as you can see, this image is actually not even inside of our sign up frame. So to fix that, in our signup frame, as you remember, we created this frame two. So what you need to do is drag this inside of that frame and make sure that it's being dragged inside of the frame two. So simplest way to do that, we can just drag our image down to this frame two. There we go. Now it's inside of that frame, and we can move it around as we like. So it has the beautiful crop that we want. This looks amazing. It's already starting to look really nice. The only thing I recommend adding is a little dividing line between the container here or the frame and the image. Right now, it's like blending it a little bit, and maybe we can improve that by adding a dividing line. So let's click on this frame here where it contains all the sign up elements and do a stroke. But now you'll notice with a stroke, you're adding a stroke on the inside and you can choose the thickness of it. That's great. But one thing you notice is that we don't want to stroke on the entire container. We only want to stroke on the right side. And so that's where this little Stroke per site comes in. You can click on it and choose only to have a stroke on the right side. If you want one on, let's say, the left and the right or something like that, you can also do a custom. But we just want on the right one, so we'll click right. Another Broder is only on the right side. Eight pixel is a little bit too much. I think something along the lines of two to four. I think four pixels is good. And this is a strong color, so let's change it to something a little bit more in line with our primary colors. This is where you get to play around with your variables and see which one looks better. You can do a secondary color or even a primary color. I really like this secondary color that's slightly darker than the background. I think it looks pretty good. So now we have this image, we have the sign up page pretty much completed for now at least. There are definitely stuff that we can do to improve it, but we're going to leave those for future lectures. We're going to finish it and then come back and do some polishing touches maybe closer to the end. Let's come back to the next ecture to continue with our next pages, which is the verifying login page. So this is after the user has logged in, and they need to check their email to add a verification code before continuing on. Let's come back to the next secture to do that together. 30. Making Images with Figma AI: Way to create an image on the side over here or in fact for anything through your project, is also using Figma AI. So Figma has this images feature that allows you to generate images using their make image feature. All you need to do is head on over to the action menu, and from here, if you don't make an image, if you scroll down, you should see it in the image editing tools. By opening it up, you can write a prompt and have Figma make an image. Something along the lines of photo of people traveling to a beautiful tropical island with crystal clear waters is something that came to my mind. And of course, it can be more specific and write more details and give it more info on what kind of image you want and so on. For now, I'm going to make this one and see what it does. And as you can see, Figma AI is working on generating an image, and it will give you some options that we can choose later which one we like. So we'll give it in a minute here. Wow, this is a beautiful image, and we get a couple of different versions that we can use for our project. Of course, some of these are not perfect, and we can ask it to make changes. So if we're like, You know what? We want sunset background instead, we can ask for that or change the prompt and regenerate the images here. So now let's see if we can get a nice sunset background instead. Wow, and there we have it. Beautiful tropical island, a couple of different options. We can even go with this one here. As our image. So I'm going to hit Command X, double click into here or click into our frame, Command V to paste it in there. And so this way, because I have this image on top of the other one, if at any point, you know what? I'm like, maybe I don't like this image, I like to go back to the other one that I had. I can always hide this one using this I icon here and go back to the same image here. For now, I'll leave it on this beautiful AI generated image from Figma. Let's come in the next ecture to work on our verification page. 31. Verification Page: The next page of our app, the verifying login. Now, if you remember, while we put together the flow and the wireframes, this is the page where users will be asked to input a code that's sent to their emails or their phone numbers in case they chose to login with phone number, and they need to enter this code and continue. So a few elements I've put here will keep the same image from the sign up page. We'll have a verified login text followed by an input for them to put in their code. And then we will want also a button to resend the code just in case they didn't receive it, and then a button to continue once they've typed in the verification code in order to verify their login. Again, I totally recommend that you take a look at some inspiration before starting any new page in your designs, even when you're going from wireframing to Modups. It's always nice to have inspiration and to also make sure that you don't miss any of the steps. For example, I'm using mobile.com, and I search for the verification screens, and there's tons of different ones here from PayPal, which is, again, using a similar style to what we're thinking with different book codes, and I really like the fact that they have different fields for each number. Maybe we'll take that similar approach in our designs, and there's different ones that you can see with different types of verification. So if they need to confirm an email, they can even click on a link from their email. So there's that type of verification, and then there's types of verification where you actually need to enter a one time code like here or in the case of PayPal. So with that, let's switch back over to FIGMA and let's go to our project. And the simplest way we're going to do this is to duplicate our sign up screen because we already set up most of the work here anyways, and most of this design is similar to the sign up screen with a few changes like here and the verification content and the content that we have on the left side. So to duplicate a frame, simply click on it. You can hold Alt and drag a copy or hit Command D to duplicate a copy. I'm going to go ahead and hold Alt drag a copy out here, place a right of the screen. And we're going to rename it. You guessed it verification page. There we go. And what we're going to do is we're going to start from the top and make some changes. First of all, we don't want this big logo anymore here. So what we want to do is maybe switch that up to an H three. And change the copy here to verify. Actually, we're going to change it to enter your verification code. And I realize this is a little bit too big, so maybe an H four will do the job, and we're going to do left to line. So it's a lined to left of the text box here. And for this text here, we're going to change it to please input the verification code sent to max.do@gmail.com. And obviously, this is a placeholder text, and this will be the email. And I just highlighted it so that I can change it to bold. There we go. And I'm going to do the same thing here. We're going to left align the text here. Now, one thing here, I don't like the fact that our text here is aligned in the middle of the auto layout. We'd actually rather have everything aligned to the left, especially now that the text is aligned to the left too. So all we need to do select the parent container here, and instead of align center top, we're going to do align top left, which will push everything to the left side and top side here of the auto layout frame. We don't need these fields or the other buttons or the dividers, while holding Shift, I'm going to select what I don't need so I can hit delete on my keyboard and get rid of them. Now I'm going to change this field here to verification code. And I'm going to use Alt and eight on my keyboard to just input some placeholder text like this and change the sign up text by double clinking into it to continue like this. For the buttons here, while we're at it, I noticed these could use a bit of a more bolder look or weight. So I'm going to change it to body bold here for our buttons. Just think that looks better for a button. Yeah, that's much better. And again, as you go along making changes to your designs, you'll notice these little details will pop up at you. As a designer, we're not trying to get everything right from the get go. There will always be little details that you might want to touch up as you're designing and as you're figuring out things like how your page should be laid out and so on and so forth. Now, if you remember, I said, it would be nice if we set up our verification code with separate inputs that are all next to each other. The problem is, if we start doing that right now with this field, we have the as an example, I'm going to do it, and I'm going to auto layout these two. The problem is this title that we have. We don't really need a title for each one of them. And although I could go in and delete the title for this one, what we want to do is actually set up properties that are related to that title so that we can toggle it on and off in a more smarter way or in a more efficient way rather. And so to do that, we're going to explore how we can use Boolean properties in our components in the next lecture. 32. Using Component Properties: Initially, we set up the input field over here as a component with a title in there. But what if we don't want a title in certain cases like this verification code page where we want to achieve a similar look as what PayPal has here. So what can we do about it? Again, you can go ahead and click on the verification code title here or the title of your input anywhere and click Delete. That's one way to do it, but not the most efficient or organized way to do it, especially if you're working with other people in the team. There's a much better way to do it through the property panel over here on the right side that we have. So right now, we don't have any properties, but what we can do is we can go to our components here for our input field, select our input field, and we're going to add a property. So as you can see, these are the instances over here of the input field. On the instance level, we can choose whether we want to show a title or not on a case by case basis. Now, by default, we'll show a title, and then we'll allow ourselves as a designer to toggle the title off if we don't want it. There's two ways to do it. You can set up another variant of this input field. Similar to what we've done here. Challenge with that is that if you need to make changes to your input, you'll now have to make it to two different variants of it. So for a case where you just want to simply hide the title, you don't actually need another variant for your component. All you need is a new property and, in fact, a boolean property. So to set up a property in your component, go to add property over here on the right panel, hit plus, and set up a Boolean property. Now, Boolean is simply a state of on or off. So this Boolean property will allow us to toggle property between on and off. And right now the name is just Boolean, but we want to actually give it a meaningful name. So we'll do show space title like this. So by default, we'll leave show title as true, and then we'll hit Create property. Then what we'll do is we'll tie the visibility of this layer to that property that we just created. Now, first of all, to toggle visibility, all you need to do is check this icon here, hide. And if you check it, simply, that title will go away, or at least be hidden because it's still here in the Layers panel, and I can unhide it from here as well or hide it from here. What we want to do is we want to attach the visibility of this layer or this title to that property we just created. In other words, at the instance level, if we toggle that property on, then this title should be visible, but if we toggle it off, this title should be hidden. There's a really simple way to do that, to attach those properties, and all you need to do is go over here right next to the I icon. Click to assign a property for the appearance of this title text to show title. Boom. And now our show title property is here. You can always remove it from here or detach it. Let's see that in action. Let's go to our verification code input here, double click it to select the instance. And now we see this show title property. If we toggle it off, there we go. Our title has disappeared, and over here, instead of fill, we actually want hug contents. By default, I believe we have hug contents. Anyway, it's in here, so that's what we want. So now we have an input field. We can toggle the title on or off. Beautiful. All right. So now that we've tied the visibility to this title, we want to actually just go ahead and copy another variant in here. And get rid of this one here so that now what we can do hide the title, Duplate this five more times using Command D. So we have six verification codes. Or six digit codes, hit Shift A while selecting all of them, and I was holding Shift to select all of them and do a horizontal layout. There we go. Now the spacing between them could be a little bit less, maybe 16 pixels. And instead of placeholder text, we could just input zero, zero, zero, zero, zero. Now, of course, in this case, we want our text to actually be in the center, and what we can do because this is the only case where we actually want to apply this, we'll go ahead and overwrite the properties and do it inside of our Instance here. So I've selected all the text layers inside, nothing else, not the rectangles or anything else, just the text layers. And I was holding command and shift to do that. So while you're holding command, you can quickly select anything inside of this out layout frame, and by holding Shift, you can select multiple one of them. So by holding Shift, I'm selecting all the titles so that I can hit center line, and all the verification codes are now in the center. There we have it. One more thing I'm going to do is I'm going to do the same thing, but now I'm going to double click to select the AutoayoutFrame inside, like the one here and hold Shift and click on all of them because I want to make the height a little bit more. Instead of 12, let's do 16. That's much better for this case. So we have this now. We want one more text here, didn't receive the verification code, resend it. And I'm going to highlight this rescinded part, bold it using Command B, and let's do a primary 500 so that it looks like a link color. Amazing. Now we have our verification page, and it's looking really nice. Let's continue on to our next page, which according to the wireframes, would be our destination Discovery page. So this is the meat of the project. This is one of our most interesting pages where we're going to work with a lot of elements. So I'm looking forward to this one. And we're going to take our time with it and learn a ton in the upcoming lectures. So if you're ready, let's jump right in. If you need a break, take your break and I'll see you in a bit. 33. Starting our Destination Discovery Mockups: Sometimes in our designs, we're working on simpler pages like that verification page that we worked on, and sometimes we work on complicated and more complex design challenges or pages. In our case, right now, we're heading on into our destination discovery mockups, and I figured it's always best to break down these bigger pages into smaller components and parts that we can work on and then piece them together. So that A, our components will be reusable. We can reuse things like this navigation panel, et cetera, and different pages. Just like how self, when we went from our sign up page to our verifying login page, it was much easier and much faster. That's exactly what we're trying to do here with our destination discovery page because a lot of these components can be used in other places, too. And some of them we already put together like this input field here for search and any buttons that we need. I figured let's break down this page into multiple different components that we'll start with. Let's start from the top and work our way down, starting from our navigation bar at the top here. So this navigation bar is how users will be able to navigate throughout our web app. Click by clicking the logo. They can always go to the home page, which is this page here, in fact, and then we want some links on the right side here. We don't know what those links will be yet, or for now, we can just place a little profile icon, similar to what you even see here in Figma, where you can manage your account or see a drop down of different options that you get, and we'll sort those exactly out as we move forward. For now, let's start with that basic NAVR, put that together for the web, and then we'll come back, start putting together some of our elements here, like the input here for search and the fields here for the date selectors and a button to search and so on. And then we'll actually focus on some of the card designs. So these are all cards, and we designed these destination cards, in fact, if you remember, in our wireframing, so we'll use this wireframe to come up with an actual component card that we can again duplicate. And while we're doing that, have some fun with AI content generation too. And then we'll finish up by adding some collection here and the filter and sort button and so on and so forth. If that sounds good, let's come back to the next secture start with our navigation bar design. 34. Using UI Kits Libraries: You might be wondering, you know, we're putting together all these components and doing them from scratch here and creating our own component library, which is great. But Again, you might be asking yourself, Hey, Nima, do we need to design every single component from scratch for designs that can be tedious, especially if you're trying to get together a design really fast and your company already has assets or maybe the client you're working with already has a design system. If not, there's definitely ways to leverage what FGMa gives you access to, as well. There's multiple resources that you can use, especially with FICMa's new updates, you can actually access some libraries that you can use to bring in some components from previous designers or other designs into your projects. So we want to design this Navbar, but what if there's already other Navbars out there that we can just simply copy and use? That's where this Assets panel here comes into play. So you're usually in the file panel. Switch over to the assets one here, as you can see, where our own local assets is getting put together, where all of our components are there and such, which is nice. We're going to actually go ahead and add more libraries here. And over here, we can publish our own assets that we can use in other files, and we'll touch on that a little bit later. For now, what we want to do is switch from this current file to UI kits. And by doing so, you'll find three UI kits that's currently available on Figma that you can simply add to your project. There's the IOS 18 and iPad OS 18. So if you're working on an IOS or iPad native app specially, I highly recommend that you add this one to your file because you don't want to be redesigning every single component that Apple already has. There's a material three design, great for Android projects or just in general, they have a lot of components that is used in a lot of applications. And FICMas got one called Simple Design System, which we can add to our file if you want to take a look at it. Now we can even click on it to see everything that this project also has. So it has many typographies, size variables, color variables, some styles here, some accordion style components, a lot of buttons. Cards, forms, many icons that you can use, which is awesome. They have inputs, menus. And yeah, of course, they have a navigation component. Now, of course, you can add this to your file and have access to all of this within your file, or you can actually drag any of these onto your design as well. So if you see this navigation one, you can drag it and utilize this one here as your navigation at the top here. So you do have access to these other design systems that you can utilize in your projects, and you can take a look at each one of them to see what do they contain and what do they have? Or, again, design your own from scratch, which is what we're doing here in this project. We're doing it so that we can maximize the learnings from this course. But of course, in a real project, sometimes or maybe a lot of times, you might actually reuse components that are designed by other designers or in other cases, make one from scratch. So I hope this gives you an idea of some places you can look for inspiration. Some places you can tap into some resources. Another great place to look for these UI kits is to head on over to the community tab here. Now, if you go to the design resources tabs, you'll see the UI kits that you can just go directly into. We already explored these ones, but there's tons of other ones that are some free, some paid that you can use in your projects as well, right. So I'll leave it to you to explore UI kits if you'd like. Again, we're going to continue by putting together our own components in the rest of the project. 35. Designing a Navbar: So moving on to our Navbar and designing it together. First things first, let's go ahead and duplicate this frame to use as our dashboard screen. We're going to call it our destination Discovery page. So we'll rename this one, destination Discovery. And again, I copy this one by going to the verification page, holding Alt, and dragging a copy over here. Now, we don't need any of this content here, so we'll hold Shift by selecting both of them and delete. So now we have a blank screen or a blank frame in this case, and we want to put together a Navbar and then drag that out as a component. For our Navbar, we want a logo on the left side here. So we can just use the Vander Weis text that we've been using. And then on the right side, we'll just put a placeholder for maybe a couple of buttons, as well as things that will probably need a profile dropdown, as well as a navigation bell icon. So this navigation bell icon will be here, as well as a profile screen, as well as the little profile dropdown. That's typically what we see in Navbars. And again, tapping into some resources or inspiration will definitely help you get faster at putting together these components. Going to start by copying and pasting this Vander Weiss logo. I'm holding command to select Vanderweis, bring it over here, paste it in. And it's a little bit too big. We want to switch over to smaller size. Maybe this H four is good. And now I'm going to hit Shift A to turn this into an auto layout frame. This auto layout frame we can use for our Navbar. But what I want to do is select the frame here for destination discovery and change the fill to our background that we already created. So this is the same background color here that we're using. And what we're going to do is select this frame this auto layout frame that we just created, and we're going to go ahead and move it to the corner here, which is typically where we see our navigation bars. Now we're going to go ahead and stretch it all the way across to take up the entire width. Now we don't want the content to be in the center. We want the content to be aligned to the left and center vertically. Vertically, we want it to be in the center, and horizontally, we want it to be aligned to the left. So that's why we're choosing this one here. The spacing is a little bit too little. Maybe changing the spacing 10-16. And then this one, we want to actually use our grid. So if you remember, we set up a grid and we can turn it on and off on our frames. We want to use the same margin here that we set up for our grid which, as you can see here is 48 pixels. So we want our Navbar to also have a spacing of 48 pixels from left to right. So it has this beautiful alignment with our layout grid. We'll go ahead and hide the grid for now and we'll set a fill of whites for this Navbar, too. So it's starting to look pretty nice. Starting to feel that 16 pixels might be a little bit too small. The height looks a little bit too compressed here. So we can do 18 or even 20. I think I like how 20 looks on here. And now we want some links on the right side. Before that, we want to have some separation between this Navbar and the page here. So why don't we set up a stroke around it as a border? And again, we only want a bottom stroke, so we're going to choose bottom and change this to secondary 800 or secondary 700. Looks good. I think the secondary 800 looks good. Now, to create that little profile icon here, we can set it up inside of a circle, which we can create by hitting O on our keyboard to draw a circle and hold Shift and drag an O. Of course, it's not here. It's going to be on this side. So because it's inside of our auto layout and our auto layout right now, everything's aligned to the left, I drew the circle here. So I'm going to double click to select it, and instead of 65 by 65, let's make it 48 by 48. I think that's a good size. Now, we don't want our profile to be here. We actually want our profile picture circle to be on the right side. So how do we do that in autolayout? So in autolayout, we typically have a fixed gap that we specify here between elements. Of course, you can go ahead and make this gap large enough until this goes on the right side, but this is definitely not scalable and it's not the right way to do it. What you want to do is switch from having a gap to using an auto Gap, we should go ahead and space everything out evenly. Because we have only these two elements right now, everything will be spaced evenly and pushed to the ends of the out layout. What happens if there's a third element? Let's say a text here to show the name of the user, Mac Stowe. This also gets evenly spaced out, too. So we want this name, and in fact, we want it on the right side, so I'm selecting it and moving it to the right. I wish we'll move it over here, but we don't want this gap here between these two. We want these two to have a smaller gap and be close to each other, and then the rest of the auto layout to have a bigger gap or get evenly spaced out. So in a case like this, all you need to do is select your text. Well, first of all, H four is a little bit too bold. For this one, we can just go with a body large, bold. And let's change the text to text 400. That looks good. And let's hold Shift while we have the text selected to also select the ellipse here, and we're going to hit Shift A to create an auto layout for them too. Now these are an auto layout with an auto spacing as well. But between these ones, we don't need an auto spacing. We just need, let's say, a 16 pixel spacing, which looks good. And instead of a fixed width of 638, we want it to hug contents so that it gets pushed to that side and only has a width of what it needs, which is this width here. 16 pixels is a little bit too much for the gap. So we'll do eight pixels. And now what we want to do is just have a couple more links here. Now, I know I said we can add some links here, but maybe we can do that later as we add more pages or have other needs to do that. For now, we'll leave it like this. One more thing we can add here is a notification bell icon. Now, the plugins and widgets, if you search for phosphor, it's a really good library of icons that you can use for your project. So I'm going to run this one here. And I'm going to search for a notification icon, and take a look. We have some nice ones that we can use. I'm going to click. And once you click it drops it right over here, so we can just simply drag it here. And we have the same issue. Of course, we're going to do the same thing. We're going to select the notification bell vector frame, select this frame here as well that we created for our profile drop down, hit Shift A, and between these ones, we're going to do 16 pixels. And again, we want to do hug contents. 16 pixels is a little bit too small. Why don't we try 24 or even 32? I think 32 looks nice. The icon is a little bit small, so we can double click and instead of 24 by 24, we can make it perhaps larger. We can make it 32 by 32. I think that's pretty nice. And maybe instead of the black color, we can change it to primary 500. And instead of this black color, we can change it to maybe a secondary 800. On second thought, I think I can make it a little bit bigger, like 40 by 40 and that will look better, more Awesome. So we have a notification bell icon here. We have our profile dropdown. Right now, it doesn't have an image, so we can come in the next exture to put that together. But the first thing I want to do is move this outside of here so that we can actually create a component, and we can do that by hitting Altommand K or Control on Windows and rename it our Navbar. And, of course, I'm going to move this to our components section here so we can neatly organize all of our components as they grow. So I'm going to just expand that section and move this one in here. I'm going to give our components section also the background color so we can see our components better. I'm going to click on that NavR component and now drop it or paste it in here. So now we have an instance of it, and we're going to move this to zero, zero for the X and Y, so it's in the corner here and taking up the entire space. Looking great. Let's come back in the L ecture to continue with the other parts of our destination discovery page, which is the inputs here, some cards, and so on. 36. Generating a First Draft with Figma AI: We're working on this page, I forget it's a good time to check out a feature by Figma called First Draft. Now, this first draft is actually an AI feature that basically comes up with the first draft you for your mockup so that you can use that as inspiration to design your screens. It's not really meant to replace doing mockup work, and really the main idea, as the name suggests, is to give you an idea of what that page should look like and to make sure that you put all the pieces together correctly. Think about it like a inspiration for your designs, mixed with the details of your project. To access that feature, you can go to the actions panel or hit Command K, and then you'll see this first draft feature here. So open it up, and you'll need to write prompt and as detailed as possible so that it comes up with that first draft. So we'll write as much detail as we can, saying using a similar text as the placeholder here, we'll do a destination discovery page for a travel app that allows users to book vacation packages. In one place. On the screen, display cards that all have different destinations, including name of the cities, pricing for the package. And I'm just taking a look at our wireframe to make sure I include everything. A booking button. And a popular badge. The rest of this page should have inputs for location, time of travel in a from and to format. And we're going to start up by just saying a web app, destination discovery page. So it knows what we're designing for. Now, of course, I can get a little bit more in depth and more detail, but let's see what this will come up with. So we'll press Make it. It's working on the screen. There we go. Unfortunately, it didn't put together a web app page for a desktop screen, but we see the mobile version and this is and this looks pretty good. We have our images here, the packages, with the pricing options, and even the pictures of different cities. So this is definitely a nice design that we can go with. I really like how they included some icons. So we can definitely use that idea. And if you want, you can actually simply paste over these inputs into your design if you want. That's definitely an option here. So we can definitely take a look at that and we'll leave this here as more of inspiration. Now, from here, you can actually change the styling as well. So if you don't like the styling that it came up with, you can do different ones like here. We have a purple one, a blue one. And as you can see, the fonts are changing, as well. So we have a sera font with this one, which is interesting. This green one, and then we have a dark mode one, super cool. And we can always make changes in terms of the design. We can see the dark mode, by the way, as well. But we can change some of the coloring here. So if you want, let's say, blue for our main button, we can do that, or even for the icons down here and the whole overall theme of the app, or we can input a specific hex code. For example, we can pull the hex code from our local variables for primary 500, which is this one here, and even go back in here, go to First Draft. So that's super cool. So feel free to use the Figma AI First Draft to come up with the ideas for what you want to include. Not right off the bat. There's already some stuff that's missing from here that we want to include a popularity badge, bookmark, which is already there, so that's nice. We can use a similar style bookmark. And we want ratings as well, and and also for the pricing, maybe initially, we want to show per week, and then only if the user actually inputs dates, then we want to show the exact price for those times that they've selected. So that's how we can use Fake MI to generate some first draft for us. Now let's go Mike and Ax extra to continue putting together our destination discovery page on our own. 37. Adding Search and Time Inputs: To move on to designing the rest of our destination discovery page. We already have the navigation bar here, which is nice. Now we want to move down to our inputs, which will be the destination. So this is where the user will be traveling too. Now, in our AI generated image case, we have a from, but actually we don't need a from. We just need a destination because of the fact that through this platform, they're not booking flights. They're only booking packages that basically come with accommodation and whatever activities they do there. So we won't need to include that. Want to include a destination, input field. And maybe for the icon, we can do a similar icon to this one here. I really like it. And then we want an input for date selectors, so we want to allow them to select dates that they want to travel from and to then we want to have a search button that basically allows them to click so that they can search and refine these results. Now, by default, these cards will just show general destinations. And as they search for a specific destination and specific times, the idea is that these results will narrow down to whatever the user is searching for. You see this commonly on many booking platforms. We want to add an input that we have, so we can go ahead on over to our assets, local assets and drag input field here. We're going to move it so that it's over here, 48 pixels, and I'm holding altitudeck spacing, and from the top, let's also do 48 pixels. For our title here, let's call it destination. And instead of the placeholder text, let's just add some city in here, let's say, New York. Dot, dot, dot like this to give them the hints that they can add cities and so on. So we want an icon here like this location icon on the left side of it, right now, we don't have that in our input, so we can't really drag an icon inside of this because this is an instance. So we need to go to the component, which you can always do, by the way, by clicking this GoTo main component button. And now that we're here, we want to add an icon on the left side. But again, we want to set up a property so that only when we decide, then we'll show the icon. Let's go ahead and create a property here, a Boolean property, we'll call it show left icon like this, by default, let's turn it off because generally, in our fields, we don't need icons. Create property. Let's go to Phosphor icons. And if you don't have it here in your reasons, you can always search for it and plugins and widgets. And let's search for location. This one is nice. We can use this one. I'm going to hit Command X to cut it and paste it in here instead of our input. And let's change the size to 20 by 20 instead. And move it to the left side using the arrows on our keyboard. So now we have a nice icon here. And with the icon, we could actually reduce the spacing here on the left side a little bit. So if you go over here, we can actually choose individual paddings for our auto layout container here. So we can have a 16 pixel from the right, but from the left, we can do maybe eight, so that looks a little bit better. And now we want to give this icon a different color. Let's do primary 500. And also, let's tie the visibility over here to our show left icon, property that we just created. And of course, it will hide because by default, we've chosen to have that be false. You can always change that from here, by the way. So now let's go to the one that we wanted to be on and turn this one on. Beautiful. So now we have our destination input. We want two more fields for our dates. Now the thing is we need to change the icon for the dates. Now, back here, I'm going to do that one more time. I think the spacing from the left is a little bit too little. Maybe 12 pixels is better. And the spacing between the placeholder and this could be eight pixels. So the gap, that's a little bit better. I'm going to turn the default property off for showing that left icon. Now let's go back. Yeah, it looks better. So two more fields here, the from and two. Let's use Alt, copy some fields here. In fact, I'm going to auto layout these two together, so we can do that one more time easily. Change this to two, change this to from, from our placeholder, we can choose a date. Now we can just write a random date in here. As the placeholder. We don't need them to be as big, so we can actually make them maybe 400 pixels in width, like this. Let's change those icons so it's a calendar instead of a pin or location pin. And to do that one, let's come back in the next lecture so we can set up some dynamic icons here in case we have an input with multiple different icons. 38. Nested Instances: Challenges, we want to have an icon in here in this input that we can use, and we don't want it to be just that location icon. We want multiple icons. What we can do here is we can actually create a component for our icons, so we can drop whatever icon that we're using in the project in that component instead, and then we can create a nested instance of that component. That might make no sense at all right now to you, but I'll show you in a second how that works. First things first, I'm going to drag this icon completely out of here and I'm going to use Command K to turn this into a component. Let's rename this icon Map, pen like this. And it's important that you put this icon dash to create a group called icon. And now we can go over here, open Phosphor icons and search for a date icon. This one looks good. And let's also resize this to 20 by 20. So we'll change to 20 here. So it's the same size and also do Alt Command K to turn this into a component, and use the same format of naming icon and we'll do date or calendar. The name of the actual icon is really up to you. I'll also give it that primary 500. Look, and we'll move these inside of our components here, so they're all neatly there. And now what we'll do is we'll copy an instance of this icon into here. Move it to the left again. And what we're going to do is we're going to go ahead to the properties here and add an instance swap. And our instance swap will be icon, and we'll choose Map Pin, we'll call it icon. What this allows us to do is at the instance level, we'll quickly be able to switch this icon from the map pin to any other icons. And once I hit Create Property, you'll see how that works in just a second. So now if I double click this one here, nothing happened. So now in here, let's double click to select the icon itself, and then we'll do the three dots here and apply instance swap property, and we'll use icon. And so now what will happen is if we go where we're using our field here, if you double click, we can actually swap that icon from the map one to the calendar one for this one, and same thing here. So anytime we add an icon to this as a component with icon whatever, we can swap the icon with that one instead. Awesome. So now we have this field. Now it looks a little bit bland here. I think we can use a nice title here for this page. So why don't we move this down a little bit more added text, and we, let's find the next adventure. And we'll make this one age four. Place it over here. We're going to have this one at 48 pixels here. Move this one up until it's 24 pixels from this one and do an auto layout of them too. This auto layout should be the size of the entire content area, and then we'll change the color of this one let's do secondary 800. And let's change the color here to a text 300. Looking better. And let's add a search button in here. We can just copy a button from here into here. And we want this auto layout to actually be aligned to the bottom left like this and this button to actually g contents so that it's not as big, and we'll just say search. There we have it. Now, it's starting to really come together slowly, and now let's come back in the next secture to start putting together the design for our actual destination cards. 39. Destination Card Design: Biggest parts of our app or portions is the destination cards that we're going to design. So over here we have these destination cards that will initially show a default set of destinations, maybe by what's popular or we can decide that. Later, what we want to do is design then if the user searches or filters down their options, then a different set of destination cards can show. What we want to do is come up with a design for our destination card. So here we have a nice image in our wireframe that we can use for that destination. So similarly to what the AI has come up with, we can have a picture of that city. Here would be a button for bookmarking this city or destination. And then down here would be the name of our destination or name of city, followed by the number of ratings. Now here we have a price per week. Although this doesn't quite make sense, what we want to do is show a price, as well as maybe add in here the dates for this adventure for this package, so we can show that this trip is between this date to that date, or we can show the total number of days that can be useful as well instead of this price per week. So we can show the price. We can add a number of days that they'll be at this destination, and then a little icon here to show whether this destination is popular or not. So if it has this fire icon, it's popular, otherwise, it's not, we might be able to move this up here. So we'll see as we start designing how it arranges, and then we want to button to actually let them continue with this destination or to learn more about it. Let's get designing. Let's go back in our designs here and over here. So we definitely want to set up our cards as a component because we're going to be using so many of them, and we only want to make the change once if there's any change that's needed. So let's start with the image, which will be inside of a frame. So I'm going to hit F on the keyboard and draw a frame here, wall holding shift, and maybe the size could be 180 by 180. And if you can't quite get it right, that's okay. Just let go while dragging, and then you can just change the width and height here to 180. There we go. I'm going to move this here just to align it. And we're going to add a fill of white for the placeholder here. On second thought, maybe we can actually make this image a little bit bigger, either 200 or 220. I think 220 is nice. And most of the images might actually not be squared. They may be more rectangular format. So we'd want to actually extend this card to maybe 366 by 220. This is a good ratio that most pictures can form, which is around 4423. In fact, maybe we can hold command and take the height 240. Over here, we'll just remove this so that the proportions are not constrained together, so we can easily change this to 240. There we go. So first, let's draw a frame for our image. And why don't we use our grid to help us with that? So let's turn on our grid here. We'll do a couple of things. First of all, this input would be nice to match with the grid, as well. So we can take it to this. Over here. And for the spacing in between, let's do 24. And for this field, let's rearrange the size so that they're taking up the grids here, the columns here. So it matches our layout grid a little bit nicer. And now for our destination cards, let's do a destination card. Actually, this field is a little bit too long. Let's make it a little bit shorter. Just three columns is more than enough to type in a city and now we'll also draw a frame, and we'll do a square shape here. 318 by 318, but we'll actually drag the height to maybe 210. There we go. We'll add a white fill, and that will be for our destination card images. Going to height the grid. Now for the corner radius, let's set a corner radius of 16. That's nice. And we want to add a text right below it and write city country. This is just placeholder information. We're going to place it over here. And now, I'm not going to use Autoayout because I'm going to show you something cool in case you end up not using Autoaout. So this will come in handy. So for now, what I'm going to do is I'm going to create the card without the auto layout in place. So we'll place everything in here first. So we have the name of the city. Here I'll have on the other side, we'll have a 4.7 rating. We actually want this to be here. We can add the star icon by going to Phosphor icons. Search for star, add this. Now we'll fix the colors and the alignment in just a second. This star is not inside of our frame here, I believe. We want to select the frame and make sure it's inside. That's that and right below it, we want to have a pricing. Let's just put $1,000 here. And then maybe actually we can drag a copy of this icon here by using Alt and drag one over here. And right next to it, add a text, and let's write seven days. This is the length of the trip. And what else do we have? We have a popularity icon. So actually, maybe we can move this to the site for the popularity icon, maybe we can create a tag later for it. So we'll leave it out for just a second, and the bookmark will go on top of the image. So for that one, we'll do an ellipse. So I pressed O, and I'm going to draw a 32 by 32 over here, and I'm going to use Alt to make sure that the spacing is ten pixels from the top and right. Use phosphor icons to add a bookmark. Icon here, place it inside here, which it's currently not inside, so I'm going to double click to select this frame, paste it in, and then use Shift to make this 16 by 16, just center it here. Again, we'll apply the colors and everything later. Now for now, if you want to create an auto layout out of this, if you select all this content and hit Shift A, you'll have a mess, and that's not what we want. What we can actually do is if you end up in a situation like this where you haven't used Autoyout, you can actually right click and do more layout options and do suggest auto layout. And as you can see, Figma has come up with nested auto layout frames inside of each other, and it's showing you that these are all new autolayout frames. The only place where it didn't do so well was this rating star icon. So it actually changed the proportions, but we don't want it to be like this. So we'll double click to make sure that our star icon is actually square indeed. So make sure it's 20 by 20. In fact, we'll just ungroup it from its frame and make sure that it's aligned to the left and center. Same thing for this one. So there's some touch up work that you need to do. But basically, Figmas gone ahead and added a smart Adeod art itself. Very cool. For this 4.7, we can do Hug contents. Same thing for this. Here, and this one seems to be okay, so we can just leave that one. So our auto layout is starting to look good for our component card here. We haven't really formatted this properly, so let's come back to the next secture to start giving this some nice touches. 40. Polishing our Card UI: Going to do a few things to make this card look nice before starting to actually duplicate it and fill up this page with it. So starting from the very top, our bookmark button actually here should be a white fill because, again, an image will go here, so we want a white background for the bookmark button. And then we'll change the color here for this one to primary 500. Now, this ellipse here, I know right now it's blending in, so we can add a stroke that's just maybe primary 50 or primary 100. That works. Down here for our city and country, we can do body large to create a bit of visual hierarchy because this is probably the most important details along with the price. Right now, the spacing between these two is a little bit too much, so we can reduce it to eight pixels. And the spacing between the information and the card is not really consistent. So let's do 16 pixels. Now over here, we have some alignment issues. So this one here, it seems that it's at the bottom of this frame, whereas it should be actually at the top. So we just want to change this so that it's aligned to the top instead. The spacing between this is six pixels. You can go with eight to be consistent. Same thing with this one here. We just want to make sure this is actually on hug contents as well. I'm going to select these two pieces of text and do text 300. For the star icon, let's do a secondary 500 color. Now the price could be text 400, this calendar icon could also be secondary 500. Actually, I don't like the text here, so maybe we can make it slightly darker, and this one could be text 500. Sera you look a little bit better. I actually think it's better if we just have one of these icons as a secondary color. It's a little bit too much orange here. So actually, if you want to quickly change the color here, we can just do on Link. Use the eyedropper, and then if you go over any color, let's say we want this text color here. By clicking, we already take that color from there. It might be a little bit too much. Why don't we reduce the hue to somewhere around here? That looks a little bit nicer. And a nice shadow might be nice for this image here. So let's create an effect of a drop shadow. Now this is way too strong. So what we're going to do is we're going to increase this blur radius a little bit until it's maybe try 20, we don't want it to be that strong, so we'll do 8%. I think that's pretty good. And it can be a little bit lower. So we can actually do a drop shadow that's eight for the Y. So this is already looking pretty nice. All we need to do is fill this in with some sample data, and it'll be much nicer. Now for this one here, we also want a space same as this here. So we'll do eight pixels or a gap rather. But the problem is because this frame here is not the same height as this one, it's creating some miss gap here or misalignment here. So we have two options. One is that we can actually auto layout everything and do it horizontally instead, or you can just simply do a fixed height of 27 for this, as well. So if you change this to 27, it works as well. There we go. Let's come back to the next ecture to replace this sample text with some real text. 41. Using Figma AI to Generate Sample Data: First of all, let's go ahead and select this card and hit Altman K, turn it into a component, and rename it through our Layers panel here to Destination card. And as you probably guessed it, we're going to move it outside here, move it into our ever growing component section here. And then copy one down here. I'm going to do lay out these two together, and then for the parent one here, we're going to do a spacing of 40 pixels. There we go. So it has more spacing from the top. Now, for this one, let's go ahead and use some sample data. So why don't we open splash to give us a picture of the city. Let's start with New York. Just drop one of them in here. So with the frame here selected, I clicked on the picture and it placed it directly into the frame. Beautiful. And then we'll do New York City. USA like this. We'll do the rating for now and we'll leave the seven days, and maybe change the price to something like $5,000. So this is looking good. And now, if you want to add another one, FIGMA will keep placing them below here, so that's where we need another nested auto layout. So by selecting these two destination cards, hit Shift A, and then instead of horizontal layout, which you could do, we're going to do rap. What rap will do is that it will actually push any additional cards to the next row. Now, just to show you, we're going to do fill container for the width here. Now, if we do horizontal, what will happen if we keep duplicating our cards? It will keep going this way. And that's not what we want. We want it to actually spill over into the next line or the next row in our design. And so that's where we have this wrap auto layout feature. So now if we keep duplicating, it goes to the next row, which is what we want. Now I'm going to undo that and just have two for now. Now for this New York one, I'm going to change it to another city. Let's do Istanbul and replace this one here, or just go with another one here, this one, we'll do Item Turkey and change the price to t's say 3,000. And instead of seven days, let's do five days. And instead of 4.7, let's do 4.5. We'll leave the spacing as 24 pixels between them for now. And we can actually use Figma AI to generate more content for us. We want to generate a bunch more, but we don't want to actually write all of them ourselves. We can just drag this duplicate with new content, and it might mess up the auto layout just a second. And we're going to drag it until we have a few. And as you can see, it generates a bunch of different cities and countries, a bunch of different prices, dates, ratings, and so on by itself. I just want to go ahead and make sure that this fills container and spills over to the next one. Now the only thing it can't generate right now is images. So all we need to do is find these cities in on splash and replace the images. We can do London. Double click this image, select one, Tokyo, select an image, select this one. Going to do Paris, select one. Sidney and to the last one here. Beautiful. And now we have some content that we generated using Fig MyI in just minutes. This is wonderful. Now looking at this, the spacing is a little bit overwhelming, so maybe instead of 24 pixels, we can do 32. Awesome. This is starting to look really good. Now, this vertical spacing could be a little bit more as well. So let's do 32 pixels here. Awesome. This is starting to look really nice. Now, we have a few more things to add here. We still haven't added the popular icon and the button here, so let's come back to the next secture to add those two parts in as well. 42. Locked Aspect Ratio: So one issue we have right now with the cards and the way we have it set up, right now, these have a fixed width of 318 pixels. In this case. Let's say for some reason, we want to go with more of a square shape and we want to change these 250 pixel. What ends up happening is that the image loses its aspect ratio and looks a little bit different. So just to demonstrate, I'm going to go over here. We have the same card over here. As you can see, as I resize, the image gets resized as well. And that's typically not what we want in a layout like this, in a card like this. And so FICMa has a feature called locked aspect ratio, which allows us to lock the aspect ratio of this energy so that doesn't happen. Now the way to do that, you can simply go to your component card, select the frame that holds the image and then choose this icon over here, lock aspect ratio. Now, if we return to the instance, we do the same thing, you see the image is not losing its aspect ratio, so the image is not changing as it was before. And so I definitely recommend this for especially components that are going to be resizing your project to lock the aspect ratio of the image, making sure that the width and height will always remain intact. 43. Designing Tags: I was looking at this, I realized we actually don't need a button, like we originally did in our wireframes because the cards themselves can act like buttons. So we have these images, and we don't necessarily need the user to have a button here, similar to what Figma did here with their version. And this is why it's great to use these AIA features. The only thing I'm not a huge fan of is the spacing still here. It looks a little bit too crammed. So why don't we try to give our designs a little bit more breathing room and try 48 pixel spacing between the cards? Yes, we don't have that fourth card here, but I think it's really important for our designs to have this space. For consistency, it would be nice if we also spaced out our inputs here to match this as well. Awesome. We also want to add a tag to show the popular items or the popular destinations. And we can do that through a nice tag here with an icon. So let's open phosphor icons and search for a fire icon. Click on one. This one's nice. We can add it in our frame here, and maybe we can add a title here, popular. Auto layout these two together. This one's still not inside here, so we want to make sure it's inside. And then we're going to autolayo these two. The text is too big, so let's go with footer bold size, or actually, we don't need it to be bold, even just a footer is good. And to improve the visuals, we can bring it on the side on the top right side or top left side here. Now, you see that doesn't look that great with the colors and on top of these images. So it'd be nice if this auto layout also had a white fill and we're going to make the radius super high so that it's completely circle. A bit of spacing, maybe two pixels or four pixels from the sides and the top would be nice. And actually, that spacing is a little bit too little, especially horizontally. So maybe we want to do eight horizontally. And this icon here, we're going to resize it down to 16 by 16. Let's change the icon to a nice orange. And in fact, we can actually do a nice orange gradient. Why don't we do a gradient here. And for the first color, we'll do nice orange here. And the second color here, we'll do a nice sort of darker orange. This looks good. Now down here, this is looking much better. And of course, not all of them should have the popular icon. We only need it on s. First thing for the text here, let's go ahead and make it text 500 or text 400 actually is better. Let's create a Boolean property and call it Is popular. By default, we'll leave it to false, create property. And then we'll select this tag here and tie the visibility to its popular. Now we'll go here and maybe we'll do for one of them. Maybe this London one is popular. The Tokyo one is popular. And so now it's more random. This is starting to look really nice, and we only have a few more elements to add. Our card is pretty much complete for our destination discovery page. We're missing a filter on sort button, and then the collections over here. I'll leave the collections for you to do as an exercise now that we've done your card design. So our collections are basically their groups of different destinations, so they can be things like romantic getaways or fun trips or month long trips, any categories that you can think of. And if you need help, definitely tap into Chat GPT there for ideas for different collections. So that will be an exercise for you to do on your own. I will do a version of it in my own file, and of course, you'll have the link in case you want to take a look at how I've done it. Now's come back to the next exture to work on the filter and sort buttons. 44. Filter Sort Buttons: Now we want to add a filter and sort button and then an additional text to show how many results the user is looking at. So going to go ahead and add a text here in between the inputs and the results, and we're going to write the number of results. Let's just as an example, write 42 results. Change this to body and change the text color to text 300. And now in the same line, we're going to add some filter and sort buttons. Now I'm going to go ahead and drag a copy of this button down here and auto layout these two using Shift A, do horizontal layout. Now, this parent container is a bit off. So we'll go ahead and actually just use this content, so it fits three cards with the spacing that we have. So this way, what we can do is we can actually go ahead and use fill here and use an auto spacing. And for this button, let's do fill containers. So it's taking up the entire space here. This search, we want to actually change it to maybe a secondary type of button and change it to sort it by relevance. Of course, they can click to change it. And we'll do another one and do an auto layout between these two with a spacing of 16 pixels and hug content. For the spacing, let's bump it up to 24, and this one will be filters. It'd be nice to have some icons next to these buttons. So we're going to do a similar thing with our button where we also add icons to it. But first thing, let's find two icons, 14 Sort, 14 filter using phosphor icons. We'll search for SRT. This one's nice. We'll do filter. This one's nice. Both of those are here, hit Command K on both, relabel them icon filter. And this one's going to be icon slash Sorry, this one's actually filter, and this one's going to be whoops. This one is going to be swords. Looks like they're not actually inside of our section here. We want to bring them in and actually do 20 pixels by 20 pixels for the size, change it to primary 500 for the color. And now let's go ahead and bring one of them in here. Now for this one, we want to change it to white color instead, since it's on a blue button and paste it here, and for this one, we're going to do reset all changes, so it goes back to the same color as here. And let's add a property Boolean, show left icon, and turn it to false. Now, selecting both of them like this, we're going to go ahead and tie the visibility to show left icon. And one more thing, actually, before doing that, we're going to also do a new property called instance swap, we're going to call it icon. And for the instance, we're going to pick icon and sort one, create property, and tie these properties appliance and swap to icon and tie the visibility to Showleft icon. So now we can go down here. Select both of them, show left icon on them. Now one of them will be sorts. The other one will be filter. There we go. Awesome. So we have these buttons now. They allow the user to filter the results. And actually, a body large might look a little bit better here for the results, and it's starting to look a lot better. Let's auto lay out these two and actually increase the spacing between them a little bit more, maybe 40 pixels. I think that's nicer. So what would happen if they click sorted or filters, we can open drop downs here to show them the different options, the fact that they can sort by popularity, price or the filter options, how they can choose budget, duration, et cetera, so on. Or we can open a motor container that's a motor box on top. And because for our filter and sort, it's more basic, I think a dropdown will be just fine. So when don't we come back in the next lecture to design those drop downs to see what it would look like if someone clicks on these filter or sort it by button. 45. Dropdown Design: Design our dropdowns for a few places, actually. We can use this drop down not only for the sorted by the filters. We can even use it for the dropdown here if they click on their profile picture and speaking of profile picture, so we'll design a generic dropdown that we can tweak and make changes to or create multiple variants of for different places. In terms of the options here, we wrote down for the sorting options to be popularity by price and by ratings. So we can have those ones as the options and the drop down, and then we have budget for filter, duration, experience type, and weather go back to our designs. What we want to do is create a drop down and we can create one in the canvas here and then start moving it down there, just to see what it would look like. The first thing I want to do is hit T to start a text and write, and we'll do the sort of bif. So we'll do relevance. And then I'll hit Shift A to make a layout. Change the fill to white and change this text color or text 500. Now, in an auto layout, you can always create a fixed width if you want. So what that means is that you can actually drag the width here or the height and make a specified width. So for something like drop down where we know a specific width that we want our drop down to be, I just bring this down here just to show you in relation. That's still a little bit small. It could be a little bit bigger. Or we can even make it the size of this button here, which is 245. And then what we want to do is we want to apply a textile body here. So when you have a fixed width here for the auto layout, if the content gets longer, it doesn't change the width, as you see. The width always stays the same. But you could change your hug contents for the text to fill container. And so this way, if there's any extra text, it will spill horizontally outwards like this. I'll go to the next line as opposed to go outside of the box or the container. Rather. So we'll put relevance here, and then we want a little check mark to indicate that relevance is currently selected for the sorted by. I'll open phosphor icons, grab a check and here and it gets pasted in there, beautiful. It's a little too big. So we'll use a scale tool, which I just hit K on the keyboard. Sometimes the scale tool is better to use for re scaling in case because a stroke or other things could get too thin if you use a simple move tool. So let's write 16 by 16. I think that's pretty good. And we can apply even the primary 500 color. And just to show that this one's the one selected, we can change this one to body bold, in fact. This is now the sort. We can apply a similar styling from this button to here. And if you want to actually copy a style of this button and paste it over here, all you need to do select your button, Alt Command C or Alt Control C, and over here, Alt Control or Alt Command V. But the only thing that will happen is that all the properties will get pasted. So now we're back to the HC contents as opposed to a fixed height or width. So we can just type in 245 here. Oops, 45, and that gets applied before. Now, the padding here or the left and right margins are 24. I think we can drop that to 16. And we'll make these two their own auto layout using Shift A. So now we have auto layout. And we'll hit Command D to duplicate it. But instead of a horizontal layout, we want a vertical one, so we have different options that the user can select. And obviously, we actually want to get rid of the checkmark. You can either get rid of it or you can just simply hide it. To hide, command Shift H or again, you can click the icon over here. So this way, you can toggle it back on if you want to show that the relevance is selected, or another option is selected, and this one is not bold anymore, and we'll change this one to distance. Or actually, we want popularity. And then we're going to duplicate this auto layout for price. And we'll specify low to high, and then we'll duplicate that one more and specify high to low so that the user gets an option to show from high to low or low to high for the price, and then maybe by ratings as well. So this looks good. One more thing we can do for our drop down here to make it look a little bit visually better is we can increase the gap between the different options, which is great, but we can also add a dividing line between them. Now, we already created a dividing line here, actually. So I'm going to hold Command to select it and just copy it from our login page right into our dropdown. Nice thing is, if you paste it in, all you need to do is change the width to fill container, and you can move it up and down. And all you need to do to quickly duplicate this between each item, just hit Command D to duplicate it and down arrow. D, Command D, down arrow, command D, down arrow. So now we have this line between different items to create a better visual sort of separation between them. Now, I'm holding command and shift to select them all together. I think this color is a little bit too strong. So perhaps we can actually unlink it from our textiles and create a lighter version of that. I think this is nice. Alternatively, you can also do Primary 50. Both of these are good options. I'll leave it at primary 50, actually. The thing is if you bring it in here, it's going to go inside the auto layout and mess everything up. If you want to see what it would look like on top of the sort, you can actually just do two things. Either you can actually use shift and right arrow or left arrow here to bring it into the frame manually without accidently dragging it inside of an auto layout frame or another option. If it's inside of here, any auto layout frame, you can actually click this button that says Ignore Autoayout and this specific element will actually ignore auto layout. You can move it around wherever you want, and it won't interact with the auto layout rules. We want to space this out a little bit, and we're just showing what this would look like when it's open. And while it's nice, the only thing that this could use is a separation between the background and the foreground. We should show that this drop down is open or in an open state. So what we could do here is we can create a stronger shadow to showcase that, so we can add an effect by default, the effect is drop shadow, which is what we want, and we want to apply a shadow that has slightly higher Y, so it's more vertically down as you can see here, and we can increase the blur to try 16 or even 24. Try 30 here. That's better. And for the opacity, I always like to set it a little bit lower. We don't want it to be that much visible. So that's a nice one. You can clearly see that it's separate from the background. So that's nice. It's open. And then if they go ahead and click on an option here or anywhere else on the screen, this drop down will close. So for elements like this, where you want to showcase to, let's say, a developer who's going to work on this, what I like to do is actually place this dropdown outside of my designs, give it a name, so we can do sort dropdown and you can always use the comment feature. So if you hit C on your keyboard, you can leave comments for other people. You can tag your developer and write that this is the drop down for sort option. That's one way to do it. Another way is to use DevMo to leave annotations. We will touch on that in future lectures, so I won't get into it right now. So with that, there's also the filter option or the filter drop down. I'll leave that one as an assignment for you to do. And again, you'll always have access to my file in case you want to see how I've done it. And once you're done with that, let's come back in the next lecture to get started on our next page, which will be the description page or the booking page, however you want to call it. This is the page that is actually right after this page. So once a user, let's say, clicks on London UK, they will be brought to this item description or again, the name is not really important. What matters is that it's a booking screen. It's a place where they can see more information about this page. This is the page that we actually did the wireframe of here as well. I have a wireframe here where I've highlighted the different elements in this page. So we'll take a closer look at that and then again, similar style, start our way from top, go to the bottom, and get designing. 46. Trip Details Page: On to our trip details page. I forget that's what I'll call it for now. And my design is over here. I'm going to get rid of this AI generated first draft. And let's take a look at our wireframes to see what we have in this design. So from the top, we have a navigation bar that we already designed. We want to have a back button so users can easily go back to the search page or the destination discovery page. We want the name of the destination. So similar to what we have in the card, the city and country, we're just calling it city and country, but they could have more interesting names. And maybe we'll explore that in a little bit using Figma AI as well. But before we dive deep into that, we have our start rating here. We have the popularity icon or the tag, as well as the bookmark or Save button. So you can bookmark this trip if you want to look at it later. Some images on this site, so we can include the image of the trip. So right now, we just have an image of the city. But you can imagine in some situations this trip by whoever it's been created could have multiple images of maybe people enjoying themselves on this trip and so on and so forth. Maybe it's user generated images. I'll leave that up to you if you want to experiment with something outside of what I've designed or I've sketched up here. The goal of this is not to get it exactly like how I'm doing it, but also include your own creativity. So feel free to take this in whatever direction you think is helpful. Then right below it, we want a call to action for them to select a room. So the next step in them choosing this trip is to select a room that they're going to be sleeping in. And right here, we have some icons of the amenities that's included in that destination or in that again, trip package. So what's included, and we can have these in icon format and such. Then we have our accommodation. So these are cards to see the different room types and the price per night. With the option to filter or see the dates that they've already applied from this page. So if they already applied some dates from and two, it could show up here. Otherwise, they could enter it in, as well as the number of travelers, which could affect the price that they pay. And if they do enter some dates, you can imagine we can actually change this price per night to the total price that this trip will cost them. So that would be an interesting one to explore. Right below them are options to book, so we can even place this total price into the book option here. And then we have some ratings. So we have different rating or testimonial cards or rating cards that we can design, as well as some similar destinations. So this could be similar to the destination cards that we already designed. It could be other options that they might be considering. This has a good amount of content inside of this details page. I figured it's nice to include whatever the user will need at that point. If you put yourself in the shoe of the user and you're going through a booking page, what are the things that you're wondering about and it would be nice to include and to make sure that you include here. So these are the ones that I thought would make sense here. And the goal is that once they click Book, they go to the booking page from where they can fill in the rest of their personal information, payment information, so add a card for payment. We can have some add on options here for the trip, like insurance, different stuff. Maybe like a car rental, et cetera, et cetera, and then a button to complete booking. And on the side we have a summary of what they're booking. So we'll go through this page, of course, later on. For now, let's focus on the page that we're designing. Similar to the destination discovery page, we're going to break this down step by step. First, we're going to focus on this top portion or the sort of a hero section of this specific details page. So we're going to include the basic information, some description here and a button to select room, along with these icons here and the images. So let's start with that and everything else below it. We'll come back to working on it in the following lectures. So if you're ready, let's jump in and get designing. This is an exciting page. 47. Trip Header Design: Alright, so let's put together this top part of our destination details page. First things first, let's duplicate this frame here using Alt. We can leave the Navbar here, but we can get rid of this content over here. Let's go ahead and start with a text. And this will be for our Back button. We'll write back. You can also write back to all destinations really up to you. It's nice to tell the user where exactly they'll go if they click here. We want this one to be 32 pixels from the top, I believe, and let's do 48 pixels from the left. So it's nice and even with our grid. I do want to include a little icon or Chevron here. So let's pop up in phosphor and search Chevron, there's a nice one here you can use. I'm going to select the two together and hit Shift A, but do a horizontal one. Beautiful. Now the problem is, instead of fixed width, we want a hug content. That's much better. I think the spacing is okay here because the icon itself already has some padding, so we don't really need to space them out. But if you use an icon that needs to be spaced out, you can always adjust the gap here between your Chevron. You make it like four pixels here, even. And then we want to select left a line, but in the middle. So vertically, it's not at the top, it's not at the bottom. It's right in the middle. And for the selection color, which again, in a case like this where we have both a Chevron and a text, means that we're changing the text or the color of both. We can set it to text 400 or even text 300. So it's a subtle button doesn't need to be very in the face or obvious, as long as it gets the job done here, which I think it does. There's our back button. We want name of destination, city country, rating, popularity and save, and also the image here. So let's start with the image because we can just simply copy one of these images. Let's work on the London UK one. So I'm double clicking until I have this frame with a picture in it, hitting Command C on my keyboard, coming back in here, selecting our frame and hitting Command V to paste it in. Just making sure that our alignment here is on point. Now one thing here is that I've pasted in the frame, which also has this popular tag in the bookmark icon, but we don't want these exactly here. I'm going to hit Command G to create a group for these two. So grouping things together will allow you to easily move them and also move this tag out of the way, as well. We'll have these on the side, which we'll need in just a second. This one looks good, except we can have it a little bit bigger. This is where our grid would be super helpful. So by labeling our grid, we can see exactly where would be a good place to expand our image too. And I think right here, taking over four columns is perfect. We actually five columns. I think it's a good division between five columns and seven for the rest of the information here. You could alternatively do four here as well, but I think the images are important and should be big enough to see here. For these little ones down here, we can for now just duplicate this one here and make a smaller one. And I'm holding shift to keep the constraint to the proportions. Otherwise, your frame will go all over the place. So make sure to hold shift if you want the same proportion between your width and height. And one thing is, as I'm shrinking this, you see the border radius or the corner radius is not changing, so it looks a little bit odd because it's too round here. So we'll adjust that in just a second. If we enable our grid one more time, I think you can make some adjustments here so that first of all, this is looking good and each one of these little images could be own grid. So now we can duplicate one, place them here. I'm going to autolayou them together, and then duplicate it a few more times till we have five here. Now, with an auto layout selected, if you want to make quick changes to all items at the same time, once you have the auto layout selected, if you hit Enter, you'll go ahead and select every little thing under it or inside of it. So now we can quickly make a change and make this eight pixels for the corner radius. Let's see how that looks. Okay, it's looking decent. Of course, we need some different images in there, and perhaps some border to some stroke would be nice to have for them. I'm going to select this one, create a stroke, and use secondary 200 looks good, and going to apply a stroke for these ones too, of secondary 200 Looking good. Now we need to add our labels here. So let's start with the labels for now. Name of destination. And we'll do an H two or maybe a little bit too big, so an H three could be good. Here, secondary 900 as the font color, enabling our grid again to just see where we can place this one. Now, for the spacing here between these two, let's do 40 pixels or we can even do 48. So we have our name of destination. We want city and country. So I'll go ahead and just copy the city and country from here and to here, you don't need to do everything twice. We'll do the reading. In fact, I'm going to just copy it with the icon into here. We have the popularity tag here and this bookmark icon. So they're all together right now, but of course, we should auto layout them together to keep them even. This one should be contents. And for some reason, this one is ignoring autolayout. So we want all of them not to ignore auto layout. But of course, the spacing between them is way too little. We're going to change that to maybe 32 pixels or even 48 pixels. 32 pixels or even 40 pixels. Space them out 16 pixels from here. Auto layout. Let's add another text layer here. This is a description text. We'll fold this in later. Now, if you want a text box that is fixed, you can always change your text box from a auto width to a fixed size. So if I make this fixed, what will happen is text will automatically spill into the next line up until here. And because it has a fixed height, it takes auto wrap from the width here. So that's what it would look like, or you can choose a wider or bigger width. And then we want to button from our local assets, let's try it button here to so right now it says select a room. We can change it to view avability instead. I think it sounds better. Now, this one is not included in our out layout, so we want to include it in this one as well. So this one actually we want to do hot contents, so it shrinks and grows with the container, and we want this one instead of a fixed with to also hot contents. So right now, this text layer is what's keeping the bound of the parent auto layout. But the spacing between everything is a little bit too tight, so we can change that if we change it to 40, then it's too much between these ones, so we can auto layout these separately and do 24, and the rest looks good. I'll change this one to actually 16 pixels for the gap. And we're going to fix the height for this one. And what we're going to do is we're going to bring it so that it's in line with this image here. I think that would look nicer. And for the text itself, we're going to do fill container so that it wraps over here. If the text is too long, we don't want to push everything down too much. So then what we'll do is we'll go click on the type settings here and truncate the text. So if the text is too long, it will get truncated like this. This looks better. And if it takes us too long, we can always have a view more or read more button right below it. I won't add that here, but you can always add it in. Awesome. We don't have the included items or icons here. We'll come back in the next secture to put those together, as well as some sample content for our page. 48. Using Figma AI Writing Tools: So FIGMa AI actually gives us a lot of writing tools, and we can actually make the content a lot better using just AI, and you don't need to go outside of FIGMa anymore. You can just do it right within here. So why don't we take a look at what it can do for us by heading on over to our action menu. And then if you go to iffing and writing, you see some options. You can ask Figma to rewrite something, shorten something, or translate to another language. Now, right now, I want to actually rewrite this name of destination for a better name. So why don't we ask it to come up with a trip name that's exciting and short for trip in let's say London UK. Let's see what it comes up with. You just hit Enter, and then Okay, that's another one. And if you don't like it, you can ask it to make changes. You can ask it to make it shorter or more casual. Let's ask for more casual. Okay, that's a little bit too long. Make changes shorter. I don't quite like this. I want to see rewrite it with a specific activity that is popular to do in London and keep it short. Let's see. Okay, that's interesting. Can make a shorter one. I'm going to say make it forwards. And see what it does. Okay, we can go with this. You can keep asking you to make changes, and you can, of course, step in and make your own changes as well. I think this one's nice and we can ask it for it and we can rewrite the description text replace this with a description of what a one week trip in London UK could look like for a traveler looking to book this trip. Let's see what it comes up with here. Awesome. I think this is pretty good for now, much better than the original text. And instead of a footer size, let's make it a body size. And I'm going to bring the height here to over here. So actually, our view availability button matches with the bottom of this here and I'm going to orderly add these two together and these ones together as well. Much better. Let's come back in the next lecture to put together the icons for what's included in terms of the amenities, and then continue on to our accommodation section. 49. Features List: So for this next part of the destination detail page, we want to add some icons here that shows the amenities that are included as part of the destination or this journey that they're going on. And just taking a look back here, we can add that right below our images here. By the way, I've also gone ahead and added some images from the plug in Unsplash. If you haven't done that for the different images down here, you can take a second to do that, too. Now, for the title of this section, we can just call it What's included and then have some icons and maybe with some text to explain what those mean. So I'll go ahead and add a new text layer here, what's included. And for the type, I want to do we're in a six is nice. I'm going to bring this right over here, space it 48 pixels from the top here. And now before I put this in an outer layout frame with the rest of the content here, I'm going to first of all, bold in this one here, so I hit Command B here. And then for icons, I'm going to use the plug in phosphor icons here to drag some icons. So some things we can write about is and I'm going to add just a bunch of icons. Feel free to follow along if you want. I'm going to add swimming icon, and right now it's getting past in my frame. I can't fully see it, but I'll get to it in just a second. We'll do a towel one here. I know. So the icons just right over here. I'm going to just drag it right below here so we can see it. We're gonna do a coffee one so we can see if there's coffee included in this trip or coffee machine. Maybe we'll do one for breakfast, or actually, we don't really have one, so maybe fork. Okay, this one works. If we can say breakfast is included or not. We'll do a bell. Just to show whether there's conciage, maybe 247 conciage or something like that. If we search help, we have this one here so we can just say we have 247 support or something like that included. Let's see. What else can we put here? Probably want to mention the WiFi. That's an important one. I think these are good to start with for now. So for these icons, it gets pasted as an SVG, which means that we can easily resize and reformat them and they won't lose their quality, so that's good. I'm going to just select all of them together like this and hit Autoaout or Shift A. It's much neater. And then I'm going to do the exact same thing with this What's included title. Icons can be a little bit bigger. So what we can do is we can click this Autoeuframe we just created, hit Enter to select all the child components of it. And I'm going to hit K to access our skill tool, and we have here the width and height that we can set for these icons. So I'm going to try 32 by 32. That's a little bit better. But we want to make sure that this is on hug contents instead. Same thing with this one. The icons are a little bit too dark right now. I'm going to hit Escape to get out of that scale tool. Add a little bit more spacing here, maybe 16 pixels. For this, what's included, maybe we can do a secondary 900. For the icons, I'm going to do a custom gray color sort of somewhere over here where it's not too bold or too strong. I like that one here. I think it will be nice if you add some titles right next to these icons so they know what it means. So I'll just write one and do pull and then do maybe a footer size or even this body size works. Now, I'm going to include it in this auto layout, and then I'm going to auto layout these two together, bring them closer, maybe eight pixels apart. I'm going to just repeat that for all the icons. So feel free to do that, too. Coffee machine, breakfast. Auto lay out these two, eight pixels, pen seage Whoops. I can't spell. There we go. Eight pixels. 247 support. Eight pixels, and then we'll write Wi Fi or we'll do high speed. Wi Fi, bring that in here. I'll lay out these two and eight pixels. Now, it's a little bit too long. I don't want it to be this long. I think we can make it smaller and maybe to align ourselves or to align it with this width here. So why don't we go ahead and actually draw the width here and then do a wrap now for this child one, we'll do a wrap, and we'll do fill container. But this one here, we don't want to actually do rap. We want this one to be vertical. There we go. That's what we're looking for. Now, the spacing between these ones can be a little bit less, maybe 24 pixels, 24 pixels. That might be good enough. You could even get away with doing it 16 pixels here. Now for the text, we can do a slightly darker gray color than the icons. Let me right over here. There we go. So now we have a once included section. This is one way to present it. You can also present it in two auto layout. So this is one way to do it. The other one would be to add an auto layout for each three and then do a horizontal one here. And a vertical one for each child one and have it like this. That's another way you can do it. This way, if you have more icons, it will get added on the side here, and we can just do hot contents here. This might be a little bit more organized to present it like this. And here we can add a bit more spacing. So I think this looks good. We can come back in the next secture to start working on our accommodation section, which is the more exciting part of this page. 50. Accommodation Fields: Section is our accommodation, where we'll show the different rooms that the user can book. Along with the image, the room type, the price per night, and it will take three fields here. The fields will be the dates, so from and two, and then the number of travelers. So we can go back here. I'll just borrow the title here that we have and use ls to duplicate it. And another thing I'll do is I'll use an auto layout between these two. There we go. And I'll change this one to accommodation, bring it over here. And actually, I'm going to cut it using Command X and paste it in. There we go. Now we want to have those fields so we can go to our assets, local assets. And actually, we can drag the input field that we have in here. For the icon, let's do the calendar one since it's a date field, and we can duplicate it and I'm going to hold Shift, select all these three, and autolayo and do horizontal. I'm going to change this one to from and just put some dates here, to change this one, and maybe we can make them a little bit smaller here. Gonna autolayo these two together as well, bring them closer, 16 pixels. And then we want one more field, and that's the number of travelers. Now, right now, we don't have a dropdown field, but the dropdown field is typically used to let users choose between multiple options. It's similar to an input field, but it has a little arrow on the side here where users can understand that this is a drop down field. We could, in fact, use the same input field as a dropdown field, too. You don't need to necessarily make a different component. And I I like to do that, we can just add a new Boolean property, call it is Dropdown. So by default, we'll turn it false. And now we simply need to go to Phosphor icon, search for Let's try arrow and see what comes up. This is the one we're looking for. Now, it's over here. It's a carrot. It's called the Carrot icon. We can just paste it in here. And change the color to maybe primary 300. I'm going to hit K and resize this to maybe 16 pixels. I think that's better. And then you guess that we're going to tie the visibility of this. Over here, two that is dropdown. So now if we go over here, we can actually create another field, call it travelers with two s. And we're going to change the field two is dropdown. And we can hide the left icon like this. And as a placeholder, we'll just put one adult. Now looking at it, the arrow is a little bit not visible. So maybe we can go back in here and using the Layers panel, just select that one, select the vector, and maybe make it primary 500. A little bit better. And I'm going to hit K. Actually put it back to 24 pixels, and actually change it to 20 pixels. Let's see if that looks better, its a little bit better for sure. Awesome. Now, what I want to do is I want this box here to fill the container, and we want to choose auto for the spacing between the items because I want to add some spacing here between accommodation and these fields. So we'll leave these fields here. And here, instead of a top align, we can either do a center align or a bottom align here, which I think looks a little bit better. So right here, we'll just have the room types. For the room types, we'll come back to the next secture to put together a nice card component for it. 51. Room Type Cards: Our room type cards are actually not that far off from our cards that we have here. We can actually reuse some parts of it, and all we need to do is change the name here to room type and the price per night here instead of total price that we have here. So we have two options. Now we can go to the instance here and we can create another variant of this or we can actually create a different component. I want to create a different component just to make it a little bit easier in case we need to make changes later. I've copied it, and right now it's an instance, so we want to detach it so that we can create a new component using Command Alt K, and we're going to call this one Room card. Awesome. So a few differences. We don't have a favorites or bookmark anymore for this one. We just want the room picture in here, and this one is going to say room type. And this price is going to be 100 bucks per night, let's say, just for a sample one. And we don't really need these ones. We can leave rating so you can see the ratings per room. But I think we can leave that one and just do these. I'm going to copy one, paste it over here, and then I'm going to hold Shift, select these two, and auto layout them together with 24 pixels with maybe 32 pixels of the spacing. We're going to duplicate this one do another auto layout, and this one's going to be a wrap with fill container so that if you have multiple different rooms, it wraps to the next line. Starting to look good. Now, I'm not a huge fan of the way that this actually looks here, so maybe we can do a vertical layout here. I think that's slightly better. And then the spacing between these ones can be 16 pixels. I think that looks slightly better. Now for these room types, I'm going to select one of these over here and use make image. A hotel room with one bed. Let's see what it does. Okay, these are pretty nice. I'm going to ask you to make changes and do one small bed. So we can have a smaller bed on this one. Okay, this one's better. Let's do Twin Room. Change the price to maybe $80 a night for this one. And then this one could be King Room, actually, this one, let's do queen room, and this one will be king room. This one will leave it at 100 bucks a night, and this one maybe to 120. I'm going to use the AI to make an image for this one. Hotel room with let's do two queen beds for this one. That's nice. And we'll do this one and make an image. Now, if you can't use the AI features or you don't want to use AI features, you can totally look up these images on Unsplash or somewhere else. I'm just doing it so we can take advantage of this feature and also have a nice image here. And we'll do luxury hotel room with kink bed, just so that we have a nicer looking one for $120 a night. It looks a little bit different. I like the orientation of the bet to be like this. I like this one. Cool. Now, one thing we can add to these cards is maybe, first of all, let's change the ratings here for each one. And we can add the number of ratings each room has. So this one has 123, and maybe this one's really good. So it's 4.9 and 125 people stayed here and rated it. There we go. The other thing we can add to this is the number of people this room fits. So if you go to the local instance, we can add another text here and just add it over here. And write sleeps one, let's say, and we want to do content. Let's see how that looks here. Okay, that looks much better. Sleeps one. Maybe this one sleeps two, and this one sleeps three or something like that. Almost forgot. For these cards, we actually want a book button as well. Now, for these buttons, I want a new button different from the one that we've designed here. Because I want it so that it's left align, and then on the right side, we can have some text to show the total price for this accommodation and how much that will be. So I'm going to go to the local card instance, and I'm going to actually make a new button here. Now, of course, we can create another variant of our buttons as well. That's another way to do it. So why don't we do that by just extending this here, dragging two button components out, and just stretching them out a little bit here. And let's create a new property for the button, and we're going to call this one variant and call the property wide by default, we'll set it to no. So these will be our wide buttons, so we'll select them and change this to yes, and these ones are already no. Now, if you add a text in here, let's say $0. Right now, everything is getting pushed to the middle of the button, which is not what we want. We want everything to get pushed out to the ends of the button. And so we have to change the gap here from ten to auto. And the gap on the sides are also a little bit too much, so maybe we can do 16 pixels. Let's do the exact same thing here. In fact, all you need to do here, let's copy the text here, change it change it to text 500. There we go. Change the gap to auto and the spacing to 60. Okay, that looks good. So now we have a wide button, but the types are messed up here. So we want to make sure that the type for this one is also still primary, and this one is also still secondary. There we go. So now we have a primary button that's not wide, a secondary button that's not wide, a primary one that is wide, and a secondary one that's white. So we want to use one of the white ones in our card here. So let's go ahead and drag or copy this one here, the primary one in here. I'm going to just drag this component section up a little bit more. You can see it button. And then I'm going to hold all its double click here on the side or the edge of that button to change it to fill. It's the same as going here and clicking fill. That's just a shortcut to do that. So we'll show the button here, and the text of this button will be book room or maybe this book this room. And then the total price on the right. Let's say we already have dates selected instead of $0, this could show the total price. So if they have two nights, let's say, it will be 160, something along those lines. And we'll just do different prices for these one is 200 and this will be 240. So now we have the buttons for each room to get booked. Alternatively, you can change your button type to a secondary. I think both really work well in here. So there we have it now we have a button for each room to get booked. That looks good. Awesome. So with that, we have our accommodations section ready, and then we have two more sections, some similar destinations, which is pretty quick. Then we have some ratings cards that we're going to design in the next lecture. 52. Rating Cards: Running out of room here vertically in our destination discovery page. So I'm going to expand it a little bit vertically. So we have enough space for our rating section and our similar destination section. So our rating section, we have in our wireframes ratings here, the total number of ratings and stars, and then we have some rating cards that the user can scroll through, and we can have a horizontal scroll here or also arrows to go left and right. And so to do that, we're going to head back over here, copy the text over here, use Alt to duplicate it. And I'm going to just bring it here into the parent container, but bring it down here using the down arrow, and it looks like I had a typo there, so I just fixed that. And this one's going to be ratings. And we want to have the stars and the number of ratings. So maybe we can just borrow that and bring it here. And we want to auto lay out these two together. Try 16 pixels. And because this one's for the entire destination, maybe we can make it a bit larger the icon two, 24 or even write 24 by 24. And just bump the number up a little bit. Let's say, 534. And then right below, we're going to have some rating cards, and in these rating cards, we want to have a picture of the person, some text to show their review and maybe their first name or something like that. So I'll just design one card here, add a text here. This is my review. Obviously, we're going to change this, and for now, I'm going to auto layout this by hitting Shift A. And we can simply apply a white fill here, change the corner radius to 16, and then also draw an oval by hitting O on my keyboard and draw a profile picture maybe 48 pixels by 48 and just cut that into here. There we go. Maybe these could have a fixed width here 440. Now, I'm going to turn on my layout grid here for the page and use that to come up with a good fixed width here. There we go. So we can have three cross like this, and it will look good. We're not done yet, so we're going to continue working on just the one, hide our grid here. And we want to do a left line and maybe 16 pixels from the top bottom. So this will be the review of the user, and then right below that, we'll hit Command D to make another text. A to lay out these two text layers and just do right below each other. Maybe with eight pixels and this will be the name of the user, let's say, Maria. But for this one, let's do a footer size. And we can add a nice stroke here too, going with primary 100. And of course, we can turn this into a component, hit lommand K, and just retitle it rating card, and let's bring that into our components library here or section. Copy one of those, paste them in here, group these together or auto layout them together. And I think for the spacing, we can change the gap here to 32 inside, duplicate these, auto lay out the three cards and do a wrap and fill container. And let's change the spacing between them to 24 pixels. That looks good. I'm going to just select This is my review and use our AI writing tool to say write a review from for users who took a trip to London and enjoyed it. Et's see what comes up. Okay, there we go. Now we have an issue here with the text where it's spilling to the outside of the container. It's let's go over here and see what's happening. So this box over here is hugging the content, but the content can become infinitely long and it will continue hugging it in the same direction. So instead of doing that, what we want is the fill container, and we can do that by changing this to fill container. So no matter what, but the text here is still set to hug content. So we want also the text to be filled container. So now the text will have a fixed width of the container's width, so it will continue spilling to the next. And because it's a component, we fix it in one place. We don't need to fix it here. It's already fixed anyways. And another thing is, we want the profile picture to be maybe at the top and maybe the name of the user could be there as well. I think that would make more sense. So why don't we switch these two and then use a top left align like this. I'm going to just change this to that. Let's see if that looks maybe a little bit better. But what I'm going to do is I'm going to bring this text out of here and I'm going to auto lay out it with image here so we can center align it. And then for the entire container, we'll do this. There we go. That looks a lot better. This way, we can even add a text on the other side. By doing auto layout with these two and doing horizontal and filling the container and changing the gap to auto. And do center line and change this to a text for the timestamp, so it could be four weeks ago. So we can even have a timestamp and we can drop the fill for this one to a text 300 and this one could be a text 500 and same as this one here, text 500. Much better. Now we can shorten them a little bit two here so they're all the same height. There we go. That's starting to look good. We can just change the name here Max, Adam, and then just give some pictures to them using a plugin that I really like called Avatar. And you can choose any of them. There's many. We'll just choose this one here. User profile Avatar. Oops. You can use anyone that let's do this Avatar generator here. You can just hit Place Photo continuously, and it will place a random person's photo there. Is good for. Now, some of these come with a limit. So I just hit the limit on that one. Feel free to switch between different plugins to see which one works best. There we go. This looks much better already. And on second thought, I don't think it's a great idea to do a horizontal scroll here because that's not really typical. So what we can do is do two things to improve this here. First of all, for these two, let's do a horizontal layout like this. And then why don't we add a secondary button in here? Strike a button in here. Whoops. We want to put it in. There we go right in here, and then maybe ought to lay out them and do less spacing here and change it to secondary because it's not an important button, really, it's a secondary button and then show view all ratings or something like that. The user can click view all ratings and go to another page to read all the other ratings. So that's it for the ratings cards. Let's come back in the next lecture to put together the last part of this page, the similar destination page. 53. Finishing Destination Details Page: The last section of our destination details page is a similar destination section. So we'll duplicate this text one more time in the parent container here. Similar destinations. You can also call it other popular destinations that works too. You don't need to necessarily name it the same way I'm naming it. And then simply, let's just grab a few of these cards here. Maybe these three here, use Command C and then paste them in here. Now, right now, they're laid out vertically because they're in this parent container. So we want to do an auto layout between them using Shift A and then do horizontal layout. There we go. So these are some other popular destinations, but for the spacing between them, you want to also do 32. That's looking really good. And I think this page is pretty much completed. Let's go do a review from top to bottom and just make sure everything looks good and there's nothing we want to change. Now, there's a few things here that I'm going to do as ways to polish this page. The first one here is, I think we can bolden the title here. Looks better. For this button here, it looks weird without any text similar to this popular one. So why don't we add a text for this one here. We'll do save or bookmark. Destination and obviously not that big. We're going to do body or even body footer work. And we're just going to cut that and bring that in here. And I lay out these two and maybe eight pixels is a good spacing between them. And we can move this destination, just bookmark destination. Change this to maybe a primary 900 or a primary 800. Okay, that looks a little bit better, so it's more clear what it is. And the spacing between everything and here is generally a little bit too much, maybe 32 pixels would do a good job. So this looks good. Availability. We'll take them directly here. There's a bit of an empty space here, though, and you can do two options. One is that you can just change this at the layout of what we've done here to be horizontal. So that actually works just as well. So maybe I'll do that instead, so there's not an awkward gap here. Accommodation looks good. We have our from two travelers, so they choose those the only thing we might be missing is just a button for them to refresh the results. If they change these, right now, there's no way to refresh the results. So we want to do that, bring the alignment here. So it's on the bottom, and then do find rooms. There we go. It's a little bit better. That looks good, ratings look good. The ratings for whatever reason, this text is a little bit too big, so we're going to do body instead. I think body large is just too much. That looks better. And with that, we can actually improve the spacing instead of 16 pixels. Let's do 24 pixels from the top and the bottom. Okay, actually, that looks good, and other popular destinations looks really good. The only other thing I might do is just increase the spacing between everything instead of 48 pixels. Maybe we can do something like 64. And I think there's more breathing room between everything and everything looks a lot more polished this way. Cool. I'm going to just make this page a little bit smaller. There's our destination Discovery page, or actually, this should be called Destination Detail. There we go. That's our detail page. Let's come back in the execture to work on our booking page. So that's the page that will follow when they actually click Book this room. It goes to this page where they'll enter their information and confirm their booking. 54. Booking Screen: Time to work on our booking screen here, and this page is pretty straightforward. So basically the user clicks on book on one of these rooms. It goes to the booking confirmation page where they'll go ahead and fill in some info, which usually you see on a booking platform, like their first name, last name. And maybe a lot of this info can even be prefilled if they're already logged in and they already added their info form before. But because we don't have those pages to collect that information, we'll assume that the user has to fill these in anyways, in case they want to use a different email or phone number and such for their personal info for this booking. And then we have some payment info and fields here to add. So a lot of it is field based. And then we want to add some cards here for some add ons, and these could be, things like add a car rental to your trip or add insurance or add different stuff, et cetera, et cetera. And then a button to complete the booking. And on the right panel side here, we want a card to show the image of the room they're booking, maybe along with the city or the trip or something like that. So maybe the name of the trip, along with the room they're booking. They're booking one room with the dates here, and the number of people who are staying, then the total price. Now, this could be a good place to also put our booking button. So it doesn't necessarily need to go all the way at the bottom here, and we could actually have both places have it, and maybe we can fix this. So when we're actually building the prototype, we can fix this element on the screen. Alright, so let's get going over here. We want to start top to bottom. Let's start by adding our NavbR back button and title here. So to make things easier, I'm going to just duplicate the destination detail page using Command D. Just move a little bit over here and rename our screen to booking page. And I'm going to get rid of the content completely for now. And instead of back to all destinations, we can do back to trip. And right below it, we can have a similar text here. I'm going to use Alt to drag this here or rather a copy of it here. Make sure the spacing is the same as everything else and change this to confirm your booking or your trip and just make sure everything's spaced out accordingly. There we go. Move this here 24 pixels from this. And then right below, we want to have some fields and also we want a title here for that section. So for the title, I'm thinking we can use first of all, let's bowl in this one here, and then we can use a smaller font here, maybe the age four, age five. I think the age five is good and we'll change this to personal information. Like now, we can just leave it as bold here. And then these ones, I want to autolayout using Shift A with 48 pixels with the spacing. And then from our assets, let's drag some input in here. Let's move it down there. And these ones I want to auto layout together with maybe 24 pixels. For this field, we don't really need an icon. We're just going to write first name, just an example first name here, and then we're going to do last name. Commonly these fields are usually right next to each other, so we can even do an auto layout that's horizontal layout here, maybe with a spacing of 16 pixels. It's looking good. Let's change this one to hot contents for the width. This looks good, and we need an email and phone number field. These ones, we want to put it here in the parent frame. Change this one to phone number plus one, one, two, three, one, two, three, four, or one, two, three, four, like this. Just some sample text. And then we can have email address or just emails fine at Domain, something like that. Perhaps we can even have these two next to each other, too. That's good. Then we want some payment info. So for that one, so I'm going to duplicate this section and change this to payment details, something like that. Change this one to credit card number, assuming that we only have credit card as an option here, and then we're going to do credit card, and we need the expiry date. So don't we do this one as expiry date, write something like this. We can make this one t contents or maybe a little bit bigger, go 20 pixels, duplicate it and auto layout it right next to it. And this one will be CVV, which is a code that's on the back or something. And I think we usually have also a name on the card. So maybe we want to do credit card. Older to for the number, we can just put some number here like this. You want your placeholder text to look similar to what they should input so they have some idea of what to expect. And sometimes you see postal code or zip code depending on where you are, so we can do zips Postal Code and just leave that here too. That might be necessary for some credit cards, and we'll just expand these, but they're not getting expanded, so we want to select them and do fill container. So we have payment info. And then for these ones, I think these are too big for some reason. Probably a person doesn't have that long of a name, so we can just make it a little bit smaller, like 480 in total and also make these 480 fill container for these. And I'm going to do the exact same thing for these. Same thing here. And I'm just using an Alt and double click to make those all fill container. So a good portion of this page is already ready to go, let's come back to work on our add ons and then we'll work on the side card over here. 55. Add-on Card Design: For this next section, we have an add on section with some cards of things that people can add to their trip. So I'm going to copy a title here for it and call it add on perfect for your trip, something like that. And then let's see if we can reuse any of the cards that we have. The collection card is really similar to what we want to add. But again, it's not quite what we want. So maybe we can make another card specific to add ons, but use a similar design to the collections card. I'm going to duplicate that using Alt, detach the instant, and then create a new component using Command Alt K and rename this one to add on card. So this one is going to be the name of the add on. We already have a picture. That's great. We want a button to add this add on, so maybe we'll copy this button here. This add to your trip, and then maybe the price of the item. So we'll leave it $0 for now. I think this is good. Let's bring it over here. So now, the only thing is, I don't really like how this button is too primary here. We don't want this to be a primary action or cause the confusion of which buttons to press, so I'm just changing that to secondary here. So we'll have three of them. Site by site. And these ones, we don't want these ones to be this big, so we'll just make these fixed width. These cards are a little bit too big. So why don't we actually make this image a little bit smaller? Holding shift and together, and maybe making the image like 270 or something like that. And then for the add on name, we'll just do a body both, do hug contents here. And same thing here. We'll just do hug contents. We don't want it to be too prominent or too big here. And then let's replace these with actual add ons. We'll just write car rental and for this one, we'll write fun activities. And feel free to write whatever you like. Full insurance or we'll do travel insurance. And then for the images, I'm going to use actually going to use Unsplash and not AI for this one. And let's just do car rental. I don't know what will come up. Let's see. Okay, we'll just use some we'll just use one of these. Sure, let's go with this one. Fun activities. Let's just do. What's a fun activity you do in London? The London eye, I'm not sure. I've never been, so we'll just go ahead and insert the London eye here from one of these pictures. And then, actually, that one looks a little bit depressing. We'll do this one. And then insurance, maybe let's just write insurance, see what comes up. I'm just going to choose a nice image here. You don't have to necessarily use this one. It's just a nice one I found for now. So we have these add ons now that looks good. You can add them to your trip. Very cool. And then with that one out of the way, we can come back in the next lecture to put this card on the side here. Before that, I'll put an actual complete booking here. Just add it button here and make it Max 480 and just do confirm booking, and this will be the total tost of the trip or something like that. Just put some random number here, 2240 like this. It'd be nice if we also have the currency in case you're paying in a different currency. So now we want that card on the side. Let's come back to the next section and do that together. 56. Confirmation Page: But not least on this page, we want to have a little info card on the side that shows maybe the room, maybe the city that you're booking in, all the little details that you'd want to know before you confirm your booking. When you're on any other page like Airbnb or Expedia or wherever you book your trips, you have a similar thing where you see all the info before you press that Okay button because you're making a large purchase, you want to make sure the user has that peace of mind that they've selected the right dates and they've selected the number of travelers that's correct, and the price is visible and not hidden and so on. So this is really important in building a great user experience. So I'm just going to build this card from the top to bottom. We want to use a card that's only really visible on, so I don't really need to necessarily make it a component. In fact, I'll just borrow one of these maybe the room card and just go off of that, but detach the instance and make a completely one off here. Sometimes you want one off. You don't necessarily need to make a component, like in this case. So that's the case here, we'll just make sure that it's the same spacing from the side. Then here, let's say the user has chosen the queen room. So I'm using Alt Command C to copy the properties of that rectangle here, which is right now this image. And then I'm going to hold this one using Command to select it and then do Command Alt V. And that just paste the properties, which in this case, is just the image here. So we quickly have that image over there. And then what would be nice would be a picture of also the city that they're booking. So maybe we can also borrow this picture here. I'm using also Out Command C. I'm going to use Command C to copy that frame in here. But what I'm thinking is a nice, cool, like, circle or something like this on top of that to just show that they're booking in London or something like that. So what I want to do is for this frame, I want to set the first of all, make it a lot smaller and also make it a rectangle or sorry, square. That's maybe let's do 64 by 64. You can use command and the arrows to also resize your things just by one pixel at a time. So you can make exact sizes like this. And then maybe we can make it fully circle by just setting the corner radius here to really high. And for this stroke, we want to put it on the outside instead and maybe make it three pixels and slightly darker, something like secondary 800 or something. And now I want to place this on top of this image, but I don't want it to be part of the auto layout. I just want this circle to have a specific place here without following this auto layout. There's two ways I can do that. I can either group these two together so I can hold these two and just group selection or even frame selection. And within this frame, because it's not an auto layout, I can place it however I want. Other way, which you can totally do as well without having to do that, is that you can choose this one to ignore the auto layout. So we can ignore auto layout here and then place this here. But the only other thing that will happen is, as you can see, you might need to then resize or reframe some stuff to make the spacing work or even change the spacing here and stuff. So I'm going to go with the first method just to make things a little bit easier. Someone to frame these selection together or even group them really up to you. Places here, maybe make it a little bit bigger. Sure, 78 by 78 looks good. So there's a picture of the trip here or the city that they're Booking in and then let's write a title that includes the city over here. So I'm going to just borrow that city, something like this. Maybe move this down. Oops, move this down a little bit, have the city here. I'm going to also cut that, bring this into this frame here. I'm just going to use the shift in the arrows here to move this around. Move this to the sit a little bit here. Okay, this is an interesting design. Maybe move this a little bit to the side here and same thing here. So we have the city. Maybe the city looks better on this side, actually. And I'm going to do a lighter text, like text 300. We have the room type, so let's just write King room. Or it's not a king room. It's a double queen room. Write sleeps $200 a night, and then we'll do like times five nights or something like that. And then we don't really need the ratings in here because they should already know that from before. What else do we have that could be useful? The dates? Yes, for the dates, we can just borrow the text inside of these fields and the icon. And here, use an auto layout that's horizontal and do hug contents for both. This one here, the text is a little bit too long. So let's do HG contents. Make another text. Do auto layout and do horizontal and maybe just auto here and fill container. So they have a spacing like this, and then we from duplicate this and do the exact same thing horizontal, fill container, auto, and then write this one as two. This one should be contents. And the spacing between these two is a little bit too much, so I just auto lay out them together and maybe make it eight pixels. Now I want this two to actually be over here. So what I can do is I can make the width the same as the width here, which is 122, and then that way, I'll achieve the same result. There we go. And this sleeps two is a little bit random here, so we'll just put it down here and do it's already on hot contents. We can just remove this auto layout frame by just doing it on group. So we got a deluxe queen room $100 a night times five nights, sleeps two from this date to this date. And the spacing between these ones are a little bit too much, so let's do eight pixels. And we'll do fill container for both of them, and actually the same thing here, fill container. That works too. All right. And then these texts are too dark because they're supposed to be just placeholders, so we'll do text 500. This from and two actually doesn't need to be this dark, so let's do text 300. And let's actually give this whole thing a fill of white with some spacing, maybe 16 pixels from all sides. And then we'll do corner radius here. Maybe 30. Let's try 32 looks This might be too much, so maybe 24. This looks good. And now I'm just making sure that it's aligned nicely. So we get this custom card that looks good. I think it has pretty much everything this total price. We can just have it in this button here. Let's just borrow this button from here so we can just place it inside of here. What we want to do filled container and delete this. And the button is a little bit too close to everything else. So why don't we actually hit Enter? So we select everything inside this auto layout and hold Shift to deselect the button out of them, and then do Shift A. So there's one layout for all the content there. So this way, we can add a bit more spacing between the button and the rest of the content. I think we have everything here. That's starting to look really good. And it really gives the user a good idea of what's going on here. One more thing I recommend you to do is just put the sleeps to maybe on the same line as this $100 a night. So we'll do hug contents there and just paste this in and do a horizontal layout. And then maybe in the beginning of this text, we'll do an Alt eight. So it creates like a circle and add some spacing like this, just like this. We don't need that extra spacing, that's enough. And obviously, the price here doesn't make sense because, like, $100 a night times five nights should be like 500 USD. So let's just update that, so it makes sense in the designs, too. So this is like, 500 USD. This is also 500 USD. Now, if you have other service fees and things like that, you can always list it down below. So we can always break down the price here and show, like, this is the price for this, and then there's a service fee, and then there's a tax and all of that, and then it comes to that amount. But for this project, we'll just keep it simple and just keep it like this. This button here with this corner radius looks a little bit off. So we can totally round this button a little bit more or even just go with, like, a fully rounded button for this one. And I just made a custom change to that one. You can do that. It's not going to apply it to any other button. This is just for this specific button. So this looks good now. Now, we've done this page. We're finished with the booking page. This looks awesome. The only other thing is, let's say the user does confirm booking. Typically, you want to show some sort of confirmation page after this or like a confirmation of the trip being confirmed. So I'll leave that as a project for you to do on your own, as kind of homework to practice. So feel free to take some time to do that. I'll do it too. And then obviously, at the end of the course, you'll have access to the link for MFle so you can always compare and contrast and go from there. So with that pretty much wraps up all the pages that we're doing together here for our project. We have a complete user flow here from signing up, verifying your sign up, browsing destinations, choosing a destination and seeing all the little details and some rooms under those to be able to book, some rating cards and so on. And then we also have a confirmation page to confirm that trip. And obviously, there's a lot more to an application like this that you can add and design, like profile dropdown, so on, and we'll explore some of those together as we'll go through prototyping. But the next step for us is to see how we can turn this design into a mobile friendly version too that you can use on a mobile device. And to do that, we'll learn how to use things like breakpoints to have a different design for mobile, but also use the same designs that we've done so far and just tweak it for a mobile design. So let's come back to the next section of the course to talk about turning our designs into mobile. 57. Responsive Design with Variables: We're done with our web pages here and we want to turn them into mobile. There's multiple ways to do that. Of course, we can go individually for each page and then take a look at what content we have and try to format it in a way that's friendly on the mobile. So, for example, for the screen, we would hit F on our keyboard and start a phone frame here, let's say, the iPhone 16, and you can really do any size here for the phone size. And then you would have to copy each element inside of your frame and then one by one, rearrange them. So that's one way to do it, and we'll explore that, too. But I want to start with how you can actually use variables to make it easier to do responsive design. So even with variables, there are some elements that you'd need to change to mobile. So we have this Navbar at the top here, and most likely on the mobile, this will look a little bit different. Maybe instead of this user, you know, the full name here, we would just have the icon of the user or the profile picture of the user, and then followed by this bell icon. So it might look slightly different. So we will need to come up with different components based on the mobile or web in this lecture, I'm going to show you how you can use variables and variable modes to create different sizes for your pages. So right here, we have a page width here for the web project. It's 14 40 pixels here for me. It could be slightly different for you if you started in another frame size, but it's roughly around that size. And then we have a mobile one. So if I hit F on my keyboard and let's say do iPhone 16 Pmax, here we have this mobile size that's 440 pixels instead. And of course, there's different pixel sizes that you can set, but I'm going to go with these two for now. I'm going to go with 144440 for the mobile size. So if you open the variables panel here, we can actually create a new collection. So let's create a new collection or even this collection one that I have is not being used right now, so I can just rename it and call it devices. Whoops. If you have a typo there like me, you can just do rename, fix it, and then we're going to create a variable with number as the value or as the type, and we're going to change it to device size, and here we're going to have a web version that's 14 40 pixels, and then I'm going to create another one. And we're going to call this our page margin, or you can even just call it margin. And this will be the spacing on the sides. So right now I have it on 48 pixels, actually, so I'm going to have that at 48. And then right now, if you see over here, we have a number for the width here that's already a set number. But if you actually apply a variable here, so if you apply the variable for device size, now it's tied to that variable device size, and I can always change it from here. And then over here for our content, we want to actually go ahead and make sure everything's in an auto layout. So I'll group these two together in an auto layout frame and also these two together. So I'm going to auto layout these two together, and then also this one here. So we have one content area here, and then instead of having the margins at zero here or the padding at zero horizontally, I'm going to apply the page margin. And so now we have an additional padding here. But because of that, we can actually go ahead and expand this to take over the entire content. So we can do this or just set the width to also a pri variable and do device size. So now, those are tied to variables. But you see, nothing really happens if I minimize this and we don't really have any purpose to setting those variables right now. But if you go ahead and set up a different mode by clicking new variable mode and then calling this one mobile, we can actually change the numbers here. So for mobile, we're going to have a 440 device size and the page margin, we're going to set it to 24 instead. So now, if you click here, and then under appearance, if you click the solit button, apply variable mode, we can change the device. So if we do mobile, now the device got set to mobile. This area here got set to the mobile size 440, the padding changed. But of course, we still have an issue where things didn't get arranged as we wanted to or expected it to. Ideally, what we want is for things to properly get spaced out. SEC is not perfect. Some of the stuff doesn't fit, and we need to make some changes to make those work. So as an example, here we have the add ons for your trip, and instead of having a width that's fixed, right now, it's hot contents. So what we want to do, we want to wrap that one and set a maximum width. So no matter what, the maximum width will be the device size width, which is 440 here. And in fact, instead of 440, you can set up another variable in here to call it content size and already remove those margins. And so that will be the content size for these boxes here. So let's come back to the next secture to put that together for this page. 58. Max Width Property: Set up the variables and we apply the mode so that we can actually change our device size to web and mobile. And some of this stuff is already looking better. But what we need to do is set up a maximum width for our content area so that we don't get the content spilling outside. And so let's take a look at what's happening right now with our page. If we switch back to web right now we have a auto layout here that no matter what size it is, the content inside doesn't really change or adapt, and that's not what we want. So instead, if you set it to a wrap, when the content is getting shrunk, at least this over here is going down here instead of staying on the right, so on the mobile, we can present it. Now, you might not want to do it that way. You might want to actually show this on top of confirm your trip. And of course, if you want to show this on top instead, which doesn't make as much sense, but you can do that by going here and having the first on top. So now that fixes that issue. Our fields here are an issue because they're fixed right now to 480. So I'm going to lay out these two together, and then we're going to set a max width. But before we do that, we're going to set a new property here for our variables, and this one's going to be a number as well, and we're going to call this content. Width, which on web, it's going to be 14 40 -48 times two. So that's the maximum content area that we can have. So that will be 13 44. And on mobile, it's going to be 392. And so we're going to have it so that this over here, has a max width. And we're going to apply a variable to the max width of content width. So right now, what's happening is that by default, it's at 480 pixels, but the max width that this will have is in the web case 13 44. But if we switch this to mobile, you see, now it's only 392. But the only other issue is that inside of these auto layouts, we have to also make it so that the content inside has the correct width set. So let's go inside and see what's happening. This one is also set to 480, but now we want to fill container for this one and also for this one because now the parent auto layout frame is handling the wides here. So now let's see what will happen if we change it to mobile. Okay, some of the fields are looking much better. And this one here, because there are two together, we want to do fill container and then go inside and apply a fill container to both of them so that it looks like this on mobile. So now if we switch on web, this is how it looks. So now if we set this to mobile, the fields are looking good. If we set it to web, it looks good as well. Except we have a small little problem, and that's the fact that when we switch between the two, the field here, the width that we already have gets switched over to mobile. Typically, what we want to do is duplicate this page and then have a mobile version of it. So we'll just switch this one to mobile. And really quickly, we have a mobile version and we can just expand this out. There we go. And it just has a few other issues here. So this over here should also have a mix width of apply variable content width. And then here for this button, it should be on fill container. And this one over here should also have a max width of you guessed it content and width. And so this is starting to look really good. And as you can see, we were able to switch between mobile and web really quickly and that's how you can use variables to have a responsive design throughout your project. I'll leave it to you as an exercise to choose whether you want to continue using variables for your responsive mobile designs. And the next secture we'll do another way together of how to do it manually, which works as well without using variables, which is something I do often too. But before we do that, we need to fix this navigation bar at the top so that we have a mobile version. So let's come back to the next secture to learn how to create a variant for different devices. 59. Component Variants for Devices: Oftentimes you want to create components that you can use across both web and mobile. Sometimes you need to change your components so there's one for mobile and there's one for web. So for example, the snap board here should have a mobile version and a web version. That's slightly different. So we're going to go to the component here where we have it in this section here and we're going to create another variant for it that's going to be specific to mobile. And we're going to call this variant device, and I'm just going to expand so that we have space on the right here, add another variant, and we're going to call this one mobile. Whoops. There we go. And we're going to set the width to apply variable device size. And we're going to set the width 440, which is the mobile size and just bring it to the side over here. And obviously, this doesn't look great. So let's go to select the logo and change that one to be maybe an six for mobile. And then the horizontal padding, we're going to do page margin, and then we're going to apply variable mode of mobile so that this is always following the mobile one. And in fact, you can do the same thing with your width. You can just apply variable device size, and because we set the mode to mobile, it will always follow the mobile. And this way, if we ever make a change to our mobile size, so here we all of a sudden decide our mobile should be 500, everything gets applied automatically. So that's the benefit of using it that way. Or let's say you want to change the margin on mobile to 16 pixels, these changes happen automatically. So on mobile, we don't want the name. We just want to delete the name, and maybe the spacing between these two could be 24 pixels. This one could be slightly bigger, maybe just age five. That looks good. So this one's called web. This one doesn't have a name. It's just called default, so we want to change it to web. Gonna just resize this here. And then what we want to do is we want to also go to variables and create a device name here. So we're going to do a string variable called device, or you can do device name. This one's going to be web, spelled exactly the same way there, and this one's going to be mobile. Spelled exactly the same way as here. This way, you can tell your page which components to use. So if you go over here, we can go to the one that we have in mobile, and then instead of switching this manually to mobile every time, we can actually apply the variable called device name. So what's happening here? As you can see, if I switch this to web, so I got a little bug here, and I just want to make sure that if it happens to you, you know exactly what's going on. If you ever have an issue like this where one of your components is stuck in a certain mode, it's likely that you applied an appearance here to that specific component or variable mode, but you haven't removed it, because right now, if we're changing the variable mode for the entire page, everything should change. Something's not changing, then that means that you're applying a variable mode to a specific component. So you don't want to do that. You want to remove this so that this is automatically inheriting whatever appearance mode or whatever variable mode you have in the entire frame or page here. So now if we change this to mobile, it's using that navigation bar from mobile. If we do it to web, it's using the navigation bar from web. So that's how we can pass a variable to a variant and use different variants to create different components to use there. So you can imagine this could be useful and handy when you're working on different brands, if you want your app to work in multiple brands, you can change the name of the company really quick or different properties. So you have a lot of flexibility there, which is good. Now, while we're still talking about variables and using it for our responsive design, one more thing that we could change here is the font sizes on mobile. Just like how we did for the name of the company here, some of the font sizes on mobile are a little bit too large. For the majority of the page, it works and it looks okay, but specifically, this little header that we have here is too big on mobile. On the web, it looks okay. So let's come back to the exexture to do a mini variable lesson on fonts. 60. Font Variables: On mobile, we want to use different font sizes. And in fact, there's way more properties that you can apply to your fonts using variables. So let's quickly explore those. So we have our local styles here for our different heading text and body text. And inside of each one, if you go and edit the properties, of course, we can change the font family. We can change the weight and the font size, but we can also apply variables to them. So we can write this as a variable and apply it over here by clicking Apply variable. So again, you can quickly change your let's say, font family for your entire project instead of having to go through all these ones and changing them there. The other thing you can do is you can set your font size using a variable down here. And you can also do that for your font weight. Now the one I'm interested in for our specific case is the mobile size. We want it so that for this specific one that we have, let's say, the age three, we have one size for web, which is 39 pixels, and then maybe we want to set a smaller one when the age three is being used on a mobile. How do we do that? If we go back to our variables, we can create a new collection, and this one I'm going to call it fonts. We're going to create a variable, set it to number. And we'll write H three size. We'll have one mode as web and the other one as mobile. The one thing I forgot to mention is that modes can only be used if you have a Pcount with Figma. So if you don't, follow along with just applying one mode for your web. And if you are considering, of course, upgrading, I do recommend it so that you can apply different modes. So here for our web, let's apply the same 39 pixels size, and then maybe on mobile, we can do 30 pixels. We'll try that and see if it's too big. So now if we go to our H three, instead of having a fixed 39 pixel size, let's go down here and apply a variable H three size. Now, because we set this up as part of a different variable collection, it's not part of devices. We will need to set our page here where we will need to change or apply our variable mode for fonts to also use the mobile size. If you don't want to deal with that inconvenience, you can go up here and actually go under your devices and also set up your font sizes under here as a different collection. So I'm just going to do this as an example. You don't have to do it. I can create a number here, let's say, for my H two size, and then another one for my H one size. Whoops. And then I can just group these together. And call this group font sizes. It's still under the devices collection, so you wouldn't need to apply the variable mode for fonts as well. But currently, the way I have it set up is that it's in a different collection. So I'll also need to apply the variable mode for fonts of mobile. And, boom, our text here is now applying the H three size for mobile, which is amazing. I think we can even bump this up to 32 pixels. Let's try that. And that looks good. So that's how we can use variables to alter our fonts and the sizes depending on the screen you're on. So we learned how to use variables so far on creating responsive design. Let's come back in the ex sectre to try another way using constraints. 61. Using Constraints: How to use variables to create different device sizes, quickly switch our web page to a mobile page, and so on. And I think now it's a good time to learn how to also create responsive design using constraints. So constraints in Figma can be found on the right panel side over here. Sometimes it might not be visible, so you might need to click this little button that says constraints, and you'll see the constraints applied to your items in the frame. What constraints does is allows the elements inside of your frame to react and to respond to the sizing of the frame or the content or the parent frame instead. As an example, right now, by default, every element in your design is going to have a top and left constraint. What this means is that if you expand your frame, if you change the size, by default, everything will try to keep left and top constrained, so it's always attached to the left and top of your project. Going to duplicate this destination discovery page just to create a mobile version using only constraints. So now for the NAV bar up here, if I hold shift, I will also set a left and right horizontal constraint. So now it's constrained to the right also. What will happen is if we expand our frame, the Navbar is now expanding it with the frame size, and if I reduce it, it will also get smaller. Now, of course, we still have that issue where certain components will look bad, so we'll still technically need to change this to a mobile device version. That's still necessary. Now, of course, right now, the way this is set up using the mobile version is that it's set to a fixed width. But if we just temporarily remove this fixed width, we can actually just resize this to whatever width we want for our device. So now because it's taking up the entire page here, it will still do the same thing. It will still shrink and expand. In respective to its parent container, which is resizing, too. Now for this one, we can do the exact same thing for the content. If I dip right here, the size here could work for a tablet size. And then what we can do is we can also apply a top left and right constraint. But before I do that, I'm going to quickly show you what the other constraints are all about. So we can have a right constraint. So now what will happen is that if a page expands here, this content will always stick to the right. If I do center, then as you guessed it, the content will stay in the center, which could work as well, by the way. And this is more often used in web. You can also use skill. And when you set it to skill, if you expand your page, what will happen is that this content will also get stretched out horizontally to match depending on how much you're scaling it out. It's a little bit different because as you can see, the spacing between the left and right are different. So it's shrinking and expanding. It's not the same as setting it to left and right. And more often than not, we don't want to use scale. In a page like this, left and right makes the most sense. And right now things got a little bit messed up, in fact, I'm going to go Command Z all the way back until we have this one and then change it to left and right. So now, this is a better solution where things expand here, and then they also shrink to match different sizes like a mobile display. This is not perfect, and you'll need to still work with your auto layout to fix this for mobile. So you can do a bunch of stuff to fix this. So for this element here, for example, you might need to also wrap it so that if the page is shrinking, and for this frame, we want to set field container. So now, if the page is shrinking, the fields are also moving to new lines. Same thing here. For this one, we want to do a wrap and it's already on fill container, so this should work. There you go. So really quickly, we have a page that could work on mobile. It's not a bad start. In fact, that was pretty quick to set up, but you might still want a different design on your mobile so that it's not taking up so much space at the top with all the fields and the way everything's set up. So ideally, you still want to make some customizations to this. But using constraints, we quickly change the content size here so that it's dependent on the page size or the frame size. Now, we haven't touched the vertical constraints yet, but if we play with the vertical constraints, you also have similar options where things can be constrained to the bottom to the top and bottom, center and scale. If you do bottom, then if the bottom of the page expands, the content will move here to keep the same space between, you know, where this ends here and the bottom, which is 684 pixels here. So it will try to keep that 684 pixel. Again, by default, it's set to top. So it'll keep whatever spacing it has from the top of this frame, which is 136, which is what we have by default. And of course, we have the other options like center. So if the page expands, it will try to keep it centered according to where it was before. And you have the same scale option as well. So that's how you use constraints. Although when you start using max width and all the layout and variables, it makes it less necessary to use constraints. So it's not something that you probably use on a daily basis, but you do have that option. Really quickly, if you also want to quickly just change those, but use the visuals here, you can always set this to top from here. You can set this to bottom from here. Or if you hold shift, you can set it to both top and bottom. And similarly, if you hold shift, you can just turn one off or the other. You can set to center from here. And remember, you're controlling the horizontal constraints from here, and then these vertical lines is for you to control your vertical constraints. But by default, we want to set this one to top and this one to left and right so that we can quickly, if we change this to 440, we can quickly set up a mobile design. Yeah, now we have a mobile page, you might want to make changes here and the elements inside are not so spaced out. And then maybe you'd want to set the fields as full width here. And maybe these ones could be auto layout. And then from here, we can set this one to 16 pixels as well. And I want to bring the padding so that's 24 pixels from the sides and 24 pixels from the top. And then it just expanded so it's on too. You might have to make some tweaks here and there to make this better on mobile, but it should be relatively simple. So with a few simple changes, you can have a mobile design for your destination discovery page. 62. Organizing Our File: I took some time to complete my mobile versions. If you haven't, take your time to do that for the other pages you haven't done. And now in this lecture, I want to quickly organize everything and just make sure the project looks polished up. The one thing that stood out to me when I was going through it is that for our sign up with phone number and sign up with Google, for our sign up with Google, we can make it look a little bit better by just having the icon or the Google icon there. So right now we have this show left icon that we can use. And then for our icon, we only have the limited icons that we set up. We can obviously go back here and change or add another icon. If you just open your browser and search for a SVG. So let's see if I can I'm just opening Foster icons to see maybe they already have a Google logo here. And they do. You can either use this one here that they have or just search for Google Logo, SVG, in your browser, and then you'll see one that looks like this and just add that here in your project. Might have not gotten added in, so we're just going to bring it here. I'm just going to paste it in, and this is way too big. We want to do, let's see how big are these ones, 20 by 20. So we want to just hit K on our keyboard to quickly scale this to 20 by 20. And then I'm going to just bring it up here and also turn it into a component and call it icons Google Logo so that we can quickly in our button down here, change this to the Google logo. That looks much better and very similar to what we have in other apps. Now sign it with phone number. We can just make it so that the user fills in their phone number and then says, continue. Right now, it looks a little bit weird like it's missing the phone number field. So why don't we actually just copy a field here and paste it in here and then call this one? Phone number, and we'll just put a sample phone number plus one, two, one, two, one, two, three, one, two, three, four, dash here. And then we'll just to lay out these two and bring them a little bit closer, maybe eight pixels apart. So they look like they're related. That looks a little bit better. And we can always sign up with Google option first and then have the phone number option. So that's a bit of an improvement there. This page looks good. This page is looking good as well. We have the drop downs here, and then my mobile is looking a little bit scattered. What we can do is just like section off the mobile designs and then the web design separately, just to quickly organize the file. So we can just go here and do a section. I'm going to just draw a section around my mobile screens and call this the mobile section. And then I'm going to hit Enter to select all the frames inside and just organize them by this little icon. And then when you organize all your frames, you can quickly bring them together closer together, maybe with 100 pixels, spacing between them. And then if you double click on the edges of your section, it will auto resize to match the content inside. So now we have all the mobile pages there, and we can do the exact same thing section off the web pages here. You don't have to do this, but I figure it's like nicer. And then just have a web version of it, and then hit Enter to select all the frames and just organize them here. The filter and everything got a little bit messed up there, but we'll fix that and just do top line. And we'll bring this filter drop down in this other one just down here where it should be. And I'm going to hold all two space out this one a little bit more. There we go. That's our mobile screens, and then we have our components, which is already a section too. So it looks nice. We have a component section, we have a web and mobile section. Now, right now, we have this mockups here. You can always create new pages and move your web or mobile to those pages. I'd like to have for a simple app like this, everything on one page. All right, so this is looking very neat and organized, and now it's time to come back and actually turn this into a prototype. And so let's do that together in the next section. 63. Testing Our App with DesignPro: Organized our file, and it's starting to look great. Now, to take our designs to the next level, there are a few things we can do to double check and make sure that our designs are accessible friendly and that there's no UI issues that users will experience when they go through using our app. One plug in that I found is super helpful helping us with this is called Design Pro. If you search under Plug ins and Widget for Design Pro, you'll find this AI design reviewer plugin, and you can open it up. This plugin helps us improve the copy on our page, check accessibility, and audit our UI. Take a second here to sign it for an account. We're going to do it as well. Once you're signed in, you'll see the page that you have selected. So if I change it to another page, I see the page I'm looking at right now, and I can choose to do a review on that page. Page I'm interested in right now is our main page, which is the destination discovery page, because this is probably one of the most visited pages. But of course, you can run this plugin on any page and preferably on all the pages throughout your designs. From here, I can choose a review, design pro Improve our copy, audit the AI, so catch any UI issues and help us follow best practices. Make sure our design meets accessibility guidelines, which can be really important in design to make sure that your designs are accessible and it works with everyone. And for landing pages and places where you have call to actions, they can help you with conversion and boosting your conversion on those websites. You can always get one on one expert review if you want a more professional review on this. Let's go ahead and run the audit UI here to see what kind of UI issues this page could have. So let's hit Let's review. It's going to take a second to fetch the design, go through it, and have its AI check everything in this design. All right, so now the audit UI is ready to go. We can take a look at what the feedback was here. So first, it will give you some positive things that it found in our design. Only two fonts were used, great font pairings. This is awesome. And these are all great stuff as a designer to see. And then right below, you'll see anything that you need to fix. So right here, we can click Inspect to go exactly where this tip is coming from. And it's mentioning that the logo here and the user profile section should be on the same vertical baseline. So it matches the logo. Since there is a bit of a difference over here, this one is 48 pixels, whereas the font here is 38 pixels. So visually, it's not quite on the same line as you see centerwise. This is a great fix. We can actually go to our Navbar directly and make this change so that this text has 48 pixels and it's center to the middle. And so now if we go back, even though it's not very obvious, but these are subtle changes that are important in your designs. Yes, this was helpful and just dismiss it. So we know we're done with it. Then go to the next one. I'm saying the orange color here could be the same as this one here in terms of the brand. So that's secondary 800. So we can simply go to our card over here and apply the secondary 800. In fact, I want to do that for the other one as well. So not going back here, definitely looks more aligned now. Going to dismiss this. And so there's a ton more that it gave us here, and we can go through each one in depth and even gives you the source of where it's coming from. I do recommend you to go through those sources to really understand, especially as a designer who's just starting out, what is it that this feedback is really based on? I think overall, we've done a good job putting this design together because we got a lot of positives. Let's try our destination detail page and choose an accessibility audit and run that and see what kind of results we'll get here. And within just a few seconds, the feedback is ready. So it's giving us a rating based on the text color and this background. It gives us some suggestions on how we can fix it here as well, and we can apply them directly here. So this is a super helpful plug in, and I do encourage that you use it in your projects. 64. Exporting our Designs: So before we jump in and work on our prototypes, I want to quickly show you how you can export your designs out of FIGma. Let's say you have a friend or a colleague or co worker asking for some PNG versions of your designs. Obviously, you can share the Figma file with them, and we'll cover that in the future section. But if you want to quickly export your designs out of here onto your desktop or wherever, can select frames, and down here, you can see an export section and you can click to at Export Settings, and by default, it's one X, which is the original size. But of course, you can change that to two x if you want more resolution or higher resolution image, and then you can choose the type if you want JPEG, PNG, SVG or PDF. And then simply hit Export and it'll ask you where do you want to export it, and then you'll get a PNG. And then it will ask you where do you want your PNG, and then you will choose, get this nice PNG here that you can share with other people. Cool. Now, let's say you want to export the entire section here to just showcase what you've been working on. You can actually export this entire web section and you can preview what that would look like. It would actually export everything together as one image. So because it's gigantic, I'm just showing you a preview of it. This is what it would look like. But most likely you want to export individual frames inside and all the elements and stuff. If you have a section like so, you can just hit Enter to select all the frames inside and then export multiple things at a time. So you can export seven layers. And Figma will go ahead and individually export all of your frames as an image. And this can be useful for developers to go in here and let's say they want to use the same star icon here, they can just go in and select this vector and export this as an SVG, which will allow them to use it in their project really easily. So that's how we export it. I want to also show you if you want to showcase your project on your portfolio or make it look nice, how we can utilize some of the community files to put our project on an actual computer and make it look cool. 65. Portfolio Ready Designs: So this is nice. We can export these as individual frames, which looks cool. But I'm sure you want to put these designs into your nice portfolio, and you want to make it look cool. And so this is where we can use some magic and figma, as well as the community files. So if you head on over to your community files and search for and if you just go to the homepage here of the Community files, you can search for, let's say, laptop, mockup or something along those lines, or if you want the mobile version, you can search for a mobile mockup. And you can see multiple ones like this show up. So feel free to choose the one that you want. And there's a lot of free ones, and you can see which ones match the vibe of your portfolio. Just for an example, I'm going to choose one of them just to showcase this, I'm going to choose one of the free ones of here. Open it I found this nice one that I'm going to use, just to show you how this works. You'll click Open to open Infigma, and then it will ask you to paste your design in here. So you can actually go to this page that they have in this specific one and read how it works. And it uses a plugin called Mockups Plugin. So now, it might be different from the file that you found, but this is the one that I found, and I'm going to just copy my destination discovery page and bring it over here and just read the information. But I'll quickly show you how it works. So let's go to this scene. In this where it says placeholder, let's paste our design in. And obviously, this is how show up, so you can just make changes to it if it doesn't look good. So right off the bat, this red color is really annoying. So I'm going to just change this and I'm going to just bring this here a little bit. The rest of it looks good for now. And then what you want to do is you want to open your plug ins. You want to search for this mockup plug in and open it up. And what this mockup plugin does, it allows you to put your frame inside of a mockup. And it is currently paid plug in, so you could choose to use it for free by signing up for a free trial. So feel free to do that. I'm sure there's free versions of it, but if you're ready to put together your portfolio, it's definitely worth just signing up for the free trial. So now you want to search for this Mk up plugin in your plugins tab, and then once you open it up, you might see a page that asks you to go Pro, but you don't need to just click on Distort. That's what you want. So you want to select the layer that you want to paste into the other layer. So just over here, it says, select vector shape. So first, it asks you to select the layer where you want to paste your frame into, and it's this one here, the screen, and the layer that we want to paste is a placeholder. And then you want to do apply, and boom, it takes your design from there, distorts it in a way where it's nice on the laptop, and it looks cool. And you can just export this out to anywhere you want. So that's how you make cool presentable formats of your designs to share with other people or your portfolio, and so on. And now I think we're ready to come back and turn this into a live prototype that we can test on our web and mobile devices. 66. Defining a User Flow: Time to have some fun with putting together realistic prototypes. So over the next lectures, we're going to discover how we can use the prototyping tool to actually present our app to potential users or other stakeholders and team members in our team, investors, so on and so forth. Before we start with a prototype, we want to define our user flow. And, of course, you can do this by either just using pen and paper or just defining and writing exactly where you want users to go in the app. So typically in a prototype, we start with an initial page where we pick the initial page where the user flow starts, and we can have different user flows. We can have a user flow for a logged in user that starts in the Destination discovery page. We can have a user flow for a user who hasn't signed up yet, and so we'll start them at the signup page, which is what we're going to do. We're going to put together a prototype that starts the user at the signup page. Then we're going to go ahead and duplicate the screen, make it so that we can actually look like we're filling in the info, let's say the email and password, and then from there, the user signs up and goes to the verification page, which again duplicate this page, it looks like we have some verification code typed in, continue and then get to our destination discovery page. Now, from our destination discovery page, we have the option to take the user to this London UK page that we already have designed. And we will also dive a little bit into how we can actually use variables in our prototyping. So no matter which option the user clicks, at least for the first four here, because Infigma'sPaid plan currently can only have four modes, and we're going to use the modes as different products. So we'll make it so that on the same page or we'll actually duplicate this page. And on that page, without having to do each different city, we'll make it so that the variables can actually do the work for us. Just to explore that if you do want to have that option, how would you go about setting it up in your prototype? And then we'll go ahead and actually book the room. So once the user goes to the page where they can see the destination detail page, they can browse. And then from here, they will go ahead and book a room from where they'll go to the booking confirmation page. And then in here, we'll again, have another copy of this page with the information filled in and then confirm booking. Now, there's a page that comes after this, which is to confirm or to see your trip confirmed. And for that page, we'll have a little bit of fun with animations and see how we can actually animate a nice confirmed booking card with some confetti in the background using animations and gifts in prototype. So that's the user flow we're going to go with. You can do the exact same thing for mobile. I'll leave that as an exercise for you to do. It's the exact same process that we're going to follow. And before we do that, what we're going to do is we're going to come back in the next secture and discover how we can use Figma AI to actually make prototypes for us. 67. Make Prototype with AI: IgMa AI can actually help us put together prototypes as well, and it will go through your frames and try to make sense of how to make connections between them, and by no means is it perfect yet or anything close to it, but it does help for simpler projects. So if you do have a more complicated project, it might not even work, but you can always give it a go, and then if it doesn't work, you can always revert it or fix the connections as well. So to access it, all you need to do is go to your action panel over here or the action tab down here, and then you see this make prototype. And if you click it, it will ask you to select a few top level frames. So we want to select some of the frames by holding Shift. So we're going to choose all our frames over here, and then we can hit Command Enter or just make prototype. It will take a second, and it will start noodling all the connections here. And as you can see, it's done a pretty good job. It's already created a lot of the connections between different pages. So it knows that if you click Sign Up, it will go to this page for the verification. Same as sign up with phone number. And then from here, click Continue, it should go to Destination Discovery, and then clicking these two cards specifically we'll take you here to the destination detail page. And we see even for the Bbton, it actually knows how to send the user back or which one is the B button. And if you click on any of the buttons here, now this takes us to the booking page, although that's not correct. What we want to do is if they click View availability, we don't want that to take the user here. We want the user to actually just get scrolled down to this, accommodation section or probably in the prototype, we don't want anything to happen there. We don't want to find rooms to take them there either. That's just to help them find rooms here. So just clicking one of this should actually take them to this page. We see we have our back button here. And so we can actually preview this even by running it and seeing what that looks like. So if I just click on Sign Up, I go to verification, continue. I can choose this one here, goes here. Awesome. But again, we have these connections that are wrong, so we don't want those to go there. We want the book room to actually take us there. And while you're in preview mode, in the background, my frame is changing just to show me exactly which frame I'm on. And I can test the back buttons too, and it works. There's no animation or anything like that, so it's just like a basic prototype that it put together, but it does work. And from here, it doesn't know where to go because there's no other page after this. Here, you can actually keep these connections, or you can actually click the individual ones and remove those connections by just clicking minus here. So if you don't want these ones and these ones are wrong, we can either change them or just remove them here and then say keep it. And if you keep it, then all these connections that FIM AI made will be kept and you can use those for your prototypes. Now obviously, I'm not going to do that because we're going to go through how to manually connect those frames together as well. But do keep in mind that you can use FGM AI to put together your connections between the different pages, pretty fast and pretty easily. But of course, we're here to learn all about how to do that ourselves, as well. And that's why we're going to come back in the next lecture to start duplicating some of the frames and build a nice prototype together. 68. Pages with Filled State: So for these pages, like our sign up verification, we want to duplicate them and show a filled state. And this is always good practice just to show what would the prototype look like once the user actually fills in their information, and it looks more real. So I'm going to go ahead and duplicate some of the frames here that have texts on them, and I just use there and drag the copy. And you can just give your frame a different name like maybe a dash filled or something like that, just to differentiate between the two. And over here for our inputs, I just realized we only have a placeholder type. We don't have a type where the text is actually filled in. So we want to fix that by having another variant of it that allows us to have the text be the filled state. So let's quickly do that. So I'm just going to expand this components frame by holding command there, bring this up a little bit, our input field. And just create another variant down below. And we're going to call this property. We're going to click this one here. Just move it down a little bit. It's too close to there. And we're going to call this property one, fill and then we can have this one to false and this one to true. And the only difference is for this text here, we want to do text 500. So it looks like it's a filled text. And then we can simply go down here. Let's write a sample email like max.do@gmail.com or something like that, and then you can click the field and do filled state. And same thing with the password, change it to filled. So it looks like we input some information. And then to create a connection between these two, you can simply double click. Do prototype so when a user clicks on either of these fields, it goes to this page and it looks like they filled in the information. And you can do that by either just dragging connections between each individual one or you can hold Shift, so you can select both of them. So if the user clicks on either or, you can draw a connection using this little circle. So if you see the circle come up, that's how you can add connections. And so you want to just drag it to this frame here. So basically, by default, the trigger is on click. So whenever user clicks on these fields, either or it will navigate to the sign up field page. And manually change those actions, too. You can change it to a few different options that we have, which we'll explore, and then you can actually set the destination page as well. But because we dragged the connection manually to this page and drew those noodles there so they're called to the screen, we don't have to do that anymore. And the animation is instant, but you have a few different options. For this type of page, you can either do dissolve or just instant both work. For something like this, I'll typically leave it on Instant. Basically now, if you just run the prototype from the signup page or the preview of it, by clicking on any page, we can choose where our prototype starts. So I'm clicking the signup frame, and then if you hit this play button here, it will present it, or you can preview it as well, which we just did in the previous lecture, but presenting it opens up in a new tab like this. And there we have it. And now if I click on these fields, it looks like we filed them in. Amazing. And now because we duplicated this page, any connection that the page already had, like the sign up button will still work and take us to the next page, which, of course, those connections are from the make prototype that we had in the last lecture. So we'll go ahead and just leave those there, maybe get rid of this one here, and you can get rid of connections by just clicking them and then clicking Delete. So we'll leave anything that it already came up with for now, and then we'll go ahead and explore that together on how to do that yourself. For now, if you want, you can duplicate your verification page, you can duplicate your booking page, and I have a filled state, which is what I'll do as well. So as you go through the prototype, it looks like we're filling in information as well. So take a second to do that, and then in the next lecture, we'll come and continue the rest of our connections. 69. Dissolve Animations: So here, now we want to create the connection between the buttons and the verification page. So if you haven't done so already, make sure you create a connection between the sign up button and draw a connection to the verification page. Which I already have here, and it's going to be on click Navigate to verification page and do it instantly without an animation. And then from here, I also have another page. So clicking anywhere on this field here or any of these fields on the entire frame, we can actually draw connection to this field state. So it looks like they filled in the verification code, and then clicking on Continue, we'll take them to this page. Now in your prototype, you can also remove connections from this Continue button, so they have to click on these fields to first fill them out and then continue. But that's really up to you. You can totally do that or you can skip that. One nice thing about interactions is that if you want to quickly make changes to any interactions that go to the same page, you can actually click this button here, which will select any matching interactions, which right now is these two buttons. So all of a sudden, let's say, for this connection, I want to actually do a dissolve, just to see what it looks like. I can do that from here, and the animation will now dissolve. So it looks like this page kind of fades into this page, which is nice. And you can choose different animation curves, so you can choose ease in, and you can preview it here to see what that looks like or ease out, ease in and out. Now, it's a little bit hard to see what that looks like, so I'm going to increase the duration just to show you. So you see all of them have a slightly different animation curve. And you can always do a custom one if you want to get more detailed with it on how it appears. They also have some presets like this, which are mostly good for, like, move in animations, and we'll explore those in a second. But before that, let's just select a simple ease out option and 300 milliseconds, which is how long it will take for the animation to run. Just to preview that, I'm going to switch over to my mockups. So now if I click this and then if you continue, there's a nice little fade, which is different than, for example, going from this page to this page. Alright, make sure you have that connection for your Continue button to also go to our Destination Discovery page. And on this page, we actually can do a few different things. We can either choose whether in our prototype, we want to show the user putting a destination or from and to, or we can just have them click on London UK. And then from here, we can pick some dates that the user is going to book the trip for. So we'll duplicate this screen in just a second when we get to that connection. So it looks like the user picked some dates, and then from there, we'll see the price update. And then once it updates, we can then send them to a booking page that makes sense, which matches this five nights, sleeps two, and so on. But before doing that, let's go back to our destination discovery page. Here we also have a filters and sorted by button that we want to actually bring to life in our prototype, since we already have the frames for it, if you don't have the frames, take a second, design those. You want them to be individual frames and not just groups. And right now I have auto layout frame for both of them, which is fine as well. You can either have an auto layout or an actual frame. Let's come back to the next secture to explore how to set up those as overlays. So we don't have to actually design another screen that shows those filters being added to the frame. 70. Overlay Connections: Lecture, we're going to learn a new connection that we can actually make, and it's called an overlay connection. An overlay connection essentially allows you to open another frame inside of your frame that you're already in. So in prototype mode, you can open things like drop downs, models, and those types of frames inside of your current frame. And so this makes it easier so you don't have to duplicate frames and have one that has the model open or closed, and it's really simple to create this connection. Say, we want to do it for the filter button here. We simply click until we have the filter's button. So when the user clicks on the filter's button, we want to drag a connection to our filter dropdown here and let go. And then our trigger will be on click. So when the user clicks it, and there are a bunch of different triggers that you can change this to, but we won't need that for now. We want them so that when they click on the filter. Now we want the action instead of Navigate to, which is what we've been doing so far, which takes the user from one page to the other. We want to actually change this and select open overlay. And what open overlay will do is open this frame on top of that one. So you see the overlay is currently filter dropdown, which is what we selected. The position is by default centered, which means that it will be in the center of the page, which is not what we want. And we have a bunch of different options here, so top left, top center, et cetera, or we can manually choose where the filtered dropdown frame will open on our original frame. If you click on that, then you'll see here where the Overlay will be opened, and you can actually move it around. So you can move it right below your filter's button with maybe a bit of padding between them ten pixels. And now it will open exactly here on top of everything else. Now, we have a few different options. We can choose to add a background. And if you choose a background, then in the prototype, everything else that's not this filter. So everything else here we have a background, which is 25% transparent, which is 25% pact with a black fill, but we don't want that. We just want it so there's no background. And then we can choose if the user clicks anywhere else outside of that filter's frame, it will close the overlay. And yes, we want that because that makes sense, and most of the apps have a similar interaction. And then we can choose how it opens. So we can have a dissolve. We can have a move in. And if you choose a move in, then the filter will come from different sides. So we can have the filter frame come up from the bottom of the screen or from the right of the screen. It's not very common to see that, and we'll just explore that in a second to see what that will look like. So for now, I'll keep it as move in, but you'll see that's not really the default type of movement for this case. Move in is great for things like alerts or modal boxes and so on. And then I'm going to go ahead and just showcase what this looks like. So if you go back, now, if you click on these filters, it will open. It will actually move in from top to bottom, or bottom to top. And if you see what it looks like, it will disappear. But again, this is not a common interaction or not a common animation you'll see. You can either do instant or just dissolve. We'll just do instant to see what that looks like, and it looks much more natural. Right now, inside of the filter, you can't really interact with anything, not even the applied filters or clear all buttons, but you could totally change that so you can have it. So if you click on certain Tip trip duration or maybe something here, things will change. So we won't make it too complicated because for, you know, drop down like this, you don't really want it to be that complicated in the prototype. But we will do one thing. We will make it so that if they click on applied filters, we'll also close the overlay. So now if you click on this, the button to apply filters, if you try to drag a connection, you'll see you have two different connection types that show up here and we can quickly actually choose any of them. We can choose B here, which is good for navigation connections or we can choose closed overlay, which is what we want. So now what we said is that when they click on Applied filters, close this overlay. If I delete this one, I can also create it by just going on the right side over here and doing plus on click action and change that to close overlay. There you go. So now if I click nappliedFlters, it will also close the overlay, and if I click anywhere outside, it will also close the overlay. The gap is a little bit too much here. So if you want to quickly make those changes, just click on the interaction that you already created, and then you can just move it up a little bit, and you can use your arrow keys as well to move things slightly down or up. And I think this spacing makes more sense here. So you can also make it so that the overlays swap as well. So just to show you, for the sort one, I'm going to create another one by holding Alton duplicating it. And then I'm going to have this one be bold, so it's a selected one, and then I'm going to have the check mark in here as well and then remove it from here. And for this one, I'm going to unbold it. So it looks like we have the popularity chosen now. Then in our prototype, we want to create an interaction to this page and click instead of Navigate two, we're going to swap overlay. So the overlay is going to get swapped with this one here instead, and it will be instant. So now let's create another overlay connection between the sorted by, which is by default set to relevance, drag to this here, and then we'll do OnClick instead of Navigate two, open overlay. And instead of center it again, we want to manually choose where it shows. So just write below the sort it by with two pixels below, we'll leave it on instant, and then we'll do close when clicking outside. And now let's see what that will look like. They'll click on it. I will open by relevance. And then if I click by popularity, it will actually swap the overlay back to popularity. But I can't really go back to relevance anymore unless we go here and also create a connection between these two and say swap overlay again. So when I click Relevance, it will swap overlay back to relevance, then popularity. You see, you can actually choose which sorting it shows over here. And now you're thinking, Okay, this is cool, but this text here where it says sorted by relevance, it's not changing. So can we actually make it so that Figma understands when we do interactions like that and change the sorting to popularity? Can we show popularity here? Because that would be pretty cool. So that's where variables come in when we're working with our prototype. So why don't we come back to the next lecture to learn how to use variables and set variables so that we can make our prototype even more dynamic. 71. Variables in Prototypes: Lecture, we're going to create a variable that will represent the text inside of this button here, have it be relevance at first. And then if they click on this drop down and change it to, let's say, popularity, we want the text or the variable to change to popularity. So to do that, we're going to create a new variable here. So we're going to go into our design mode, click on local variables. And if you don't see local variables, make sure that you don't have anything selected. Just click anywhere outside until you see the general page settings and then open variables, and we're going to create a new collection I will just call this one general. So for anything like this, we can just keep these variables under a general collection. It doesn't really matter what you call it. We're going to create a variable and use the string one. And for this one, you don't need different modes. So even on the free version of Figma, you can set this up as well in your prototype. We're going to call this one sort by. You can name it however you want. And for the value, we want to change it to relevance, which is the original sort by setting. Now, the only challenges here because we only have one text in our buttons, we can't have part of a text be tied to a variable. Now here, we ideally want it so that the sorted by is a separate text from the relevance. So we need this relevance to be its own line of text and not together with the sorted by. So just to show you how this works, I'm going to do something which I generally don't recommend doing in your project, but just for this case, I'm going to go ahead and right click and detach the instance of this button. So now this button is not following the button instance anymore. You can see it has a blue border now as opposed to this filters button. And here in the Layers panel, it's just autolayouFrame now with no connection to the buttons component that we have anymore. So if you make any changes to the button component, it won't reflect on this button, but that also allows us to tweak this button to our liking. For a case like this, what I want to do is I'm going to cut the text out of there for relevance, and I'm going to duplicate it by hitting Command D. Now, the spacing for these two is a little bit too much, so I'm going to hold Shift A while I have both of them selected. And instead of ten pixels, maybe we can just do four pixels between them. And for the second text, now what I want to do is I want to apply a variable to this text so that this text takes the text or string value from the variable table that we have. And you can do that by going over here to apply variable next to text and then select sort by. And right now, for some reason, mindsets string variable or value, and that's because when I wrote relevance here, it didn't save. But just to show you how this works, if you replace it with relevance and hit Enter, there we go. Now it's changed to relevance. So now we have this text tied to that variable, which whatever we change it to, it will change here automatically. Now what we want to do is that when the user clicks on popularity, we want to also set the variable sort to popularity. And then here, vice versa, we want to set the sort by variable to relevance. So let's try that. Let's click on popularity. And we see we already have one interaction that on click swap the overlay with this drop down one that has the popularity selected, but you can also have an extra interaction if you click here and at a new action. So on this interaction on this on click, we can have it, so we also do other stuff. So in this case, what we want to do, we want to also set a variable. And in our set variable, we want to choose that text that we just created sort by, and we want to change it to popularity, which is just a string variable. So we're going to click String literal and have this change to popularity. So now the action is that we'll set the variable sort by popularity when they click on popularity, and we can see this here. And we can add more interaction. So on click more stuff happen. We don't need to do anything from here. That's all we need to do. And then we're going to do the exact same thing, but when they click on Relevance. So we're going to click the interaction here, choose plus here, set the variable, go find the variable sort by, or you can quickly search for it, sort by and hit Enter, and then write relevant. So hit Enter, and that's it. So now let's preview this. If we go here to our mockups, we can click sort it by, change it to popularity. So it's changed here now to popularity. You can click outside, navigate to another page, come back, and it's still sorted by popularity. Then we can go over here and then change it to relevance. However, one issue is that when we do close this and we open it again, we're automatically opening the one that has relevance selected. So it's not as dynamic as we want it to be so there is a way to make this work if you actually turn your sort drop down into a component. So I'll quickly explain it in the next lecture. 72. Variables in Components: Handed a little problem with our prototype where we open the sorted by choose popularity, and then we close it, it says popularity here, but we open it again, and it's on relevance. So why is this happening? That's because right now, we're opening the overlay with relevance selected. So how do we make this dynamic so that even this part works? Well, we can use components for that. So to do that, what I'm going to do is I'm going to turn this drop down into a component using Old Command K, and now it's a component. We're going to get rid of the one with popularity selected for now, and then we're going to create different variants of it with all the different items selected. Let's switch back to design mode. Property variant, and we'll call it selected. Now, this part is really important. You want to spell exactly as you write the variable. So in our variable, we also have relevance, just like how it's typed here with R. The spelling is really important. Now we're going to add another variant. Let's just drag this down here. And now we're going to call this one. You guessed it popularity. Again, just take your time, make sure your spelling is correct. This one, we're going to select popularity and bring the check mark over and unbolden this one. We're going to do another one. This one's going to be price low too high. And I'm going to just literally copy the text from here and set that as selected. We're going to bolden it, bring the check mark here, delete this one. And we're going to do two more, one, two. This one with price high to low as bold, ratings, and I'm going to unbold in this one, unbold this one, cuts the Checkmark, bring it here. Cut the checkmark, bring it here. So now we have one variant for each one selected. We just have to rename the other ones, so make sure to rename this one as high to low. Press Enter and this one as ratings exactly as it is typed here. Press Enter, and there we have it. Now, our connection is lost because you can't create an overlay connection directly to the components. You need an instance of it. So we'll copy an instance here for our sort by drop down. And what you want to do is now create a connection to this one instead. But before we do that, inside of your components, you can actually create connectivity as well. Prototypes can also be set inside of your components. So for example, here, we have popularity by clicking popularity, we see we have set variables sort by to popularity, but we also want to change too, and we want to select popularity. And what this will do is it will change between variants. So we're asking Figma to also change the overlay to popularity. And now we're going to have to do that for all the different ones. So I'll leave that as an assignment for you to do. And for now, I'll just do the popularity and relevance. So now we're going to do this one for relevance, and we're going to also set variable Sort by to relevance. And here for this one, so now we have the popularity working, and we have the relevance working. So now what we want to do is when the user clicks Sorted By, we want to open the overlay here. So for the sorted by now on click, we want to have it open this overlay, which is the instance of that component dropdown. We want it to be manual and then choose just right below it, and we'll leave everything else as is. Now, if you just close the prototype, open this page again so that we can reset everything. Because every time you run your prototype, you're resetting your variables. Now we can set popularity. It's changed, but we still have the problem. As you can see, if I change this to popularity, it will change to popularity. It stays as popularity, and then if I change it to relevance, it's changed to relevance, and it stays at relevance. And you can do that for your other ones as well. And guess what? If you change it to popularity, which is not the default one, go here, come back. It's still on popularity. Let's see what's happening here behind the scenes. What's happening is that you're opening this instance, and Figma remember the last time that the component was closed. So remember that last time you opened this component, you were on popularity. That's why it opens with that variant selected. Now, if you go to prototype mode, if you do go to the interaction, there's this state management here. You can actually reset component state. So every time you click to open that overlay, the component state gets reset. So if you do that, now, if you open it up, it's back to relevance. So technically, this here is not really tied to the variables, but we can do something else to actually make it much smarter and tie it to the variables by going to design mode and choosing which one is selected here. Choose a specific one or we can apply the variable with sort by. And so now whatever variable we have selected, this will change based on that. So just to show you really quickly here, if I change the value of this to popularity, all of a sudden here we have popularity selected. If I select price, low to high, with the exact same spelling, this one will be selected. So by default, it's relevance. Now, if you have a typo in there or you type something random, by default, it will just select the first one there, but we want to leave it to relevance, but you still want to make sure that you're not resetting the state because no matter what, that will always reset back to the first one here. So now this dropdown is completely smart and it's tied to our variables. 73. Hover Interaction: Far in our prototype, we've been using the on click interaction so that the trigger is always on click, which means the user clicks a button or clicks a certain thing and something happens. There's other triggers that we can actually use. One of them that I want to set up right now with you is the hover interaction. So while you're hovering on a button, typically in a website, you get some feedback so that you can see that you're hovering on something. Even when I'm figma here, hovering over a certain tab, you can see the tab is highlighted in different color. So you can see you're hovering over it and you're about to click and it's in a button. So you can do the same thing for your button here. I want to do is I want to go to the design panel, set up a new variant and call this property Hover. By default, I'm going to set it to false. And then I'm going to go ahead and drag this a little bit so that we have space. We're going to duplicate all the different buttons that we have, so we create a hover interaction for all of them. And we're going to change hover here to true. So now we have a new hover property with false and true. These ones are going to be false, so they're not being hovered, and these ones are going to be hovered. And typically, what we want to do is set a color that's slightly different, darker or lighter. So for this one, we're going to do a little bit of a darker one, maybe primary 800 or actually, that's slightly too dark, maybe primary 600. And then for our white buttons here, we want to do maybe a gray color. So just slightly darker. And for the stroke as well, we want to do a gray stroke, so I'm just going to change the stroke to be more gray. And so those will be the hover interactions. And now we just have to create the interaction by going to the prototype panel and creating connection between this button to this one here. Change to Hover and we want to choose a nice dissolve animation. And instead of enclck, we want to do wall hovering. While the user is hovering over the button, it will change to this one here, and when they're not hovering anymore, it will automatically switch back to this one here. On second thought, this might be a little bit too light of a difference, so I'm just going to make it maybe primary 700. There we go. And now we're going to do the exact same thing, but between the different buttons. And Figma will remember the last settings that you set on your interaction. So with the exception of changing this one to whale hovering, same thing between these ones, while hovering, and lastly, these ones while hovering. And now in the entire project, our buttons have hover interaction, and it's applied everywhere for all the buttons. Now, if you remember this one here, we detach the instance for this one. So that's why you don't have an interaction for that one. But if you go anywhere in your project where you're using your buttons, now there's a Hubbard interaction. It's time to slowly complete our connections. So we've been working a little bit on the Set Destination Discovery page, and then on our destination Details page, let's come back in the next ecture to start creating more interactions on our destination detail page and slowly complete our prototype. 74. Scroll To Interaction: Destination details page, we already have a connection created for B to A destinations. If you don't have one created by FIC MI, you can always add a new interaction, and on click you W to choose Action Back. What Action Back does is it will send the user in the prototype back to exactly wherever they came from. So if they came from this page and they click to and on the destination detail page, it will go back to this page, came from another page in the prototype, it will go exactly back to that page. So we already have that created. For this button here, view availability, we want to actually make it so that on click it scrolls the user down to the accommodation section because that's where the user actually takes the final action of choosing your room and then booking. So we can create an interaction here. We're going to choose on click Scroll two, and this sections already created. We can change the offset here in the scroll, which we'll take a look at in just a second, and then we can choose whether it's instant or animated. I think animated looks better. So now here, if I click View availability, it scrolls the user to accommodation, which looks cool. Now, at the top here, we could use a little bit more spacing so it's like summer here. And to do that, we can use this offset. If we set a negative offset, the user will be slightly scrolled up. So now if we do that again, we have the slight 20 pixel padding up here, which is much nicer now. That's how you can create scroll two interactions. Is 75. Creating Product Variables: I wanted to have us create different products using modes so that our destination detail page would be dynamic. But I figured a better one might be to actually create a dynamic booking screen or booking page that will change based on which actual room you selected. And to do that, we'll use two properties for our variables. We'll have one for the selected room. So we'll write which room we have selected or which type of room, rather, and then we'll have one property for the total price. And right here, you might notice I already pre filled some of this information, so I changed these fields to filled equals true. And then I wrote some sample dates here, so it matches the next screen where we have times five nights and sleeps two, and all that sort of is matching between the two. So feel free to take a second to do that. And then we're going to make it so that when they click on Book Room, depending on whichever one they clicked, when they go to this page, the price here is dynamic, so it will change based on which room you select and then change that from there. So right now we want to set up two different variables under our general collection, but it doesn't matter where you store these. We're going to make a string variable called selected Room. And so this one will change to which room you have selected. And by default, we'll just leave it to twin Room. So this is the default one. And then we want to have another variable, a number variable this time actually called total price. And by default, we'll set it 80 times 5400. So that's the total price for $80 a night times five nights. And so now on this page, we have this booking card here, which is not a component, but we want to actually make this a component by hitting Alt command K. I'm going to just bring that outside of here. So I've dragged the main component out of there and replaced it with an instance of the room card. And then we're going to create a variant for the different rooms. So we'll add a variant with property called selected room, and we'll have two different ones or three different ones. And we'll call these accordingly. So we'll have a twin room. M then we have a queen room, then we'll have a king room. And then these two images, I'm going to hold Command Alt C and select this image using command and then Command Alt V to paste that in there. Same thing here. And now we just need to change the pricing for each room 80, 101 20, so this one should be $80 a night. This one should be 100, which it is, and this one should be 120. So now we have a different one for each room, and we want to change this to twin room, which is exactly what we have here. We want to change the property for this one to queen room. And then this one to King room. There we go. Now we can actually choose which room is selected from here and we're going to actually apply the variable so that if this variable changes, so let's say it changes to queen room, this over here also changes. But I'm going to just command Z to go back to Twin Room. The only other thing we have to do is to change this to the total price variable we created, and for that one, we'll do it in the next lecture. 76. Dynamic Total Price: We want this total price to be tied to that local variable that we just created total price. We're using that button here. But we actually want to detach the instance so that we can create a custom button for ourselves. So I'm going to command D to duplicate this text. Just have the dollar sign in there, and then I'm going to command D one more time, and this time, I'm going to have just the USD in there. And from this one, I'm going to remove the dollar sign, remove the USD and the space. So we have these individual three text layers, and we're going to hit Shift A. Now the spacing between this 500 and USD could be more. So I'm going to auto lay out the dollar sign and the number, hit Shift Enter to select the parent one and change this one to maybe four pixels. There we go. Now, this 500 number, let's go ahead and change the text so that it applies the variable of total price. And then I'm going to copy this button and delete the old one that we have. There we go. So now that confirmed booking button is actually dynamic and it changes based on this variable total price. But what we need to do is that we need to do two things. One over here, let's update these to the actual prices. So 80 times five is 400, 100 times five, 500, 120 times five is 600. So these actually make sense. And then when the user clicks on each button, we're going to update that total price variable and choose the selected room. So we're going to go to prototype. We're going to change this. So on click Navigate to Booking page. That's good. But we're going to also add set variable, and we're going to set two variables. One of them is going to be the total price. Set this to 400. If it already isn't set to 400, set variable, selected room we're going to write twin room, and then we're going to create the same interaction here on click and then we're going to set those two variables, selected room to Queen room and also set variable, total 500. Lastly, for the king room, we're going to create that connection. Set variable, selected room to King room. Set total price to 600, there we have it. And so now this should actually change based on which room we have selected automatically, and the prices should change, too. And we can see that in action. If we go back here, click Play here or present. This one here, we have the twin room, 400 USD, this one here. There's an issue that we encountered where the room actually wasn't changing, and that's because of the fact that when we added these variable changes, we had already navigated to the booking page. So we weren't actually doing anything by changing the selected room. So FIGMA completes the interactions in dis order from top to bottom. So we need to bring the Navigate two all the way to the bottom and only do it once it finishes changing selected room and total price to the proper values. Same thing for this button here. We want to go here, change the navigate to to be all the way at the bottom, and for this one here, change the navigate to all the way to the bottom. So now if we go back, the twin room, we have the twin room here, 400 USD. For the queen room, we have the queen room here, 500 USD, from the king room, we have the King room here and 600 USD. And we've done that all without having to create multiple booking screens. It's just the one that changes dynamically based on which one you click. And now we have a total price that is also dynamic. We can even go ahead and copy this button so that this button also matches our other one. And if you want for this one here, we can just change the padding to be the same as the other ones. So now, when we go to any room, both buttons are showing the same price. So this is great. And something that would be really cool is on this page, what if we can also add the add ons to the trip and see the total price reflected with those addons added in? Let's come back to the next lecture to do that together. 77. Conditional Logic and Operations: Now these add ons, perfect for your trip, they don't have any prices on them, so we're going to just add some random prices to them. So for this car rental one, we'll do 300, and then for the fun activities, we'll do 150, and then full travel insurance, maybe 100. There you go. I'm just going to copy this section down here as well and just replace this other section that I have with the prices added in. This one's for the filled state. So now what we want to do is that when they click Add to your trip here, we want to make it so that it adds this price here to the trip as well. We also want to put a conditional logic there so that it doesn't happen multiple times. It just happens one time, and once it's added, we don't want the user to add it multiple times and just once, and that's it. Now, another additional thing that I'll let you do as an assignment after this is that once the user clicks add to your trip, you can create another variant here where this add to your trip becomes removed from your trip if they already have added it. And then you can do the exact same logic we're going to just do, but the reverse, so it removes that amount from the total price. So in our set variable, we can also set logic. So I'm going to double click to click this ADT trip button, and then under the prototypes, I'm going to add on click interaction. And for the action, we're going to set the variable, and we're going to find the total price. And we're going to again, find the total price. So right now we're setting the total price, so to itself. And then we have some operations here so we can do an addition. Plus 300, and I'm going to write 300 here. So this will say, whatever the total price on this page is, add 300 to it. And because this number and this number is tied to that variable, they will automatically change to our total price. If we go back here, now I click, we have a total of 500 USD. If I click at your trip, this became 800 USC in both places. But as you can see, I can keep doing that and the price keeps going up and up, but it shouldn't be like that. It should only happen once. And so to do that, I'm going to just close this to reset my variables. And what we're going to do is we're going to go over here what's called as a conditional. Now, this conditional logic will allow us to write if statements, which are simply ways to say, if a certain thing is true, only execute it, then otherwise, do something else. And so those will make sense in just a second. Now we have this conditional written out here, and our set total price is outside of it. So what we want to do is we want to write so that the condition is if. But right now, we don't really have anything to tie to the fact that the user has already added car rental to their trip or not. So to do that, what we want to do is we want to set up three new variables under our local variables. Window here, we're going to have them be booleans, so they can be true or false. And by default, we're going to leave them false. The other one is going to be fun activities, added. I'll just call travel insurance added and leave it to false. And now I want it so that when the user clicks on this ad to your trip, the appropriate variable turns to true. And then if it's already true, it doesn't let the user add another $300 to the trip because they already added it. So then we can go to this button here again, go to prototype, and then make it so that if I'm going to write the condition, car rental added. So we're looking at that bullying that we just created for car rental added equals to true so if the car rental added is true, which by default is false, then for under action, we're just not going to do anything. We're just going to leave it blank so nothing happens. But in other case, so in other words, if it's false, we're going to drag this set total price to total price plus 300 that we just created to the s statement. So what this means is that if the car rental added is true, don't do anything because it's already added, but if it's not true, so they don't have a car rental added, then in that case, go ahead and add it to the price. More thing over here is that we need to actually change this car rental added variable. Right now, we're not setting it to true. But over here, when we're setting the total price to total price plus 300, we should also add another set variable, and this one's going to be setting the car rental added to true. So we're going to set the total price, and then we're going to say car rental added is now true. Now if we run this one more time from destination Details page. So we can select the room, let's say, queen room. We have our queen room, 500 USD total. We'll add a car rental, and that's it. If I clip clicking, you see nothing is happening. We're not adding more to this price. It's already added. There you go. And now, so I'll leave that as an assignment if you want to create another variant of this to have it removed from your trip so you can switch between those two variants. And in that case, if you do end up doing that, you can do is that over here, when you have your car rental added equals to true, since your button is going to now say removed from your trip, you can actually go ahead and do the exact opposite operation here. You're going to do total price to total price -300 and then set car rental added back to falls. So you can keep switching between minus and plus. So I'll leave that as an assignment if you choose to do, but you don't need to. And, of course, you can apply the exact same thing to the other two buttons. And I'll leave that also for you if you want to do that. I'll do it in my project, and then if you want, you can always find the link to my project to review how I've done it. So now we have a really fully dynamic booking page. It's looking great. We're going to come back in the next lecture to design a booking page confirmed with some cool animations. So let's do that together in the next lecture. 78. Fixed Elements: Fault. Everything in our prototype is scrollable, which means everything scrolls as the user does. But there are certain elements that we want fixed on the screen. For example, this navigation bar here, and also when you go to this section here, we want this thing to be fixed to the side no where the user scrolls. Do that, it's very simple. All you need to do is select the elements in your prototype that you want fixed. And in fact, right now, if I have only one Navbar selected, I can make this change to only one Navbar, but Figma made it really easy using the select matching layers. So select all the matching layers in this section, which are all these navbars on the other pages too. So we can apply this to all pages, head on over to prototype panel and change position. Instead of the default scroll with parent, change it to fixed. So now what will happen is no matter where the user scrolls, this top Navbar will always follow them as well and stay in place. And we want to do the exact same thing with this card as well. So we can change this one to fig because of the fact that it's part of this parent container. So all we'll need to do is cut that out of there and paste it in the entire frame. And so this way, we can manually place it wherever we want. So we can choose where we want it, like, right here. 48 pixels from the right, and then now we can choose fixed. So it's always fixed. And it might look better if it's slightly higher. There we go. That looks a lot better. So no matter where the user goes, this part is always staking, so they can confirm booking from anywhere. So that's how you can fix your elements in prototype. Now, we're in the fun part where we're going to come back and learn how we can actually apply the confirmed booking button and then show a nice little animation. 79. Smart Animate: Have three different types of animations that we've seen. There's instant which we've been using, we explore Dissolve. We've been explored how to use move in. Now, there's this other one called Smart Animate, and what it does is pretty amazing. It looks at two frames and tries to make an animation automatically between them, and that's why it's called Smart Animate. And to give you an example of it, what we're going to do is we're going to design a confirmation page showing that the trip is being booked, and then finally a state that shows the trip is actually booked. So to do that, I'm going to first just expand this section out a little bit. And then I'm going to duplicate this booking filled page. So now I've duplicated this page, and what we're going to do is we're going to make it so that this side of the screen heights or goes away, and the other side moves to the center. So we're going to do design and then change the appearance to 0%. And same thing for the back to trip because we don't need that 0%. And then we want to move this to the middle of the screen. And then we're going to go to this filled page, and from the confirmed booking button, we'll deal with the other one later. We're going to do a smart animate, and we're going to try the gentle one and 800 milliseconds. So it's a little bit slow. Actually, even 1 second, which is 1,000 millisecond. I'm going to click this filled version, play it, go down here, hit Confirm Booking, and there you go. The other part faded and this moved to the center. And that all happened because of Smart animate, realizing what's different between these two frames and bringing them together using smart animation. Now, all we need to do is change the card over here, so it shows the different content, like the room actually being booked right now. And then once it's booked, maybe after the two second delay or something, we can navigate to another page that actually shows them being confirmed. So this one I'm going to name it. Booking page loading. So it's loading, and then we'll come back to the next pecture to design a card that shows the trip being booked. So we can use that as a loading state before finally showing a confirmed state. And just for keeping it clean, I'm going to move this back up here as a separate page. 80. Loading State: We have this loading page, but our card inside doesn't match the loading state. So why don't we go to our card or our room card and make three different variants for each one that shows the room being booked? And then we can have another one for when it's finally booked. So we will need six more. But before that, let's just start with the loading version. So why don't we create a new variant property, call it status, and we'll leave the default to default, and then we'll duplicate these ones, and we'll call the status for these ones to loading. So all three are set to loading. And then in the loading, we want to show that we're booking this room. So maybe we'll just rewrite this text to booking your twin room and just change this text to maybe text 200. We'll leave the dates, and then we won't need a button anymore because the action is already taking place, but it will be nice to have some sort of like loading animation in here. So we can actually use a cool tool called Lodi files to do that. So if you go to Lodi files, you can just search Lodi files, and it's under plugins and widget. This Lodi files will come up, and you might need to log in to use this, but it gives us a ton of animations that we can use in our space. If you go to Discover, we can search for loading, and we can see multiple different kinds of loading animations. If you want a specific one, maybe a plain one, that would be cool to show, a plane or something like that. And there's tons of free ones you can use, and there's a lot of premium ones as well. Feel free to browse and see exactly which one you like. This one's cool. I'll just use this plain animation and insert it as a Jif. And just medium size is okay. So it's getting inserted, and it's right here. But this is a little bit too big, so I'm going to make it smaller and then place it inside of this auto layout, but now it's a little bit too big, so make it a little bit smaller. And then we don't need the dates actually because we'll show that when the actual confirmation happens. And then here we'll write booking your Twin Room in London K. And for the N, we're going to change that to also text 200. And we don't need this London UK since we already have it down here now. And this text can be centered, and we can also do center top align so that this plane comes in the middle. For these two, let's just put it to the side. So we can duplicate this one for the other rooms. There we go. I'm just going to borrow the image and paste them and also change the title over here, queen room, king room, and so on, and get rid of these two and change the status of these ones to loading, this one to queen room. And this one to King room. And all we need to do now is go to this one here in the loading and change our status to loading. So now let's see what will happen. Go back, hit Confirm booking, and boom. We have our loading animation looks cool. And then after maybe 5 seconds or something, we can have this card changed to a confirmed version. So let's do that together in the next lecture. 81. Finishing Our Prototype: Lastly, we want to close the loop by having this page change to a confirmed status, and then we'll see that the trip is completed, and that will mark the end of our prototype. So let's just expand this out a little bit more and then duplicate this page so we can change this 12 working page completed. And then all we want to happen is we want after a certain period of time, for this page to automatically navigate to this page. And in Figma, we can do that by creating interaction from the frame itself. To this frame. And instead of onclick, we're going to choose after delay. What after Delay allows us to do is to wait a Syrian period of time. Instead of the user actually interacting with it, we're just waiting for some time to pass by before the loading changing to confirm. And we can do 3 seconds by 3,000 milliseconds, navigate to this page, and we can also keep the smart animate, so the smart animate changes between these two. Alternatively, what you could do is instead of having a different page, you can also have that in your components, so create it so that after a certain time, this component switches with another one. So both are right methods. There's no right or wrong. You can do either. Now, I want to make it so that the confirmed status is similar to this one, but it just shows that you've already booked the trip. So I've duplicated that one here, and instead of confirm, we're going to just remove the button. We don't need a button here anymore. And then we're going to add another text layer up here and write booking confirmed and maybe change this text to age six. I'm going to use the secondary 800. There we have it. Instead of this times five nights, we can just write the total charge. So we're going to duplicate that text, get rid of this here, just keep the dollar sign. Get rid of the dollar sign here, and then we're going to change this text to apply variable total price. And we're going to auto lay out these two with no space between them. Alternatively, you can also go in here and write something like paid. So it says $400 paid and then change the spacing here to four. So it looks better. Another alternative instead is charged on dot three, one, two, four. Let's say, that's the card for the user. And we don't need the sleeps too actually. Instead, we can just write twin Room for two or for two adults. With that charged on this from this state to this state. Now we're going to change this one status to complete. And all we're going to do is duplicate it two more times for the other rooms. Apply the right image between them, and then write this one as queen room, king room. And finally, just make sure that this is also queen room. And it's variant name and King room in the variant name. Down here, all we're changing is the status to complete it. And then let's add it button down here, go to our assets, button and insert it here. And we want it to actually just be in the frame. So let's just paste it in the frame, so it's not dependent on the auto layout. And I'll just bring it down here somewhere close to the card, right in the middle of the page and then go to my dashboard or something like that. Just make sure it's centered, and then add an interaction. So this one takes us back to the destination Discovery page where we can discover more trips. Now let me explain one more time what's happening. After 3 seconds, we're going to automatically go from this page to this one here, and all that's changing is that this card is becoming completed, and then there's a button here that takes us back to the destination discovery page. So if we see that one more time in action with auto layout and really nice, let's see how it looks. Confirm booking, comes over here, 3 seconds goes by, and boom, booking, confirm twin room for two adults. 500 charge on this card, from this date to this state. And you can see this price is actually updated based on what we had before. Go to my dashboard. Beautiful. Let's run this prototype from the top in the Lex 82. Testing Our Web Prototype: Built an awesome prototype together, and I think now it is time to go through it one more time and see how we can improve it and make sure everything's good. The first thing is, we want to create flows, so we automatically jump between different flows using the prototype panel. If you click any screen while in prototype mode, you can add a new flow starting point. Let's add one for our signup page and call this signup flow. A new user will go through this flow, and then a destination discovery page, so we'll call a new flow and call this one logged in. User flow. So now, if at any point, we run the prototype, we can go between those different flows. Now, these flows got created sort of by accident. So if you already have flows accidentally created, you can just click them and delete. So now you can switch between a sign up flow, go directly to that page or go directly to a logged in user. Default, when you're in prototype panel and you click the Canvas, you can choose the device that you run your prototype in. So you can do something like a MacBook error, and it will go ahead and present your project as it would appear on a MacBook error. Now, of course, it doesn't look that great because we didn't design it specifically for a MacBook error. We designed it for this screen, which is 14 40 in width. So if you select any screen that doesn't quite fit it, it might not look amazing. And generally, I just run the prototype in a custom size, and this custom size can be exactly what you already have your frame set to. So in my case, it's 14 40 by 1080. And as you can see, it's nice, it's fixed between all pages, no matter what the page size between your different frames is, it looks nice. So let's run the prototype, and you can reset a prototype. So if, let's say, start with a sign up flow and you accidentally end up somewhere, you can always press R to reset your flow and go back to the first screen in your flow. So now I'm back in the sign up screen. Let's run the prototype one time from here. I'm a new user. I just came in. I want to put in my email and password to sign up for Wanderis hit Sign Up here, and I need to enter my verification code that I just got sent to my email. Beautiful. I'll enter that in, hit Continue, and I'm in the app. Amazing. Nav far, we actually had a real person's picture here. So w don't we run the Avatars plug in one time and just get a user here. Beautiful. Not sure if that's Max or Tom Cruise, but it works. Let's go and paste that in. And so now we're locked in at Max Stove. We have a nice picture up here. We can go down here. We can open the Filters tab. Very cool. Apply filter. We can sort by and change that to popularity or back to relevance. And we can go to selecting London UK to read more about this trip. Looks amazing. Let's view the availability, get jump right down here. Read the reviews. Amazing. There's other destinations I can check out. And let's say I actually want to book a nice kangaroom for myself. These dates don't look right, so why don't we quickly fix that. We want to make sure it says the same dates on the other page, which was 060-12-0605. Now, we need to repeat that for here as well, and there and here. So, guess what? You can actually go to Design and click on multi edit variance, and it's detected the text in multiple places, and we can just make a really quick change to all of them. There we go. Now go back to our prototype. Looks much better. Other thing that would be nice, although not necessary, is to just match the number of people this room sleeps with this page. So make sure that it sleeps one, two, and three respectively. So this one should be sleeps one. This one should be sleeps. Now, we're still in the multi edit tool, so let's just exit out of there. So we just edit one by one. This one sleeps two, and this one sleeps three. So that matches now. I can always go back and select another room like a queen room, let's say, the price is changed. I can go ahead and fill my information. If I want to add some car rental to my trip. Nice. I've added it and some fun activities, and the price reflects that. And now I can hit Confirm booking. Unfortunately, this button doesn't work yet, so that we're missing that connection. Let's select these buttons here by holding shift so we can select all of them, go to prototype, and drag a connection from one of them, which drags the connection from all of them now to our booking page loading. Looks good. So now we can click Confirm booking from either place. Let's do it from here. And we're missing something here. So let's go back. So now we have the connection here. Instead of dissolve, we want to do smart animate and do gentle and 1,000 milliseconds, which is 1 second. So we're back here now. You know what? Maybe we don't need the fun activities, so we'll remove that, hit Confirm booking from here, and boom, it's loading your Queen room in London, UK and confirmed booking. Queen room for two adults, $800 chars. Beautiful. Let's go back to my dashboard. So that's our prototype on web as an exercise, feel free to do the one for mobile using the similar connections that we've built on web. And in the next lecture, we'll come back to learn how we can actually test your mobile prototypes on your own phones. 83. Using Figma App on Mobile: So in order to show you how you can run your Figma design on your mobile to see how your designs look or how your prototype looks, go ahead and download the Figma app from your Google Play Store or Apple App store. Now if you haven't signed in yet, go ahead and sign in to exactly the same account that you're using on Figma, and you can see your projects right here. I can see my Vanderweis project. I can open it up and browse it, and you go to the different pages, the mockups here. Now, what's nice is that if you go to this mirror feature down here, you can click Begin Mirroring and show you exactly the page that you're looking at on your app on your computer, and I can quickly change the one that I want to look at and go to the different ones and see what changes I want to make on mobile or how this runs on mobile. Of course, this is not a prototype yet. So when you turn this into a prototype, you can actually see how your app would look like on a mobile display. At any point, you can hold two fingers and then go ahead and exit that mode. And with that, that wraps up our prototyping section. Let's come back into the next section to learn how to work together in Figma and if you use full tips and tricks. 84. Collaborating in Figma: Of the benefits and most fun part of working in figma is collaborating with others in FIGma. As your team grows and you have more designers that you're working with, people can join in and actually do edits while you're doing your own edits or they can leave comments, feedback, and you can work together really easily. To collaborate with others in figma, all you need to do is share the project with them. By clicking Share, you can choose who you invite to your project. You can type their email here and invite them over to your project, or you can copy the link and share it with anyone in a chat or wherever you communicate. Now, by default, you might have this who has access, not to anyone. So make sure you click on it and change to anyone. By default, sometimes it is set to only invited people. And so this way, the public can access it, and only people you invite with their emails will be able to access it. Now, having it on anyone, you can choose what anyone can do. So by default, it's set to view. And typically, that's what you want to keep it at unless you want people in the public to edit your file. So if you're collaborating publicly with the world, sure, you can go ahead and change this to it. But generally, it's on view. And then for additional security, you can always provide a password for people to put when they're trying to access your file. Under the advanced settings, you can also choose whether viewers can copy, share and export this file, or is it just for viewing only and no exporting and no duplicating and sharing. There's also easy access to quickly copy the link for the prototype. So if you want to quickly share a link for the prototype, if you want to copy a link to the Dev mode. So if you're sharing this with your developers, this would be a good one to share with them. And of course, if you're building a community file, you can always share your file to the community as well. And this way, you can add people to your project. Anyone who's been added to your project, you can see from here. So this is another user that I have, and I can choose whether this person can view, can edit or become the owner of the file, or I can just remove them from the file completely. That's how you can manage who's viewing your projects. Right now, I'm in another user account, and I can see that when another user is in my file, I can see exactly what they're looking at, where their mouse cursor is, which is cool. I can always click here to follow them and see exactly what are they doing and what are they looking at? So right now, I'm not controlling the screen. This other user is who's taking a look at the different pages. If someone's presenting or if you're presenting, this would be a good option to share with people. Then you can always click Stop when you're done following them. Now the other user can go through your designs, leave comments. And once they leave a comment, you can see their comment from here. By default, this blue means that the comment is red. So if you click on it, it will turn gray like this. But you can always toggle it back to Marks red if you want to come back to it later. Of course, you can react, thumbs up, and write a text back. And you can even share images or mention people and animogis. And that's how you can collaborate and easily get feedback from your team members. Once I resolve this issue, I can simply resolve the comment, and it goes away, even though I can always access it again under the comments panel by going to show resolved comments here, and then I can hide it again. This comments panel will show all the feedback that's left on the project because right now I've resolved that comment. It's not showing, but if the other user or even myself, let's say, I want to make some notes on to do make this bigger, so you can leave notes for yourself like this around the file. And as you start adding comments, you'll see them pile up here and you can quickly resolve them from here or you can delete them as well. Another cool feature that you can actually toggle voice chat here in figma. Once you click on it, a little pop up will open, and you'll be able to actually chat with others in figma. Now, let's come back to the next lecture to learn a little bit more about libraries and teams. 85. Team Libraries: Far, we've been putting together components right over here in our component section, and it's just been in this local file. We haven't really published it or edited it anywhere. But as we start working on a component and across multiple different projects and files, Figma allows you to easily publish them and use them across multiple files and only make changes in one place. So instead of having different projects with multiple different files, having all different components that are the same components, you can just have them in one place. And typically, this would be in a separate project or separate sign file, and then you can go over here to your library, and you can see you have within this file Wanderwis library, and you can actually go ahead and publish it, so you can use it across different files. It will ask you to move this to a project if it's currently in your draft. Now, when you're ready to publish your library, it will show you all the different things that it's going to add to this library, so you have all the variables. So even the variables get added when we see all the colors, the device variables will be shared across different files. All the styles that we added for our different fonts, all the components over here, you can even add a description of what changed. And then once you hit Publish, it will take a second. And as you can see, it starts loading, and it takes some time until this library is fully published. And now over here in a completely new file, I can browse team libraries and actually browse libraries that I've published, and I can use them in this file, or if I'm already using another different library, I can swap the libraries here. If I add this to this file, now it's added, I can go and use the same components in this completely new file that has nothing to do with Vanderweis. Now, if I write a text here, I can actually go ahead and choose the same fonts that I brought over from my library. So these are all coming from my library with the exact same font, and then I can see them, but you can't see them under local styles or local variables anymore. Because they've now published to that library. Now, you don't need to do this in your project. I'm just going to show you what would happen if you make a quick change. Let's say all of a sudden we have another Google icon, and we call it something like Google Logo two or something like that. So now we have a new component in our library or if we have a new button or a new input field and so on. So in the assets under the library, there's one change that still needs publishing, and this one change is exactly that Google logo that we changed. So you can go ahead and then publish it, and you can see, Okay, this is the component that got added, the new Google logo. You can write a description of why that change happened. You can publish it. And here in your other file, you already have that Google Logo two. You can use it in your project. Now, if I was already using a button and something happened to the button, you can actually see it under the updates. I will tell you that this button has changed, and this is a new design. So that's how you can use libraries to manage the same components across multiple different projects with your team. 86. Dev Mode: What's this Dev mode over here? How do we use it and what does it do? As a shortcut, you can hit Shift D to Toggle Dev Mode, and this is currently available under a paid plan. DevMde essentially allows you to give a developer access to your file in a more developer friendly manner. So the property panel completely changes so that it's more friendly to someone who might be turning this design into code. As a developer, I can change my units to use pixels or RAM. I can change my language. So if I'm already using another language, I can go ahead and choose those ones from here. And there's a bunch of plugins that you can actually enable to show you even different kinds of codes. So if you're working with react, we can see react code as opposed to CSS. And so now as a developer, I can select anything here, let's say, this room card, and it shows me all the specific info that I care about the padding, the weight, the corner radiuses. I get the code directly here as a JSX. I can see the textiles, all the colors used, and with the hex code easily available. So I don't have to do any guesswork or click into each individual element just to figure out how to design it or how to code the front end for it. Now, if changes have been made over some time, I can do compare changes over here to see how this page has changed over time. What are some of the new things that happened? I can see the last change we made is there used to be the sign up with Google button, and then we moved it, we added a logo to it, and then we also added this frame with a phone number like this. So as a developer, it's really easy to go in and see what's changed in your FIGMa file. And so this way, you can share with your developers how to use this feature to quickly understand what's changed since the last time they were in here. They can always access the assets here, so they can quickly take a look at the assets like this button here, and you can always open it in playground to see how the different variants and properties will change the button. How does the hover look? What does it look like with this left icon? What if it's not wide and has an icon? You can get all the properties easily from there. You can even change the icon here, and all this, as it says, feel free to experiment because none of these changes are being made. All that's happening is I'm just playing with the button to see what are the different variations of buttons. I can do the same thing with any other component that has properties. Now, when you're in Dev mode as a designer, you can add some annotations to let developers know exactly what you're thinking. You can mark certain things. Let's say I want to emphasize that the spacing between these should be exactly 32 pixels. I can draw over here and drag and show exactly what the margin and padding between different elements look like. I can add annotations. And annotations are useful. I can leave them on a specific element, so I can leave them as an example. I can add it here and say, This is the total length of time for their trip, not the number of nights. And add that label here or annotation. And that annotation is only visible in def mode. So if I close Dev Mode, you'll see it will go away, but this little circle here is showing me there's annotations here in death mode, which you can also see by just double clicking into it. Now, as a developer, I can also add some resources. So if I'm using Jira or another platform, I can paste the Link and have access to those easily. I can use a lot of plugins that are now made available to help me turn this design into code, including FIGMa to code, and they work pretty good on some level. Now, a lot of these work pretty nicely, but I'll leave that to you to experiment if you are a developer. Remember, you can share access to Dev mode by clicking share here, and while you're on your Dev mode, it will share a link only to Dev Mode. And another useful tip, in general, if you're sharing your Figma file by selecting a specific frame and then clicking Share, you're allowing that person who opens the link to come specifically to this frame. So when they land in your file, they will be exactly in this frame. And this applies both in Dev mode and in design mode. Same thing applies to prototypes, by the way. If you're in a prototype mode, you want to share this prototype with the developer, but as a login user, simply go to the flow you want and then share prototype, copy link. And now the person who opens this prototype will go directly to exactly that starting point or that flow. Now, of course, they can always switch different flows here, but that's the initial flow that they'll see. 87. Annotation Variations: Long after filming the last DevMo video, Figma announced a new feature that allows you to do even more with annotations when it comes to leaving annotations throughout your project for your developers. So now, you'll see in your toolbar, you have this little arrow here and you can expand on the Commons tool and you can actually switch it between annotations and measurement. Measurement, of course, we've used that in the last lecture. But if we want to do annotation, we can either click this or as a shortcut Shift T, and we can leave annotations quickly throughout our design. So if you want to leave an annotation about this, popular tag, let's say, we can leave one here, and the new update here is that you can even set a category for this. So we can say content or whether this is development related or interaction, accessibility, and so on. And for this one, we'll just do a development tag and say the tag should show for trips that are popular among users only. So you can easily add annotations even while we were in design mode without switching over to the dev mode. Of course, you can always hit Escape and change back to comment mode using C and leave comments throughout your project as well. 88. Version History: So we've seen how under Dev mode, you can compare changes between your previous versions of the file. But what about as a designer? Is there a way to quickly revert back to a version that I was already on? Let's say, I made some changes. I don't like them. The team hates it. We want to go back to the previous version. All you need is Version history, which can be accessed from your file name over here with this little arrow and going to show Version history. Version history shows you all the changes you made over time. And as you can see, there's six auto save versions, and I can go ahead and click to see on that specific date what my file look like. So if I click, let's say, November 16, all of a sudden I'll see my file looks completely different. And so I can go even older and see all the changes that I've made to my file over time. Then if I want to revert back to that time, I can always do that by clicking this and saying restore this version. Or if you found a specific version that you want to name, you can go ahead and give it a specific name so you remember this exact version. Then I will go over here. I see components have been published here, and this is the current version, and I can simply close it when I'm done looking at version history. 89. Renaming Layers with AI: Couple more AI tools that we haven't really used in this project. We've already used a lot, but we can definitely look at four more that are pretty helpful. The first one is naming our layers. Now, throughout this project, we haven't been really naming our layers. Everything is just frame 31, frame 44, frame 40, you get the idea. Nothing is really organized. If someone's looking at these layer names, they might have no idea what's going on. So Figma actually has an AI feature to allow us to rename layers. All we need to do is do Command K or open action panel and hit rename layers. It will take a second, but as you can see, for whatever you have selected, Figma will go ahead and give those a name. It might not be perfect, it named this grid here results grid, but maybe you want to call that destination grid or something of that sort. But again, this is a much better improvement than what we had before. We have a collections container, collections title, collections grid. So the naming convention that it uses is pretty nice. Go ahead and give it a try on different frames, or if you want to do rename layers for all of your frames, ask you select some layers, and you can actually select multiple different frames if you'd like, or just hit Enter while you have a section selected, and you'll notice it's too many layers, so you might have to take it a few pages at a time. So give it a try. It's a pretty nice way to get your file more organized. 90. Removing Background with AI: Happens pretty often where you drag an image into FIGMA. I found this shield icon that I can use for the trip insurance over here or something like that, and I want to remove the background. Now, you can do this in Photoshop if you have it and other tools. But if you don't have it, Figma makes it easier more now than ever to actually remove the background. And all you need to do use an AI tool called Remove Background. If you can't find it, just search for it in the search here. You hit it, and it will go ahead and analyze the image and remove the background. Simple as that. 91. Translating our App with AI: Imagine we made this Vander weiss for our client. They launched it in the market. It's doing really well, and in fact, they had a great audience in France. How do we translate this page or the entire project to French? Figma AI makes it super simple. All you need to do, you can simply copy a page. Let's say this destination detail page to have a French version of it. And all you need to do is run the translate to option here and choose the language, and there's a bunch. Going to search for French. And as you can see from top to bottom, it will go ahead and write the entire page in French, including the buttons, the labels, dates, even the reviews. And there we have it. That's how you can translate using AI to another language and have your app ready for multiple markets. 92. Keyboard Shortcuts: Made it this far, first of all, congrats. Second of all, you might have noticed how much I use keyboard shortcuts from auto layout, Shift A to opening developer mode, Shift D. A lot of the command Alt C, Command Alt B to quickly copy paste styles, and so on and so forth. There's a ton and you can't memorize them as much as you want to I just practice them and get used to them. Figmas made that easier by showing you your keyboard shortcuts down over here where it says help and resources. And you have this keyboard shortcuts option here. You can open it up. And it will show you all the different shortcuts that you have. You can show and hide the UI like this, and it shows you life as you use those. You can go and browse different tools. And for anything I've used, it will show it in blue, so these are the ones I've used, but I haven't used, for example, the Pen tool, so it's telling me if you use a pen tool, it will turn blue, which means you've unlocked it or you've used it. So gamifies it so you can learn a new shortcut by seeing which ones you haven't tried yet, so you can try those ones. 93. Conclusion: Congrats on completing this course. We've come a long way and not that many people make it this far. So congrats to you for putting together this project, learning all the tools that FICMA has to offer. And, of course, the learning doesn't stop here. To become a great product designer, you need practice. You need to continue to work on more projects, add them to your portfolios, so that you can stand out and either land your dream client or your dream job. So with that, I thank you again for joining this course and being part of this journey with us. If you have any questions, please feel free to reach out and please do leave a review if this course has been helpful to you. Best of luck and happy designing.