Learn Mobile App Design in Figma: Complete Project | Chris Barin | Skillshare

Playback Speed


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Learn Mobile App Design in Figma: Complete Project

teacher avatar Chris Barin, Certified Photoshop Expert

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Welcome to the course!

      3:08

    • 2.

      Design your first app screen

      9:28

    • 3.

      The most important thing about designing apps

      5:41

    • 4.

      Two fundamental skills to have in Figma

      3:53

    • 5.

      Figma vs Adobe XD vs Sketch vs Photoshop

      7:19

    • 6.

      Let’s improve our speed

      7:27

    • 7.

      Fix this mobile app design

      7:00

    • 8.

      Introduction to the project

      3:34

    • 9.

      Exploring the brief

      8:15

    • 10.

      Analyze the app’s competitors – Part 1

      10:45

    • 11.

      Analyze the app’s competitors – Part 2

      9:38

    • 12.

      Create the layout for the first screen

      6:26

    • 13.

      Set up the foundation for the home screen

      4:30

    • 14.

      Sketch out the restaurant details screen

      7:37

    • 15.

      Design concepts for the location screen (1)

      8:29

    • 16.

      Design concepts for the restaurant listing (2)

      6:56

    • 17.

      Set up the status bar and the action bar

      4:35

    • 18.

      Restaurant listing alternatives (2)

      7:12

    • 19.

      More variations for the card

      2:47

    • 20.

      Final restaurant listing variations (2)

      4:39

    • 21.

      Creating options for the action bar

      4:43

    • 22.

      Design concepts for the restaurant details (3) screen

      7:33

    • 23.

      Variation for the restaurant details

      6:13

    • 24.

      Choosing the best typeface

      8:16

    • 25.

      Define and refine our app’s look with styles

      7:45

    • 26.

      Practice your speed

      6:17

    • 27.

      Finish the first screen

      6:28

    • 28.

      A new style of button to have a great flow

      4:27

    • 29.

      Project overview until this point

      2:56

    • 30.

      Create the login and register screens

      8:10

    • 31.

      Using components – step by step guide

      5:31

    • 32.

      Use instance swap to quickly change icons

      6:48

    • 33.

      Focus on your speed

      5:52

    • 34.

      Use component properties – like a professional!

      7:45

    • 35.

      This is how you use variants

      4:34

    • 36.

      Gain speed

      10:53

    • 37.

      Using fields the right way

      3:30

    • 38.

      Create the left menu

      8:02

    • 39.

      Create interactive checkboxes

      7:22

    • 40.

      Create toggle switches

      5:35

    • 41.

      Design cards with components

      8:47

    • 42.

      Here’s how you can make a beautiful credit card screen

      8:14

    • 43.

      Design a beautiful reviews page

      6:43

    • 44.

      How to style a review card

      5:55

    • 45.

      My take on going the extra mile

      6:19

    • 46.

      18 checkout p1Create the checkout screen – step 1

      8:21

    • 47.

      Create the checkout screen – step 2

      5:32

    • 48.

      Using variants in the checkout screen

      4:10

    • 49.

      Think ahead for the prototype

      6:16

    • 50.

      Final thoughts about the project

      2:30

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

449

Students

2

Projects

About This Class

Learn to design outstanding mobile apps in Figma, a totally free design program that's taking over the design world.  Figma is free, it works in your browser, and it's very fast. In this course, you'll learn how to use it to design a beautiful, 40 screen app.

You’ll learn about Material Design, the principles of color, spacing, and typography, tips and tricks, how to get design resources, and much much more. Get a life skill that’s high in demand in today’s job market.

You'll learn to:

  • How to design a beautiful mobile app

  • The principles of Material Design;

  • Learn Figma from scratch;

  • How to size elements correctly on ALL phone types and sizes;

  • Typography best practices;

  • Where to get design resources like icons, custom graphics, photos, and more;

  • How to use gorgeous colors to make the app stand out;
  • How to truly impress the client with extra work.

FAQ:

  1. Will I learn how to code them? Kotlin, Java, Swift, Android Studio, Xcode?

    No, that's not covered, but you won't have to slice or manually export your assets. I'll show you all my secrets as the CEO of my own Mobile App Design company.

  2. What will we design?

    A flagship app that's as real as they get. Over 40 screens in the final project - beautiful, sleek, modern.

Meet Your Teacher

Teacher Profile Image

Chris Barin

Certified Photoshop Expert

Teacher

Chris Barin is a professional web and app designer with nearly 10 years of Photoshop experience. By being self-taught, he managed to gain the trust of over 190.000 students from all over the world through his Photoshop courses. A staple of his materials is a hand-on, down-to-Earth approach that focuses on getting maximum results with minimal effort.

Chris started out as a freelance web designer and built a loyal client base, earning over tends of thousands of dollars by designing sites part time. Today, he runs his own Android design studio, 20 strong, creating fantastic looking apps for clients; his apps have over 100 million downloads to date.

Passionate about teaching, Chris teaches because he has been disappointed in the quality of training materials available ... See full profile

Level: All Levels

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Welcome to the course!: Hey there, I'm Chris. And in this course I'm going to teach you everything that you need to know about designing gaps in Figma. Figma is a free design program and I'm going to teach you everything you need to know about it from scratch without any previous experience or previous knowledge. So what I'm gonna do is I'm going to show you how to design beautiful Android and iOS apps. Number two, I'm going to show you how the prototype them, which means we're going to make them interactive. They're going to look like they've already been coded. And three, the principles that make any app design look great. Now, these three parts are absolutely huge, but I'm going to break them down into easy to understand concepts. You can immediately use, which you need is Figma and any desktop or laptop. That's it. Nothing else. Let me tell you a few things about me. I'm an Adobe certified instructor. So that means that I'm a great teacher, but a diploma is nothing without practical experience, without practical skills. To that end, I was the founder of a very successful AB design company 2013-2018. I had a team of about 25 people. Design of this Coders Desk does product managers, all equally awesome. And we managed to get over 200 million downloads across our portfolio. So this means that I have practical experience and everything that you're about to hear down to earth. It's techniques and principles that you can immediately use. We don't focus on boarding theory only on things that you can apply in your own projects and make money. And trust me, AB design projects pay very well. From my experience, an app designer earns at least three times as much as a web designer. And that's because companies that need apps typically have a very large budget. The absolute minimum $20,000 per project. Now that there's a lot more to say. But in short, this is a very lucrative field. And you don't need to know how to code. That's the great thing about it. You can bank it out and then move on to the next project. Now, kids, what I want from you, I want you to be committed, right? I want you to work along with me, thought to me, ask questions, do the exercises, and engage with the community of students who are just like you. Please don't doubt yourself. Be forgiving when you mess up because you are going to mess up. It is going to be tough at times, but keep going. Try your best and don't give up those few times where you're going to get knocked down. If you keep going, you'll eventually get there. I have a saying, work hard, work, smart, work long enough, and results are going to follow. That's my only promised to you. And with that, let's get started. I hope you can stick around with me until the end and we can build something awesome. For now, open up Google, search for Figma, make a free account, totally free and download it. I'm not going to cover these steps because it's like signing up for Gmail is very straightforward. We've just put in your e-mail, your password, and that's it. So download Figma, installed it and that's it. I'm gonna see you in the next lesson. Thank you so much. 2. Design your first app screen: Welcome back. Let's get started. Open up Figma. You should have it installed. But if you don't please pause the video, go to Google search or Figma, and then install it on your computer. When you're ready, launched the desktop app. Just like that, we're not going to work in our browser, even though it works in other browser, we're going to stick with the program. Okay, this is how it looks like. And we're going to look for the import file. This is what we're looking for. You have this project attached to the course. Now, here's the thing. Our job is to design this green for one of my apps. And we can take inspiration from this screenshot. This is actually a real project. So even though it may seem simple, is gonna teach you a lot. Please watch this video twice. Once just to understand what's going on. And then the second time around, you can work along with me by pausing as often as you need to. Repeat. Please don't try to work along on your first viewing. This applies for the entire course. Okay, let's get the word. This is called the frame and everything inside the frame makes up a screen, one single screen. Right now, we only have one thing, the apps logo, keyboard atlas. The first thing that we're gonna do is we're going to send the red, please click on it to select it. Or the second thing that you can do is you can click and drag out a box and everything inside that box is going to be selected. Now again, now we can use this command to align it in the center of the screen, just like that. Awesome stuff. Next, I need something that's going to act like a background. So let's grab this tool, the ellipse tool, the hotkey is 0. 0 for the lips doesn't make a whole lot of sense, but it's fine. It's the circle icon from the top left side of the screen. Usually you're going to see the rectangle tool, but you can hit 0 and you're gonna get it directly. Or you can do is you can use this arrow here to show all the tools. We need to zoom out a bit. So let's do this. Hold the control key, that's the Command key on the Mac, and then use your mouse scroll. This is how you zoom in or zoom out. Please take a moment to get familiar with that concept. So again, hold Control and then scroll. By the way, when you zoom in, Figma is going to focus you on your mouse. So if you move it to the right side, that's where you're going to zoom in. Basically is going to follow your mouse, move it to the left. Same thing. Now with the Ellipse Tool selected, let's draw out a shape that looks something like this. Now again, now notice the logo went away and that's because we're hiding, get the fixate, go to the Layers panel on the left side, and you're going to find the layer that's called an ellipse. One. Click and drag it underneath the logo. If you're the lips is too large, mom might place it behind your screen. The fixed that simply move it back and forth over the frame. If you can't manage, just make a smaller ellipse. Okay, back to atlas. Change the color from gray to just about anything else for that, we're going to have to click on this box next to Phil, will get this pop up and you can choose just about any color. I'm looking for something bright, saturated, a very modern color, maybe a purple of some sorts, something maybe like this. Now again, I'm happy with it. Now again, we're going to have to center it. So let's use the exact same command here. If you keep your mouse over it, you're going to see it says Align Horizontal center. Awesome. Okay, Now let's hold Control and zoom in a bit more so we can better see what we're working on. The black logo doesn't really work all that well. So let's switch to the move tool. The hotkey is V, but you can click here, move V. Again, it doesn't really make all that much sense, but make sure you select that. Okay, Now, grab the logo by clicking on it, and then let's make it white. Believe it or not, this is good progress. For some. It may be difficult for some it may seem super simple, but let's keep going. Next. I wanted to add some type of graphic, but let's raise up the logo, just the bed. While on the move tool, click on it to select it and then drag it up as long as you don't let go of your mouse click, you're gonna see that fake mom is going to help you keep it centered. That's what this red line shows you. Figma is really helping us out. Okay, now I want to add the screenshot, but first, let's add a rectangle that will help us out quite a lot. Does the rectangle tool, and you can hit R. Where are? Finally stands for rectangle. Click and drag one out. No certain size in mind, just something that's fairly wide and fairly short. Okay, we can always adjust that if needed. As always, please center at the exact same command. That's an important step in just about any design project. Then inside your resources folder, you're going to have a few designs to choose from. These are all made by my team. By the way, we're going to place one of them inside of this rectangle. So here's how this is going to go. Click here next to the rectangle tool so we can see all the tools. We are looking for a place image and as even the shortcut. Control Shift K. This will open up a browser window and you can find that folder that has all of these screenshots. Okay, awesome. I'm going to choose one at random. Once the image is loaded, you're going to see a mini version next to the cursor. This means it's ready to be placed inside the project. So what we're gonna do is we're going to go over the rectangle and just click on it. And that's job, well done. One thing I don't like these square edges with the rectangle is still selected. You're going to see this field here. So this is where we're going to change it 0-30 pixels. That's gonna give us a much better luck. And I'm very happy with that. Now, to make the image stand out a bit more, Let's click on this plus next to fx. This is gonna give us a nice drop shadow. To adjust the shadows, look, Let's go over this icon where you're going to see it says effects settings. So I'm going to use high values so you can really see it through the recording. It's 15 for the y field and 15 for blur. That's 15. We're going to talk about everything in detail a bit later on. For now, please just follow my steps and the top part is done. Now let's add our first button. Get the type tool hotkey t. The first message is going to be choose keyboard less. Choose keyboard. Now when you finished writing it, just hit the Escape key to finish things off. Then let's change the font from the right side. So this font doesn't look all that great. So we're going to change at seed this area here that's called text. Let's change the font to something very basic. Let's say Arial Bold 24. Take your time with it. You don't have to rush. As I said, pause the video as often as you need to when you're ready, center it on the Canvas, just like that. The important step as this one, move your mouse above it and right-click get from this list. Choose add, auto-layout. It's somewhere near the center. If you can't manage, just use this hot key, shift a. So this does the same thing. It doesn't seem like anything happened, but now we have this area here on the right side that's called fell. Hit the plus icon. And again, nothing seems to have changed. But notice we do have white right here. We love white and most AB design projects, but now we have to change it to something else. So let's click here to get the color picker. Now we can select just about any color, but let's use the previous one. And then we go, It's now verbal as well. Escape to close it off. Now, black and purple doesn't really work. But notice this area called selection colors. So this helps us change that black to pure white. Just hit the black square and you know what to do, make it white. Remember to use the Escape key to close the window. And this is catching shape. The button is a bit too small, so let's make some changes. From this top right side. Let's switch the coordinate radius two for the, that's this field right here. Then one down and find these two fields within 80.20, and that's all there is to it. Now, 80 means we're going to have 80 pixels on either side of this text. And that's the buttons edges basically horizontally. And this part is for the other side. Now, cent of the button once again, and we've just about them. Make a copy of it. Use control the now, again, it looks like nothing has happened. But when you go with it, with your mouse, click and drag, you're going to see that we made a copy. So Control D or Command D, D as in duplicate. Awesome stuff. Let's change up the texts and then we can move on. Doubleclick wants to go inside the button. Now double-click again to edit this message. Change it to activate the keyboard. So activate the keyboard. After you're done, move to the next video where I'm going to explain why we work the way we did. For now. This is your first app design screen congrats, and I'm gonna see you in a second. Thank you. 3. The most important thing about designing apps: Welcome back. Let's see if we can improve the design just a little bit. Maybe change the size of the buttons, maybe add a few more details like add the website at the bottom. Now wildlife work in the background. It's the same thing as we did in the previous video, the same techniques. Let me tell you a few things about designing apps. Now, in my five plus years in this field, I found simplicity is key. What you see here is not difficult to do from a technical standpoint. It's not crazy advanced. As you saw, we are using a few shapes. We centered the few things, we chose some very basic effects, like a drop shadow. This is actual lab designing. This is a real project and most are exactly like what you see here. Times 100 right? Now, simple is not a bad word here. Simple is essential in any AB design because of their very nature, mobile apps, the best ones at least have only one or two basic functionalities. E.g. the classic Uber calls you a car, and that's it. The interface doesn't have lots of decorations or the buttons. You won't see any creativity. You won't see a lot of things that make it stand out incredibly. So that's not the point. The app needs to feel intuitive, right? The idea is to make the app look in such a way where a four-year-old with a tablet can manage the user. So again, this is a real screen from a real app. It's not complicated, it's not fancy, is not impressive. It won't get you a ton of likes on social media, but this is what companies need. Clean, modern, precise designs that help the user achieve his goals. Photo, but that's giving you a car for this green, It's about making sure that the user activates the keyboard. The thing is, if you look at design galleries like dribble or the hands or whatever, you're going to find beautiful, incredible designs. But most of them are fake. Those are made for designers and the mate for likes and comments. The truth is, this is actually what companies need. Now, don't think that this is easy to do. There's a difference between easy and simple. Easy as when you pick up a bottle of water, e.g. simple is when you know that if you want to get big arms in the gym, you're going to have to use heavier and heavier dumbbells. Or if you want a six pack that you have to diet. The process is simple to understand. Add more weight as time goes by, eat less, right? But the actual lifting of those heavy dumbbells, that's far from easy. So that's the difference between easy and cymbal. Another way to look at it is like you're watching an experienced chef when they cook, they do it with grace. It seems so simple, so easy. But behind all that, there's a lot of complexity involved. There's a ton of experience. So it's the same thing here in AB design. Getting to this point where you can make a few elements look lovely. It's quite hard, but that's what you're going to learn in this course. I'm going to take you through all the design principles that are going to help you create modern, beautiful apps. I'm going to teach you about contrast, symmetry, spacing, hierarchy, and much, much more. You don't see them, but those are the principles of any successful app. One final thing, why don't most companies have gorgeous apps like the ones you see on Behance and durable, because they're incredibly expensive. Basic EPS, very simple ones require a budget of at least, at least $10,000. And that sounded very, very low-end. Most apps need the budget of at least $50,000. But let's put it another way. Say that 1 h of building an app in total costs 200 bucks, $200. Would you spend more time on making sure the app works correctly? Or the choosing colors, effects, fancy animations and the law. So as you can imagine, most companies want the app to work correctly. Functionality first, right? Design is always a low priority. So that's why you won't see any of these incredible animations, incredible transitions and affects all Bois from the cost an arm and the leg. The cost way too much and then not worth the money. So what's the conclusion? Well, you need to learn how to design like this. Simple, modern effective, which you see on Design Galleries is very similar to what you see on Instagram. It's mostly fake. People don't really look like that. And relapse don't look like that either. Simplicity requires a lot of knowledge, practice, and in short, a ton of experience. I'm going to help you with all of that. Stay with the course and you are going to learn everything that you need to know about this field. Now specifically about this design, I chose to make the first button stand out by adding a drop shadow. I made the second button gray to show that there's not ready to be clicked. It's also not as wide. Now, this is the principle of hierarchy. You feel it in your gut that you have to click on this button, the purple one, and not on this other one. Finally, I added the text layer at the bottom to balance the design out. Now, after you go through this course, you'll even be able to do a lot more of this stuff with a ton of confidence. But now let's keep going. 4. Two fundamental skills to have in Figma: Let's create a brand new file to control land, whatever method you prefer. And let's get to work. Initially, I know that everything seems so empty. Any project starts with a frame. That's the first thing you need to remember. A frame is like an art board or a canvas, but there's just a bit different than Figma is a place where you add all your texts, images, basically your content That's all inside the frame. Don't worry about the definition. As we work, you'll soon get it. To add the frame. Please hit F to activate the frame tool or simply click here. By the way, it does another tool here called the Slice tool, but we don't want that. Okay. We have the Frame Tool selected and the right panel just changed. You have loads of options that are very well organized. Phone, tablet or desktop and so on. You can click on the names to open or close them. And if you click on any of them, say iPad Mini, the frame automatically gets added. You can also see it in the layers panel. See this symbol here that kind of looks like a hashtag. That's a frame to delete it. Just tap the Delete key and that's it. Okay, let's move on to the desktop section and choose the first item from this list, which is also called desktop. We can see the size right here. It's 14, 40 by 1024. There you have it. Now, the problem is, most web design projects should start with a frame that's 1920 by 1080. That's what I strongly recommend. The best way to resize it is to use this part here. W stands for the width, and H stands for height instead of 14, 40. Click here. And now you can type in 1920. Same thing for the height we're looking for then AD. Now the frame expanded and we can see it very well. Here's what you need to do to zoom in or out. Please hold the Control key and use your mouse wheel. If you scroll backwards, you'll zoom out. If you scroll forward, you'll zoom in after you do it a few times, it's going to feel natural. Please use your left hand. Ideally you have pinky to hold the left control key on your keyboard. Now use your scroll. Please do the following. Move your mouse in the coordinate of the frame and zoom in. As you can see, this really helps you focus on that area. Now, zoom out and move to another corner. I know this seems like very basic stuff, but trust me, it's essential that you practice. You can't move forward until you master this stuff. There's one more thing that you have to know how to use, and that's the Spacebar key. Say that we're zoomed into a corner and with very happy with the zoom level. But now we want to move to the other corner. This is called panning. Panning around. Hold the space bar key and your mouse cursor is going to change to a hand. If you let go of the spacebar key, it will go back to the standard data, the move tool. Again, hold the space bar, click hold, and move from coordinate to coordinate from side to side, up and down. By managing to master these two simple techniques, you are creating a very solid foundation. This is your alphabet. This is your basic, basic math. Please learn it. There's no getting around it. To recap, hold the Control key and use your mouse scroll to zoom in or out and hold the Spacebar key, click and hold to move around from side-to-side to pan around, panning around. 5. Figma vs Adobe XD vs Sketch vs Photoshop: Welcome back. In this lecture, I want to do a quick comparison between these AB design programs. First, the conclusion, Figma, seems to be the industry standard and the best design program for the future. With that in mind, you can skip to the next lecture if you're not interested in all the details, okay, assuming you're still here, I look at the market or the design market and I see four big columns is Photoshop, Adobe XD, sketch, and Figma. First, let's talk about Sketch. It's a decent app design program that's fairly well-known. It costs $9 per month, but I'm not interested in it for one simple reason. It's not available on Windows, so I can't use it. From what I understand, the team behind it doesn't plan on making it work on Windows. So for that reason, it's out of the question for me. More than that, it doesn't have a large community. So with that in mind, sketch is losing ground quite fast. It's been around for a lot of years, but it's losing ground. Now, let's talk about Photoshop versus Adobe XD. Now, that's like comparing apples to trees. They are totally different programs that have different purposes. Adobe XD was built from the ground up for web design projects, at design projects as well. So that's one of the major advantages for Adobe XD. It works with vectors. It's very lightweight, It's super fast, and it has awesome features that can seriously speed up your design process. Just have a look at this example where I can populate a list in just a few clicks that really makes you work faster and smarter. It's not just a gimmick. I use it all the time in all of my projects. Speed is the keyword here. Now, the downside is that Adobe XD is still under heavy development. Adobe is constantly working on it and it's getting better and better. But some people say the updates are on coming fast enough. Basic things like a dark interface or being able to change your layout, e.g. those are not available. Well, not at the time of this recording anyway. Another downside. Previously, Adobe XD was a free program. Now it's ten bucks per month. So overall, there's a sense of frustration about Adobe XD, especially when you compare it to Figma. Now more on that in a second. For now, let's talk about Photoshop. Photoshop is great. It has tons of features. It's predictable, it's comfortable, and you can design beautiful apps with it. It's one of the most well-known design programs in the world. Now I could go on and on about it, on it's positive sides. But here's the elephant in the room. The single biggest problem with Photoshop for the AB design work is performance. When working on a medium to large project photoshop slows down dramatically. In most AB design projects, even with the absolute best computer, I still have trouble moving around. It's choppy, unresponsive and it's quite annoying. And this is a 7,000 dollar machine, is not the best in the world, but still is $7,000. Now when I tried to add the new text layer photoshop, is that the ring? It's slow as ****, it stops and it thinks for a few seconds, with adding a simple text layer, this is frustrating and it's by far the biggest drawback that other, other ones as well. But this is the thing that really affects me every single day. And it's simple. Photoshop wasn't built for this type of thing. If the project has only a few screens in total, that's totally fine. You can use Photoshop fine. But after ten or 20 screens, it just becomes way too slow. So to sum this up between Adobe XD and Photoshop that has no context for any decent app design project. One is incredibly fast, while the other one is the giant of the design world. But it's also painfully slow. Jet ski, Adobe XD versus cruise ship. Now back to Figma, it was started in 2012 and in 2018 also, it really started catching speed. The next few years. It spreads incredibly fast in the design community. So much so that Adobe, the huge company behind programs like Photoshop, Illustrator, premiere Pro, and of course, Adobe XD, this side it by Figma for $20 billion. Yes billion. So that happened at the end of 2022 And it took everyone by surprise. The sum is incredible, but here's why you should care about it. So Adobe XD was a direct competitor to Figma, a beginner, they might even look similar. Adobe XD was built for the web and app design projects exactly like Figma. But one clear advantage that big my head was its pricing. It was totally free. Adobe XD started out free, but then they made it ten bucks per month. And that may not sound like a lot, but most companies hate sending up a new billing system. If they're designers could just sign up fast without any trouble, that would be the ideal case. So Figma, a great choice for most companies and designers of all sorts, like working in Figma and not because it was free, but also because it worked in your browser. Yeah, a complete design program that works in your browser. So all in all, Figma became de design program that everybody was asking for. Adobe, tried to improve Adobe XD, but overall, Figma seemed unstoppable. So I think that's why they decided to buy it for such a large amount. They had to do something. Figma was getting stronger and stronger and buying them was the easiest solution. Now, the main question after the Figma was bought by Adobe was, is it going to remain free? And the answer is yes. But the most important question is this. What's Adobe gonna do both XD and Figma do the exact same thing. It doesn't make any sense. The key both design programs, it's just too expensive. So most people think that Adobe is going to straight up kill Figma since it was once a competitor. But my guess is that Adobe XD is much more likely going to be terminated. Time is going to tell us. But for now, it's best that you learn Figma and see why loads of designers started using it. And they never switched back to Adobe XD or any other design program. Before we end, I'd like to mention something. Adobe is very likely going to update Figma several times. This means you might see slight interface changes here and there. But the great thing about this course is that the principles, the design principles that we cover a universal. So even if you see a slight into the phase change, don't worry, you can still follow along without any problems. And if you do get stuck, please just ask for help and I'm gonna be there to jump in for now. Let's continue and I'm going to see you in a second. Thank you. 6. Let’s improve our speed: Welcome back. I know there's a lot to discuss about Figma is interface and the very basics of the program, which is what I propose, let's improve our speed. Speed is one of the biggest factors that determines your success over the years, I've found volume to be incredibly important. To put it simply, it's one thing if you design, then buttons, it's another thing. If you design 1,000, the sheer repetition makes you better. It's not just about being faster, it's about being confident in executing the basics. So this is why we're starting with yet another exercise. Even though you're not familiar with the program, you're not sure about its interface and whatnot. No worries. Take with me, start the Sigma and we're going to create a new project by clicking here. Initially you are gonna get a totally blank screen and this is normal. Grab the frame tool, hotkey F. You can use one of these presets, but it's just easier to click and drag out a box. That's a frame, aka a screen. Of course, the size is totally wrong. So let's fix that by working with this properties panel right here on the right side. In short, W stands for the web and h stands for height. We want 720 by 12, 80, a great starting point for most apps. Put those values in and hit Enter. After that, you may want to hold Control and zoom out the bed by using a mouse scroll wheel. Now, here's all objective. I want you to quickly create a grid of six photos with six dipoles. This means two columns to be those. The goal is to do it as fast as possible. And to that end, I'm going to ask you to do it three times. Every time you do it, please record the time. Use a stopwatch on your phone. I wanted to see how you improve each time you go through these steps. Here's how this goes. Grab the rectangle tool, hotkey are and draw a shape like this one. There's no specific size in mind, but it should be under the hundred and 30 pixels. So that's deleted easy though. So you have room for two of them side-by-side. Place it in the top-left side, and this is good to go. Next, grab the type tool, hotkey d, d For type of text. And let's write something. This can be anything at this point. I'm just going to use photo name1, just something at random. Hit Escape when you're done with it. Now, the fun begins. Select both the rectangle and the text layer by drawing out a box like so. Now you guessed it, we're going to have to center them. Now. This is all fine and well, but the text layer is quite basic. Well, let's click on it and go to the right side of the screen, and let's change its orientation. First of all, we're going to go from left align to center align. And why? Because we're going to increase the size. We're going to do lots of things, but it's going to stay. But so e.g. here, as you can see, it remains centered even though I changed the size. Plus we can change the typeface as well by using this field right here. I have loads of them installed. So I'm gonna go for the one of them, e.g. Poppins, bold 24, right? And because we change the orientation from left to center, the text remains centered with a rectangle. I'm going to teach you how to install fonts later on, but now let's continue. For now you can use any other font that looks interesting. Just go through this list right here. Okay, Next, select both layers and make a copy width control the desk Command D on a Mac, D as in duplicate. And as always, nothing seems to have happened. But the layers panel shows us the copy back to the screen, click and drag it to the side. It's important that you top align it, right? So this is what it means. Imagine a horizontal line going right here. You don't actually have to imagine it because Figma helps you out. Okay? So a line that correctly and leave a bit of room on either side. If needed, select everything and move it about. Okay, this is good stuff. Now let's do this. Let's select both entries by dragging out and even bigger box that encompasses everything right? Now, duplicate again with Control D and drag the copies down. Please leave enough room between the rows. So something like this. What I want to avoid is something that looks crowded like this one right here. This is not a great luck. So again, make sure that you leave enough breathing space, 0. Remember to zoom in and out when needed, that's controlled and your mouse scroll. Okay, Now, do it again if needed, until you get six photos. And though they'll awesome Speaking about photos, Let's go to unsplash.com. And here you're going to find a massive library of free images. Now my advice is you show me something that's interesting about your country. You can show off different cities, different parts of your nature. Just make sure that the photos go well together and that the names are clearly marked. So after you download six images from Unsplash, it's time to bring them inside the project. To do that, Let's use Control Shift K to place the images. Or if you don't like the hotkey, go to the rectangle tool and click here on this down arrow, find, place images, and select those six files. These be aware that unsplash.com gives you huge images. So when you load them up, Figma is going to thank for awhile, just a few seconds, so you have to be patient with it. Okay, great. Now quickly click on all the rectangles to insert those images inside them. When you're done, I want you to rename all of these texts layers to something more appropriate. Again, it can be city names and your country or something else. You don't need a long description, just keep it short and sweet. Of course, you could shrink this text to a different size. You're in complete control of the look. Make it bigger, change the font, whatever you wanna do when you're done, select the entire frame. Then go to Export and click on this plus icon. And you're going to see some options and the default ones are totally fine. Png at the size that you set it up. Click on this button and you're gonna get a browse window, save it on your desktop, and then upload it to the platform. I want to see yet, this is your design. Now what I want you to do is VP. They exercise a few more times, three times in total. So this means create a rectangle at the title cent of the title in two ways. Once with a rectangle and then the second time change the orientation from the left side to the center. Then look for the titles, may copies, add photos, and explore. See how you can improve your time. But one thing though, don't consider the time you spend on Unsplash looking for the photos. So that's excluded, right? Pause the stopwatch. What you're looking for, the speed in Figma, you should be able to add rectangles and texts layers with your eyes closed. Insert the photos, make sure everything is centered. Move them around, zoom in and zoom out. That's what I want from you. Good luck and let me know your times. Let me know how you improve each time. 7. Fix this mobile app design: Welcome back. Please start Figma and important to the following file. Fix this app dot FIG thing. This is attached to the course. Now the goal is simple. We have to improve this design. And this is going to help us a lot about learning about how we need to design an app. Now, here's the first mistake. You've seen that we've centered our items quite a lot. Notice this left side. Now, you should immediately imagine the vertical line going through all of these items. If you select all of them, you're going to notice that these are all over the place. They're not aligned. So this makes the app look messy. It's a gut feeling that tells you something isn't right. So with all of these items selected, we're going to use this alignment command line left. And this is much more like it. To be fair, the gap on the right is bigger, one-on-one versus 82 on the left. That's not correct. Well, first of all, if you tried to use this center line icon, figma won't give us what we're looking for now to be fair, this doesn't look all that bad, but let's stay on track. Now we want to equalize the gap on the left side with the one on the right side, right? We want the same gap. We can click, drag and move everything around until we see this line. This is the manual way of doing it and it's not the fastest way to get the job done. So let me undo control Z, that's Command Z on a Mac. Now, with all the elements select that you can use Control G, G as in group. That's Command G on a Mac. Now focus on the layers panel. We have something here called the group or the folder. Now in short, Figma is now treating all of these elements as one. And because of that, we can use the central command just like that, and we get the same gap on either side. So did you get all that? We grouped all the layers together. So Figma would see all of them as a single object. Then we can use the central command now to ungroup, just right-click here or in the layers panel. And we're looking for the Ungroup. Or even fast that you can use the hotkeys Control Shift G, But I like right-clicking. So again, that's the first mistake, not aligning things correctly. That was in two cases, left aligning things and then moving it in the center. Now, the second mistake is right here with this disruption, this gray is far too light, It's too washed out, so it's too hard to read. Imagine you're on your phone and your brightness is at 20 per cent. To save your battery life, you won't be able to read that. So click on it to select that and then change the fill to something a bit darker. Legibility is key. Eligibility is what you need to easily read text layers. So a very washed-out color is a no-go. The next mistake is the main action on this screen login. It's such a small element and it's easy to miss. Why not have a large button with a generous surface area y force the user to be very precise with the steps. It doesn't make any sense. So select the text and then use Shift a. This is the standard way to create a button in Figma. More than that, but the latest point, now, let's add a fill by clicking on this plus icon. When it comes down to action colors, use something that's bright and saturated. So e.g. let's say we want to use a green. You should never go for something like this, e.g. so dull, boring and washed out. This needs to stand out. On the flip side, you don't want to use neon colors, right? So going all the way in the top right side is typically a mistake. Instead, you want to stay in this area right here. This is a modern color that most clients will be happy with. Of course, black doesn't work. Now, could you potentially read it? Yeah, of course, But does it look great? No. So remember, we can control the text from here, selection colors. Now, my advice, always, always go for the pure white. Nothing else, not yellow, not teal, not gray, NAB, gold. Nothing beats pure white. Okay, For the core nerves, squared ones look a bit outdated. It's not a mistake, but it's not nice. It's a bit 2010. So this beak. So let's use a high-value, something like 60. You can put in any super high value here, Figma is only going to use the maximum possible value for the width and height of the button, let's use 160.20. Now my advice is you either make the button as why does the fields, or you make it considerably smaller. As always center it horizontally. Which ones to avoid are the values that seem to be about the same, yet the different. 200 is a prime example. It's just about as wide as the fields, but not quite. This is less aesthetically pleasing. So my advice steal away from it. You'd either the precise or you have not at all. Now, going back to the spirit of the exercise, we can do a lot more, right? Let's move forgot password in a different place, raised the login button, and so on. Now, these are fine-tuning details and you can take it or leave it optional steps, right? It's more about personal preferences rather than fixing gathers what mistakes, what is a clear the issue is this one, the final one from this exercise? God password is not styled correctly. See, login is clearly an action, right? Sign up at the bottom. Again, it's clearly an action. You can see it's in a different color and it's even in bold. So it stands out a bit more for the god password doesn't seem special in any way and that's obviously a mistake. So select it and change it up, make it bold and change its color to an existing one, e.g. this blue. Now, why blue? Because it's a secondary reaction similar to signing up. Now, the main action or the primary reaction is to login, which is green. The secondary one is blue. Now, these are the types of things that you're going to learn in this course. For now, let's sum this up. So we've left the line everything, because precision is essential in any app design project, we change the color of the description to improve legibility, the ability to read it easily. We added the rectangle for the login action to make it easier to use. And finally, we made for the god password, bold and blue. So it stands out as an action, as something that you can tap. And with that, with good to go, we fix this app. Thank you. 8. Introduction to the project: Welcome back. In the upcoming section, we're going to design a food delivery app is going to be quite the project. The goal is to get familiar with all the components of a mobile app and create something that looks great. Please watch each video twice. Once to understand what's going on. Don't work along, just watch and see what's happening. And then a second time. Pause as often as you need to work along. Okay, now, as we're going through each screen, I'm gonna give you my insight. I'm gonna give you my thought process into how I make design decisions quickly. Having said that, you have to be aware that certain principles that apply here, they require an in-depth analysis. We're going to talk about all of those things a bit later on. Right now, I want you to work as much as possible and leave most of the theory for later. Now, you may ask Chris other things that we need to learn. Why are we jumping in into a full-fledged app design project, a real-world project. And that's because nothing beats experience. So that's why with jumping stray then moving on, I also want you to design standard layouts because this is what you're going to encounter in your everyday projects. Sure. There are tons of super creative out-of-the-box designs on the hands with dribble. But fact is, most of your clients don't have a fortunate to spend on app development, on codons. Thus, we're going to create something that's actually a real-world project. Something that's based on my experience of over five years of working with codelabs, with developers around the clock. That means applying best practices and using fairly standard layouts, you have to be aware that every design decision that you make can increase or decrease development costs, coding costs. So while something may look impressive, There's a very good chance that the developer has the work extra hard to make that happen and the client has to pay a lot more. I've been down that road a lot of times. But here's the thing. I've also been in the client's seat where I had to approve additional payments because the final version requires more work than we initially anticipated. Now, again, I'm going to bring all this knowledge into this course and I'm going to teach you how to choose your battles carefully, designing something awesome that doesn't break the bank. For now. I want you to stay curious and do your best to watch the entire quotes until the end. Before we go, I have to ask you for your understanding regarding certain parts that will be sped up. Any decent app design project is going to take days, if not weeks. I'm trying to condense it down to its essence, trim it down so you can get a great learning experience in the metal of hours. So that means I have to edit certain things out. Repetitive actions that you've seen me do 100 times or things like how to Google something, you know, finding an icon set, finding a font, things of that nature, things that are time-consuming, but there's nothing special about them. If you do have any questions, please ask away. I'm here to help. If there's anything you don't understand, please just post a message and I'll answer it as fast as I can. Okay, let's have some fun with our first serious project. Please be patient with yourself in case you struggle at times and stick with me until the end. Let's go for it at. 9. Exploring the brief: Welcome back. This is our first serious app project. This is going to be a food delivery app. And we're going to use this chance to go through a lot of different screens and scenarios. This project has a brief that's about an eight out of ten. Not amazing, but it's certainly not a few sketches on a napkin. It's twofold as it should be. On one part, we have the wireframe, which shows us the most important screens and what content needs to be included. On the other side, we have a document that describes what's going on inside the app just in case it's not clear from the wireframe. Ideally, you should always have both of these when starting a new project. It's not your job to come up with them. But if the client does want that, you should increase your quote in a very significant way, basically charged more, I would say at least at the very minimum, another $1,000. Okay. Attached to the course, you can find the link for the wireframe, the logo, and the documentation. Now, this business is called the Live short for delivery, and it's basically an app that delivers food. And a few cities, we need to list all the restaurants that offer takeout, but only those who have their own delivery staff. Okay, good to know. Now, the company the left doesn't handle the actual delivery. Now, this area of the brief is very common. It's the essence of the project and it's a good place to start as you get a general idea about what you're about to design. The next phase is critical, the target audience. And this is going to determine the look and feel of the app. And it's nice to have at least some inflammation. Now, this app is for people who are active with disposable income. Both genders, probably single, not married, office job, unlikely, upper management. We have to paying points, the quality of the food and the delivery time. Now, these are useful points because these can help us determine the look of the app. How we should style LEP. Context is everything. Now I would like to have a few more details, but like I said, this is an eight out-of-band. Another thing you should find in these briefs is the app's value. Now we have the main pain points, so we know what needs to be fixed, but how does the app do that? How does the app make people happy? Here, the app has a few strengths. It's the views, great delivery time, and real photos of the products. Okay, pretty good, reasonable. In the upcoming paragraphs with getting key details that will shape the entire flow of the app. Now, I'm going to skip through this part, but please read everything yourself after this lecture from what I see, I think the user can skip the registration process and same thing for the address, he can just skip it. Now, typically, registration is the very first step. But here the client, aka the business owner, has made the clever choice. He doesn't want the user to get stuck with filling forms without seeing the value of the app. So that's why we're giving the user the possibility of interacting with the app, of actually using good. And that he's convinced he can sign up during the checkout process. This is a great sign. This shows you that the owner or the project manager or the business owner, whoever is running the show, has thought things to do. We have to analyze this stuff because this tells us our position in the project. Should we share our own ideas? Do we allow ourselves to be vocal and challenge certain decisions? Well, it depends on how well-thought out the project is and of course, your role, your job in this case, this is a great sign. Things are under control and we don't need to second guess the brief. Sometimes clients have no idea. This is not one of those cases. Moving along in case the user is logged in and the location isn't filled in with just gonna show the city with the most amount of restaurants. But he can use a drop-down to quickly change that. Again, sounds good, quite reasonable. Now, in case the user is registered, the drop-down will obviously show his city. Now, the rating system is percentage-based, 1-100% instead of the five-star rating, which for us is a good place to add some personality. We see that our four categories of ratings. So we'll have to design something that's a bit creative and interesting. Now, let's pause again. This is another great sign that things have been analyzed in great detail by the brains of the operation. Rating systems use the standard five-star approach, but some of the biggest companies on the planet have switched to a like dislike system. This includes YouTube, Netflix, and in some parts of the world, Facebook. Now, the listing is the fundamental screen inside the app. So we need a clear understanding of what needs to be included and what can be displayed in another place. Now, here we see we need the photo, a title, rating, cuisine type, food type delivery time. Without this inflammation, we can move on. The thing is we could include e.g. a. Minimum order, right? Or the delivery charge. We could include the distance in miles or kilometers from the restaurant to the user. All of this would completely change the structure of the design. So again, I'm quite happy that we have all of this information and we know what needs to be included and what's optional. We have a few other bits and pieces here and there, but let's move on to the wireframes. We have to be aware that the number of screens shown here isn't actually accurate. The wireframe typically shows the most important screens and we have to fill in the blanks by using the documentation, e.g. pop-ups, intermediate screens and whatnot. Obviously, those are not included in most situations. You're not going to find them if you do have them. Great news, but in this case, I don't think we have them. Now back to it. Things are pretty well laid out. So I think we're going to have a good time with it. Simplified of names. These are numbered, which is awesome. So we might talk about the location screen, e.g. but it might be quicker to just call it screen one. If you want to comment on something, please include the number. That's the best approach. Now back to it. I see we need to include both the left and the right menu, which is not something google recommends. But I think this is needed because of those filters that are going to help the user find a specific restaurant. Finally, we have to be careful about the different flows of the app. We have multiple avenues. A, when the user is registered, that's important. Be when he doesn't have an account and he skips the location, so we don't have an address and see when he's not registered, but he provides an address. This won't affect us too much in the initial design stages, but in the prototyping phase, we're going to have to sort out all of these scenarios. We're going to have to make the app and directive. So it's gonna be quite tricky, but we'll see at that point in the prototyping phase, All in all, we can start the design process by checking out the competition in this niche, we have to look for inspiration. We have to see what other people are doing. So let's continue in the next clip. 10. Analyze the app’s competitors – Part 1: Welcome back. At this point, the brief shouldn't be a mystery. If you haven't gone to the width, please pause the video and analyze it that only the next step is to check out the app's competition to see what's going on in this particular sector. Here we have a niche that's fairly well-established, food delivery that are more than enough apps that we can analyze. Another, do one better understand the project's requirements and to get some inspiration regarding the overall style. Please note that these apps are location-based. What I'm about to show you may not be available in your country, but you do have several screenshots from each app attached to the course. The line-up includes the liver though, Food Panda, the Live, which is an app that has the exact same name, but it's purely coincidental. Takeaway and then hit Menu. Now, all labs are constantly updated, so the live versions might be different. Actually, I'm quite sure that different. Still, the screenshots will be the reference point. Okay, let's start out with the live so we can get it out of the way. Now, the initial screen is a big mess. We have bank yellow, navy blue, and curiously the main button is yellow as well. The background seems to be a picture of the city, but it's blocked by this solid rectangle, which makes no sense. When you search, even though you don't understand my language, Romanian, you might see that this text is quite low quality, very pixelated, and somewhat distorted. And that's because these have not actually texts layers, officially called strings by codons. Instead, this is an image that's being stretched out. That's bad practice and it's not good Looking at all. Okay, now let's switch to the listing page. Here we immediately see the little attention to detail. There's no empty space on either side. So if we drag out some lines, you can see the alignment is out of whack. The topography is modest, the fonts are boring. There's no diversity in this region. There's no particular the hierarchy that's easily spotted. Overall of four out of ten. And I'm being generous. When we go inside the restaurant, we can see the tabs have these vertical dividers, which I've not often seen in Android apps. On top of that, there's no elevation anywhere. You can spot any drop shadow whatsoever. Now, that's not exactly a bad thing, but this have falls short in the design department. Worse than that, the swipe gesture that's often used to quickly change dabs. Well, it doesn't actually work. That's quite a shock. Instead, you have to manually tap on these items, or we could use these arrows, which are from Windows XP times. Now, I honestly have no idea what these guys were thinking. This is a prime example of an app that was made by developers and business people know designers with involved, I promise you that in the top right, care to guess what that icon does. Is it additional information about the restaurant, maybe a share function, Add to Favorites? And the answer is, I don't know. When I tap it, nothing happens. It doesn't have a downstate, so I'm not sure if it actually works. But moving on, the checkout is also laughable. Everything is randomly thrown together. I think they wanted to center these texts layers, but everything is off. Try as you might, you won't find many imaginary lines. Nothing is aligned. Oh, and this deliver the icon, takes the cake. I changed my mind. It's a two out of ten, another four. Okay. Let's move on to take away.com, which is a company that's buying delivery apps left and right, does nothing blocking us. Like it was in the lives case where you couldn't see anything unless you put in an address with an S for the location, for the GPS permission. So the app basically wants our location and immediately a list of restaurants is going to pop up. Now, I personally ordered a lot of foods, so I'm actually quite a heavy user of these apps. Takeaway is not one of them. I don't like it and let me tell you why. Everything is confusing. Nothing is where I would expect that to be. Sure. The restaurant listing is lovely. Nice, clean logos on the left. Clear the bold titles on the right. Interesting icons underneath. But that's where the happy train stops. Can you tell me which of these two restaurants has a higher rating? Because if you've ever used booking.com, I think you know, there's a huge difference in quality. Between an 8.0 hotel and an 8.9 hotel. Or how about IMDB? If you like movies, 6.1 film versus a 6.91, night and day. What I'm trying to say is 4.5 stars for two restaurants doesn't tell me anything. I need more information in order to make a decision. Keep in mind, I have over 50 restaurants in my area. So this star system, without any other information, is not good enough. But let's go back to the design for the moment. I loved the orange. It really shines through and it has a nice zinc to add. It's fresh. It's grasp the icons of again, nice and lovely. And we have an interesting switch that changes the way the app works, either in the Liberty mode or pickup. That's well-executed. The fonts used aren't out of this world. And the same can be said about their icons, decent, but not great. Inside the restaurant, everything is well spaced out. But curiously, they went for this weird deal shade for the call to action color. This is quite odd. Now, there's a tab system that allows you to swipe between categories as expected by any mobile user. Some dishes have descriptions, but others don't. Regarding the photos of the dish. Same story. Now, the checkout is really lackluster. Lots of dividers, lots of gray, little attention to detail regarding typography. But then let's pause the design side. This would be a 6/7 out of ten in my book, the problem, like I said at the beginning, is the functionality. Just have a look at the card system. It's somewhere in the top right, but not in the action bar. No, it's actually an FAB of floating action button, so it just hovers about. That's quite unusual. Deb system has fonts that are way too big, and this makes it hard for me to know what's available in the restaurant. The left menu is actually on the right side. It's also completely custom. Now, I'm not saying that's a bad thing, but it's another thing that I have to get used to. These four icons above the restaurant listing. Again, quite odd. This is one app that hasn't even considered the official guidelines of material design. They didn't care at all. And it feels like it overall, the app in my hands, it feels clunky. It's hard to put into words, but it just doesn't feel right. Overall, this is a much better AB design than the live the previous one. But I don't think I would rate it more than a five out of ten, maybe six if I'm super generous. Now, let's go on to help menu, which has a totally different approach. First, I loved the onboarding process, meaning the first few initial screens that tell you about the app. Nice, clean design. And once you enter the app, it shows me a list of restaurants based on the address that I put in. Now, the listing is very easy on the eye. But there's a problem regarding functionality. You don't have any way to sort these restaurants. You have to enter each one and see what's what. And this is the vibe throughout the app. You have to tap a lot to get to the finish line. A lot of clicks in short, where some apps wants you to arrive at the checkout phase and four tabs or less. Here that number is easily doubled. You have to put in a lot of work. When you tap an entry, this is what you get. Again, lovely design. This is an eight and my book from a design point of view. Here's the restaurant's menu. We have a two column approach, but I'm not sure if this is the best choice. Should we get to see more items? But the luck isn't all that great because of this height. It feels too small. It seems unnatural. It feels like something is off. And the fonts, they've not ready there. It all seems thrown together. Now when dishes have photos, it's a bit of experience, but overall, this is a mixed bag. The floating action button is confusing as well. I'm not too sure what's up with this button. After some investigating, I do believe that this allows me to do a group by whatever that is. Basically, it's something about ordering with your friends. But why place it so front-and-center? Anyway, the background is a bit too strong, the gray a bit too dark for my taste. It stands out too much. The dapp system looks nice enough and the icons from the ActionBar are interesting as well. It's difficult rated in some parts it's a seven, maybe even an aid. While in other bonds, is it the other four foot? Now, let's give it a 6.5 and move on to the liver. But we're gonna do that in the next clip. Thank you. 11. Analyze the app’s competitors – Part 2: Welcome back. We're now at the liver. Do, let's analyze it and see if this is a source of inspiration. The first impression is great. The topography is spot on, it has character, it adds value to the design. It's easy to read. The next thing that I notice is the horizontal card system that's used to showcase feature the restaurants. The shadow is pretty strong, considering the background seems to be pure white, but I do like it. Up top. We have some type of ad, but notice how nicely it stands on top of that diagonal line. I also appreciate how they've used that small icon in the action bar area. Sure, it's wasted space, but it shows they care. It's all about branding and making sure that you know that you're in their app. You're then the liver though. As for the listing itself, I love how the delivery time is carved into the photo. I appreciate the hierarchy in the listing. I think that's very well-executed. We have the title in bold, various tags in a smaller washed-out color. The delivery time is set aside and has been given quite a lot of real estate because of its importance. And finally, we have the rating system and percentages. But what I truly love is this splash of color to do the emoji. Now, another way of translating the hierarchy principle inside the listing is this. You know, where the luck, you can easily scan various areas and know what's important and what's not. That's the hierarchy principle. The content is easily distinguished and this makes for a great experience. It feels effortless. Now, if we switch back to the live, we can see that everything is basically bunched up together. This feels crowded and basically bland, boring without any taste, even though it features just about the same amount of elements. Now, going back to the liver, though, this app doesn't seem to follow the material design guidelines. At the top, there's no tab system, nor is this irregular the action bar. Instead we get to dropdowns, which are very uncommon. In the most recent update. They got rid of them and I'm happy they made that change. The size of the cards is quite generous. Well that improves the impact of the app. You can only fit about to restaurants inside one screen. And the second one is a bit cut off. Now, for the small city, this makes sense, right? But for the larger ones with loads of restaurants, it's gonna be quite difficult. Basically after the six or seven listings, you're just gonna get bored. Now, the photos make a big impression and it's definitely the best looking gap out of the bunch. But I would love to see a bit of use of this space. Will see what's possible when we start designing. We also see a bottom bar, which includes the search feature. Now, okay, pretty good. What's interesting is the color scheme, white and Thiel, nothing else. The content is left the shine, probably because the pictures are quite heavy in detail. That's quite smart. And probably we're gonna do the same in our own design. Even more so considering the fact that most restaurants don't have great photos of the food. In most cases, the photos are dark, the plates are busy and the colors aren't usually flattering. Again, you can see the live for that. The difference is night and day. Back to the initial screen, we have an extended floating action button that helps you fill there. This is well-executed, but once you tap it, you're going to see another sign that takes this app to a nine out of ten, if not more, superb icons that are in tune with the abs vibe. We get beautiful icons that are in tune with the apps of vibe. Nice images underneath with great contrast for text. Clear call-to-action button. There's little to say on the negative side. Going inside the listing, we see the restaurants photo at the top and all the menu items are in the scrollable list. No tab system to speak of. The fonts used are easy on the eye, then you can easily tell what's what. I don't like. The fact that there are no thumbnails for the dishes, especially since there's enough room on the left side. On the other hand, it does make it quite airy. It does feel like it has enough reading room. Okay, now let's add something to our cart and see how that goes. Okay, we get a sticky bar at the bottom that shows us the current basket, and it's separated by a shadow at the top. It's curious the button has a shadow as well. I'm not sure that I agree with that. Anyway, the checkout is another strong point. Everything is easy to follow and they've used these cards intelligently, a bit heavy handed with that stroke, but still good work. Overall, the app looks lovely and that's because its elements are the well spaced out. Their fonts are nice and interesting and the content is left to shine. A strong nine out of ten. Let's move on to Food Panda to see another bulge on the same subject. Here, I immediately recognize the same one colored style, and this is used to draw the user's attention. If you can tap it, then it's pink slash red. I do like this style because this guides the user without making him think. The first impression is that this is the best designed app out of the lot, 9.5 out of ten. The main difference between it and the level is the atmosphere. That's a bit friendlier, while this is a bit more professional, let's focus on the listing though. There's more going on underneath the photo. So this does look a bit busier than the liver to the fonts used are, okay, but they lacked that special node that sets them apart. Let's quickly go back to the liver do and check out the delivery time. Notice how these numbers stand out, especially the ones. Ideally, that's the type of personality I'm looking for in my typefaces. Food Panda also has a floating action button, probably to help you check out. It's clear enough. The ActionBar is a staple of how it should be done. It's well-defined, it has proper hierarchy, well spaced out. If there's one thing that I would add is the fact that I wouldn't have liked the search icon to be left aligned with the hamburger menu. That would have made it perfect. Still, overall, this is one of the best ones I've seen so far. Let's move on to the restaurants listing page. Here we get tabs that have placed underneath the restaurants main photo. This looks nice. It's functional, but I'm not in love with the star system as it's shown here. I think it gets lost. As for the actual items, that spec ratio is a bit odd. The photos are way too tall and that's gonna be a problem for the most restaurants. When that other antennae thumbnails. It's another thing though one could argue that this is to plane two basic. We're going to have to find a good solution in our design when it comes down to it, neither of these options work for me. Deliver that was simply abandon the idea of showing a photo of the dish. But in other Wireframe, we do see it as a requirement. Overall. This is tied or maybe slightly behind the liver though. Let's call it the nine, maybe an 8.5. Now, the thing is I could easily carry on, but I want you to explore some of these apps yourself or find similar ones. The goal is to understand how they tried to solve various issues. I want you to tell me what you like and what you don't like about them. To sum this up, the conclusions of this lecture are the following. We should use one single beautiful color in our app and let the content shine. We need to be careful about the aspect ratio of the photos in the restaurant listing. We need a great looking font that add something to the design, something with personality. Finally, we should do our best to include at least two complete restaurants in the initial listing screen. As a tip, the more apps you see, the more the inflammation you're going to get. This process should take you at least 2 h. But for time considerations, I had to cut it short. Please. Don't be afraid to be ruthless in your comments. Your goal is to pick apart every component and see if it's something you should avoid. Or on the contrary, maybe use it as inspiration. Take a lot of screenshots and put them side-by-side so you can easily go back and forth. Okay, Let's continue. 12. Create the layout for the first screen: Welcome back. Did you explore the competition for yourself? Hopefully you've gone through several labs on your own phone, or at least you've looked at the screenshots I attached to the previous lecture. Now, it's time to start Figma and create a new project by clicking here, we're going to take this low, but if you still find it difficult, I do have a more beginner friendly course on Figma. If you can't keep up on your second viewing, it might be best to watch that course. Okay, let's click here where it says Untitled and rename it to add delivery. Now, get the Frame Tool, hotkey f, so we can set up the first screen. Now, the settings are based on material design to entry, to keep things super simple, go with 720 by 12, 80, whether these values from, well, basically I'm doubling the values from the old Samsung Galaxy S Then. Now why doublet? So it will look better when you review it, when you send it to your customer, your client, the other code there. So you can see everything nice and crisp without getting gold glasses. So that's the only reason why we're doubling get. It really doesn't matter for the coder or for the client. It's only a visual thing, right? The coding process is not affected in any way. More on that later on, but trust me, it doesn't affect anything. It's just a visual preference for 2020, 320-20-4720 by 12 80 is totally fine. Next, please find a wider frame that's attached to the course and drag it in, import that control Shift K or whatever you wanna do. Place it to the side of the first screen. Ideally, you should always have this shown on the second display, but I'm going to keep it here during our step-by-step process. Okay, So what's the goal? Well, we want to set up our layout, the foundation of our project with no details. I repeat no details. We want rectangles and texts layers in their simplest form after the first few screens, then we'll start to experiment with various colors, fonts, and various details. So let's start off with the first one where we're going to need the apps logo. And of course, it's attached to the Gore's. The icon is not styled in any way, nor does it have any texts. So this is going to help us keep it in line with the rest of the design. So that's a good thing. I'm going to center it and place it in no particular position at the top of the screen. Next, we're going to add the location field to do a rectangle. Hot key, click and drag. When we're looking for the specific sizes, use the properties panel on the right side. For this one, let's say 600 for the width, something like that. That's the W here. And for the height, let's go with 80 pixels, something like that, rough estimates. So this is not the final size because that comes in the styling stage later on. Okay, I'll always going to center everything in the frame to the align horizontal centers command. This is it right here. Please get used to it. And these other ones right here, these guys are your new best friends. We're going to use them a lot just about every single time we do something inside the frame. So remember to use them. Make the rectangle a very light gray by using the fill area in the properties panel. We want great contrast for the text layer. If you're using a laptop or a low-resolution, remember that this panel is scrollable. Okay, get the type tool hot key D, and write enter your location. So that's enter your location. Now could we use more advanced features that figma has to offer? Sure, totally. But again, this is not the right stage for those fancy things. We're going to keep it basic font, the size. Let's set it to 20 and center it inside this field. Basically the idea is that we're really making the wireframe, but we can actually edit all those fields. On the right side. Let's add another text that says GPS. Use Control D to create a duplicate. Place it on the right side. Now, why not an icon? Because we don't want to break this flow. An icon is a small design detail. And that's not what we're working on right now. Okay, we need a submit button, so let's type in just that submit. Let's use Shift a to add an auto layout this time around at least one fancy feature, right? I'm going to enable any gray fill. Now, you might ask, could we have used the frame for the location field on auto layout? Yes, of course. But there's a bit more to unpack there. I would rather keep it as a standard rectangle so we can focus on the overall thing for the size of the button. Let's change this field to 90. This will make it much wider. And for the height 20, when you're done with that, centered it inside the screen. I can see that skip this step is next, but we can have a simple text layer for that. Remember to hit Escape to finish editing your text layer, this item won't get a button, it won't get a rectangle because we have one laptop plus we need another one for Creighton account. Go above the submit button, hold Alt and drag out the copy. One thing though, please look for this symbol on your cursor, not this one. This won't help. So this is what you're looking for. Now, drag it down and change the text to create an account slash login. So that's creating an account slash login. And as usual, you're going to have to select the frame and center it, not the texts. By the way, the text is part of the frame and it's already centered. No. Instead you want this frame centered inside the big frame, which I'll typically call a screen. Now, if you don't get it 100 per cent, no worries, that's fine. The thing is quite simple. If you control click the layer, you won't be able to use these alignment tools. So that's a clear sign that you didn't select the frame. But now when I do this, they are lit up. We can use them. Awesome. So overall, this is our first screen handled. Let's continue after a quick break. 13. Set up the foundation for the home screen: Welcome back. You can call the second screen, the home screen, because it's what you typically get when you open the app, assuming your log then zoom out by holding Control and using your mouse scroll, then make room and duplicate this entire screen. If it has room, Figma will automatically place it on the right side when you use control the awesome. Now delete everything inside that except the location field. This is a good chance to remember our proportions. So the status bar, according to Google Material Design has to be 720 by 48. So get the rectangle tool and add it in. Again, 720 is the standard width doubled, and 48 comes from the official guide. It's 24 dB, but again, we've doubled it, so that's where we have what? We're going to leave it, blank, rectangle any random color, and position it correctly at the top. For the location field, we can use this one to create the action bar, drag it up along with those texts layers, and we're going to resize it to 720, of course, by 112. So that's 112 pixels. Please make sure you change the color if needed. We want to see them as two separate things. Even though at the end we might have them the same color, we do want them as two separate ones at this point. Okay, now let's handle the text layers. So we're going to need the city filter and search. So city filter and search. The first one is for the left side, while the other two for the right side. This is one situation where you are, the speed is quite important. See, there's nothing too difficult going on here, but it does take time. So that's why you have to practice and take these steps seriously. You can't do advanced stuff if you don't master the basics like these ones here. For the drop-down, let's use the polygon tool. One of the few cases where you can actually put it to work, hold shift and start dragging. Now, that's going to give you a perfect rectangle holding down Shift. Then move your cursor to the side to rotate it. Basically we want the point downwards. I don't have any particular size in mind, just fairly small. Now k, Looking good. Now it gets interesting. Remember we want to display as many restaurants as possible without squeezing and cluttering all the elements. So let's start with a rectangle that's 600 by 400 pixels. As this will cover the most of the screen's width. And we'll also have a decent aspect ratio to begin with. Now, the actual size is going to be set up later. Okay, place it right underneath the action bar. For the content. We're going to use fake one, but not Lorem Ipsum. So that's Latin text. Lorem ipsum is just filler Latin texts. So I'm going to come up with something on my own for the title, let's go with whatever dessert have on next to it. Let's play something like this. Delivery time, whatever, 30 min. Right? As for the category, the brief says it's twofold. So it's one for the food type and then another one for the cuisine type. I'm not sure if that makes sense for me, but it is what it is. So the first one should be Desert and the second one international, I guess. Again, it really doesn't matter. We just want to lay out some information. So we have something to work with for the rating. Let's go with whatever, 92 per cent out of 24 votes. So this is going to cover all the elements according to the wireframe and brief. So please select everything like so and see if we can fit at least two of them in one single screen. Remember, that's an important requirement. And indeed in this case we can fit two whole restaurants, though this is just a rough draft. Nothing about it, There's precise. So we have to take it with a grain of salt. Now, let's sum it up. So far we've recreated the first two screens from the wireframe with the purpose of having something to work with. In the next few lectures, we've talked about being aware of the impact of our decisions. Specifically about how the entire app is gonna look like when we're going to have bins of screens with a strong out of the gate. I'm gonna see you in a second. 14. Sketch out the restaurant details screen: Welcome back. We need to move on to the restaurants detail screen labeled number three, where all the dishes are listed. So without any further ado, let's get to work. So copy screened them, but do. And let's start with a top-to-bottom approach by replacing the title with any random restaurant name. Let's call it majorly pizza delivery. That sounds Italian enough, right? Majority of pizza delivery, the drop-down and Filter have to be removed, but we'll keep the last one and rename it. This should say inflammation. This is gonna be an icon as well, but that's more at a later stage. When you click it, you'll gonna get the restaurants address screen 15 and the views that screen 16. So that's what's going to happen when you click on inflammation. As I said, we don't need an icon right now because we're still in the early stages. Okay, if we take a look at the wireframe, we can see we have some tabs, but it's unclear whether these are the fixed or of scrollable. We're going to start with a fixed version and I'm going to use something like breakfast, lunch, and dinner as my main items. Now, this means that tab design, so 240 wide rectangle is going to be needed for the active item because again, that's two for t times 3720. Okay, let's copy the action bar and drop it size to 96 pixels. Of course, please change its color so we can see what's going on now back to the size for the moment. So 96 is big enough from a usability standpoint, but small enough so it doesn't eat up way too much space. This is also the recommended value and the official guide, 48 dB. Let's remove the listings underneath because we don't need them. We'll create the first text layer after we've set our rectangle that shows us the active menu item. So grab the rectangle tool, click an input to 40 by four pixels. Use the properties panel for that. So this can be left blank for now, totally black, but make sure you place it correctly at the bottom edge of the tabs background on the left side, of course. Now, because this is a fixed tab, we're going to have to have in the visual texts layers. So not a single one with three, instead the individual ones, and the first one is going to be breakfast. It should be written in the default font. It really doesn't matter how it looks. But if needed, you can change up the color so you can see what's going on. Now we can quickly align it by selecting it alongside this layer underneath that. So that handles the horizontal alignment. Just like that. The vertical one de-select and then grab the text layer with the main background and then use the vertical alignment command, just like that. So this is going to give us a pixel perfect result, even if you can't really see it. Now the thing is, I never offset the text layer because of this fourth pixel layer right here, that would mess up things quite a lot, so please never do it. Okay, Now, the other items are going to be a piece of cake, duplicate with Alt and Shift, and then relabel as lunch center of it inside the screen with align horizontal centers. Awesome. Finally, for dinner, we have to repeat the process, but here's what we're gonna do. Now we're going to temporarily move the active tab to the right. We're going to align it like so. So this is where the frame really comes in handy. We can quickly move this guy without any problems, without having to select anything else. Okay, now we can obviously move it and then align that silky smooth. So far. Obviously remember to work along on your second viewing for the best learning experience. There's a lot to do. And if we don't maintain a decent base, this is going to be gauges. Okay, put it back on the left side and then we can continue. Let's have a look at the wireframe yet again. Keep in mind that this is not the end-all, be-all of our design. We can experiment with various logs if we have any ideas. But for now we're going to keep it simple on the first try. In this specific screen, that means a one card layout. If we're not happy with it, we can try a different approach. Though. I really didn't like the two column design that we saw in the previous video. Now we have to create an image folder. Let's start with that. An image holder or a thumbnail for each item. I think this needs to be a somewhat squared shape, probably a bit on the wide side. So let's start with a regular rectangle with the size of, let's say 225 by 1AD. Like I said, it's not squared, but it's not too tall because we saw, it doesn't look all that great. Place it 30 pixels from the dabs. The main thing with this image is the aspect ratio. Don't use something to extreme that forces restaurants to give you a super wide or super tall photos. That's gonna be trouble. Remember, the liver though, and food panda didn't have a good system in place. Wait for the title and description. I have something prepared in a notepad. The title can be an airbag. Well, for now, again, it really doesn't matter, but using something authentic makes a bit more sense. The description should be a paragraph text layer. So click and drag. Because we might want to change up the content quickly. The lines should be enough though we might reuse it to only do. We'll see if you want to use dummy text. I recommend lipson.com. This is the best place for it. This is fake Latin texts that just fills up this area. Okay. Going back to the listing, we need to have a price, let's say 14 bucks. This is gonna be the third line in this listing. So we have title description and then price. Next to the price, let's put the weight of the product, which is mentioned in the brief. So let's write the 150 g, okay, and right next to it, we're going to need an Add to Cart texts. Though probably this is gonna be a button, maybe an icon. Okay, Give me a second to sort everything out. I like to align everything precisely, even though it's not absolutely need that at this point. Ideally we want the clear imaginary path. What is the user gonna do is gonna look at the thumbnail than the price, then the title, than the product weight, then he's going to click on Add to Cart. Probably something along those lines. So we're going to try to make that happen to the size and color. Even though things are pretty much bunched them together. Let's wrap things up with a divider. We can use the line tool hotkey L. The width needs to be 656. You're going to hear this value quite a lot. And I'm going to explain why that's the case a bit later on. The height to pixels. This has to be placed 30 pixels from the photo, from the thumbnail. Ok, this is done. So let's group it and we're going to make a lot of copies. The idea is to populate the entire screen with clones to see where we're at. We get a better sense of things with just looking to see how many we can fit. We ideally want it by-products, but with getting about four and a bit, now, I can live with that. Plus we might be able to gain more space when we start refining the layout. In the meantime, let's have a quick break. Thank you. 15. Design concepts for the location screen (1): Welcome back. It's time to get cracking without food delivery app design, we have a solid couple of screens that are waiting for some attention. So let's start with the location screen labeled number one in the wireframe. And the first idea I want to try out as a full background image, which is a popular choice in this niche. To find great photos, totally free ones, use unsplash.com. If the project has a decent budget, you can also use Adobe Stock, which is absolutely fantastic. Let's stick with the free one though. Here. We're looking for the food and we're going to download everything that sparks or interests. Ideally, a top view image is probably going to look best, but I'm going to keep an open mind about it. Once I see something that's interesting, I'm going to hit the Download button. So the process is simple. Choose several photos and save them on your computer. I already have some selected, so I won't waste your time, but I promise you I chose them exactly like I told you. I labeled them 1-6, so we can easily work along together again on your second viewing though. Now you could drag them into Figma, but there's gonna be huge, that's not a good way to work. So this is what I propose. Grab the rectangle tool and add one to the frame, random size, nothing in particular. Then from the properties panel, make it as big as the frame, 720 by 12 80, left and top align it so it covers everything. Now, that's because it sits on top of all the other layers. The effects that go to the Layers panel and find that it's highlighted so that helps click drag and move it down in the last position. We're going to use this rectangle to place our images inside that. To do that, we're going to use Control Shift K. But if you don't like that hotkey, just click here. This is right here, Place Image control will shift gate. This is going to open up a browser window and you can look for the downloaded photos. I always save them on my desktop so I can quickly find them. Okay, Let's try image numbered one. This is where the magic starts to happen with looking for an interesting image that provides good contrast for the logo and all the other actions that are available on the screen. So remember the word shows several plates of spaghetti and a few glasses of wine. So it's in line with the app, with the vibe. Now, the first question is, would the logo be white or a solid color? If we go for the white, we're going to need to darken this image. If we're going to make it a solid color than the background, needs to be as simple as possible. So let's see what's what. First we're going to do a color overlay, so to speak, for the opacity, I'm guessing 50% or so, that should give us a decent contrast. Remember the idea is to test things out, not to have a perfect luck. Now let's make the logo white. This is another PNG, rather it's an SVG. In short, this means we can resize it without losing any quality. Plus we can change the fill right from the Properties panel. If this were a PNG, we couldn't do that. So that's nice. Okay, this is pretty good. Now what most beginners don't understand is that logos don't need to hit you in the face like a bag of bricks. Just think of what the liver that we did, albeit on the initial listing screen, they use the mini version of their logo. Okay, so back to our design. A dark background makes sense, especially since the textfield is probably going to be white. That makes sense. So let's make that happen. We're going to increase the rectangles coordinate radius to five pixels to make it look a bit better, a bit more modern square the coordinates are very 2005. Now for the buttons, we're going to do the same five pixels, but we're going to make them maybe a bright green, something like that. Just to see how irregular call-to-action would look like. Take your time with it and try to cut some coordinates by sampling colors here and there, all by using the properties panel on several layers. The idea is to be as fast as possible, okay, with the new colors, we have to change the text layers to white. And please don't forget about skip this step. It's there, but you might not see it too well. So changes color as well, maybe its position or both. And that the bottom of the screen, it might look a bit better. So let's try that. So the idea is, we can't judge this luck because we have to compare it to something else. Not to mention that these are just broad strokes with not doing fine details just yet, just quick movements. So we're looking for the general direction. And once we have something in mind, after the, we see that this looks pretty good, we can come back and refine it to perfection. So the logo might need to be raised a little bit, but not too much that it touches the top edge. Grab the Type Tool and let's write the live right under the Fed so we can get a better sense of things for the formatting. Keep the standard font, but make it bold. Let's see, 60. So fairly bag. Okay, this can work, but let's center it and let's try some other images in this version. Remember the hotkey is Control Shift gay. But first you might want to select the bottom rectangle, hold control, and click it. Just like that. We can now use Control Shift key to select the second image. Okay, let's put in the second photo and you're going to notice that the black overlay is gonna go away. No worries. We can still get a sense of what's going on. We can put it back in at the later point. So photo number two, it's a bit too empty to work. We need something rich, extravagant, and interesting to look at. This gap in the lower-left isn't going to fly, it's no good. So let's move on to photo number three. Okay, let's have a look. This is what some friends eating together. So that's a pretty good concept. But the aspect ratio isn't all that great. So we lose quite a lot of the photo. It's not all that clear what's going on. It could work, but I'm not certain. Let's try image number four. So let's see what's what. This definitely works. And I think it checks all the right boxes. I think it's a good choice and it immediately stands out. It has a top view. It features interesting multicolored food. Wood table has a nice cozy feel to it. Pretty good, pretty good. But let's not stop just yet. Let's keep going. So photo number five. Okay. This works well. Again, it's pretty good, but I think the previous one is a tad better. The main problem here is the food shown. It's an egg salad, where a lot of good audience expects good-quality food. We're not talking about up with management would not talking fine dining. So this an egg salad isn't the right look for that. Hamburgers past the things like that I think fit a bit better. Next, image number six. This has a rich, plentiful look, but I'm not in love with the food itself. It's too focused on desserts. We do see some eggs in the top side, but it seems to be leaning more towards deserts, more towards sweets. We can keep it as a backup but option for looks best so far. So let's bring it back in. Okay, when you're ready, please add the black overlay by hitting the plus symbol. Again, 50 per cent. I think it's quite good. We do have quite a nice contrast here. Now, this begs the question, what else could we do here? Well, the only idea that comes to mind is a pure white background or maybe a subtle pattern. That's maybe an off-white color, maybe a light gray. Now, I'm not going to do that because apps that are abundant and white, I usually high-end. Think about the Michelin star restaurant with a big fashion name, the likes of product. Those are the brands that can rock a minimalist design with loads of white and just a splash of color. In conclusion, right now we're going to stick with this concept photo number four then the 50 per cent overlay, based on what's going to happen in the next screens, we can come back and refine this design. I'm going to see you in a second. 16. Design concepts for the restaurant listing (2): Welcome back. Let's continue with the restaurant listing screen, which is the second thing they use it, It's gonna see this is one of the most important screens in the app. So we do need to experiment with different looks. From the get-go. I do want to see a version without a background, so pure white and one with a light gray that will provide good contrast to our listing. I came up with those ideas by researching the competition. And these are two very common styles. So basically white and light gray. Let's start with actual content. I've prepared this image of bank eggs for the restaurants cover image. I'm going to place it inside this rectangle by using Control Shift K, but we need to talk numbers here. The official material design guidelines says that we need 16 dB on either side, which means 32 Pexels in our case. Let's do the math. 720, the width of the frame -64, the two on either side, that means 656 pixels. So this is our rectangles with the same as our dividers after the EU, the sizes from the properties panel please center at once again, that's always a very much needed step. It will probably look better with slightly rounded coordinates. So let's go with five pixels for the coordinate radius. Let's hit Shift R, so we can add some guides. These aren't absolutely necessary, but I think they might help. Now we can drag out guides from the left side of the screen. Just like that. While we're at it, let's delete the second entry. We don't need that. Okay, so let's talk hierarchy. We have quite a few items here. And the question is, which is the most important one? Now, I'm going to have to say the title, but very close to it comes the rating as that's the main value of the app. Next comes the delivery time, which is surely a deciding factor. And finally, in fourth place, we're likely going to have the tags related to the food type. So these can be quickly used to filter similar food types and cuisines. The user can tap on them on either of them, and the list would likely reload with that particular filter applied with talking about the importance because that's how these items should be styled and placed, that really impacts it. So that's hierarchy. So for the first version, and I wanted to stress first version, I'm going to place the title and the rating on the same line because of what we just discussed, because of their importance. The tags can occupy the second row. And I'd like to try to place the delivery time somewhere over the photo similar to what we saw in food Bandar's app. Let's move this entire element 32 pixels from the action bar as well. That's if you haven't done so already. Now, whenever the possible aim for symmetry, it just makes the design look that much more polished. Clients, I've never going to tell you, Hey, you know, the distance on either side is that the two but from the top is 44. But trust me, the client will know this. Okay, now for the title, Let's make it four d pixels and in bold, the default typeface is totally fine with just looking for the rough idea. This is not going to be the main typeface. I can assure you, I'm just trying things out to see if that importance makes sense. So align the title with the left guide and leave about 20 pixels between it and the cover image. For the delivery time, I think I'm going to place a black rectangle on the top left side of the cover image. Its size? Well, something like 140 by 50 because I don't plan on keeping this text layer as it is. It's way too wide, way too long. So this is one place where we can change things up to make our lives a bit better. I'm going to shorten it to 30 Min from minutes. And I might even add the clock icon next to it at a later stage. Now we can make sure that this is nicely positioned and sorted. We need to change things up in the layers panel so we can have the proper order. But that's quite easy to do. Once you get used to Figma bit more, you can start playing with hotkeys. And that's going to help you quite a lot. For now. Doing it manually is totally fine. Next, let's lower the rectangles opacity to say 30%. This is really going to help us out. But the question is, should this be kept white with a black text on top of it or vice versa. Now, I think a black rectangle where it's a bit better, Let's try it out. So let's change it from white to black, obviously no border. And then let's switch to the text layer. This needs to be white, but change its way to maybe semi bold, so it stands out a bit more. When you're done, select both of them, incentive them if you haven't done so already horizontally and vertically, this item should be placed in the top left side, right, But why there and not someplace else? Well, I've seen countless apps use this location, so I'm just going to follow that line. Easy, nothing fancy about that. If most steps of doing it this way, Let's do it the same. Now, the tags can remain as they are, but we're going to left align them with the title. This is quite easy because we have that guide for the distance, again, 20 pixels between them. I think that's totally fine. Actually, let's make them a medium gray, something like 777. Now a hex code has six characters, but if you fill in the first three, the program will put in the three automatically. As for the rating, I want something similar to deliver drew. A Smiley face is in order. Now at the best place for the icons is Lab icon.com. But please be aware that most icons need a subscription. I won't show you how I search for the Smiley face because there is nothing special, but you do have it attached gate. Here's the end result. You might want to know how to choose awesome looking icons, but we'll get to that later. For the size, 40 by 40 is a good way to go. Usually I would go for the smaller size, but it's a pretty happy Eigen. I quite like it. So why not show it off? They said ten pixels away from the text. By the way, I think it's best we make the percentage bold and green because that's the most important part and the listing, they come in it than the line everything nicely. Keep these two on the same line as the title, but have the element touch the right side. Okay, We're making great progress. But it's nothing to shout about just yet. Remember, this is just the first version. Let's handle the top part though, because it's actually throwing me off. I want to judge the card design without any distractions. And these gray rectangles aren't great look at. So let's handle that in the next video. 17. Set up the status bar and the action bar: Welcome back. I liked the judge of design in context. Now, could we isolate everything and just focus on this card, the loan on this listing? Sure. That we could, but why would we that's why I want to handle the action bar and the status bar so I can see everything in context so I can judge the design in its entirety. The first option is a very clean look. Both the rectangles should be white, but we'll have to add the drop shadow to the action bar so it won't get lost. This is far better than using the stroke, so don't even consider it. Now to enable a drop shadow, go to the effects area and click on this plus symbol. Then use this icon to change the look. Now for the settings 2.4, but I think the default opacity of 25 is a bit much. Let's drop it to say 15% and that's it. Good to go. Nothing special. Now, moving along, we're missing important elements from the status bar. So here's a file that can help us out. This resource is attached and I expect you to use it in all your projects. The idea is this, there's nothing special about the status bar. It's basic and it's super simple. We shouldn't waste anytime where they're just copy-paste it and be done with it. Okay, let's replace the city texts layer with San Francisco, written in bold, 40 pixels, pure black. This is the myth of the restaurant's name. It should look the same. Center it with action bar. Left. Align that with our guide and we can continue. As you get more and more familiar with Figma, I suggest you learn the commands to align horizontally and vertically. They really help. Oh, move the drop-down icon to if you haven't done so already. Finally, for the sake of time, I'm going to skip ahead and I'm going to show you the icons I've selected for this right side. These should be 40 pixels as well. Centered them inside the rectangle. As I hope you'll seeing using these alignment tools is like drinking water. You have to do it quite often if you want to feel good. So both icons for the pixels and centered, but what about between them? Well, let's go with 40 yet again, so fat fingers won't be an issue. Accidental clicks are quite annoying. Oh, by the way, we forgot the hamburger menu on the left side. Give me a second while I handle that. Why is it called the hamburger menu? It's three lines on top of each other. So I guess it looks like a hamburger. No idea. Now, to do the magic of editing, he adds a lovely icon for it. Everything is taken from flap icon.com and you have them attached, but please don't use them for your real projects. I attach them for educational purposes so you can follow along. You will need a subscription to use lab icon for your clients. Now, I'm going to use my guide to position it correctly and I'm going to leave 30 pixels between it and San Francisco. Again, make sure you use align vertical centers on it. You might ask, why didn't I use what the pixels between these two items to mirror the space on the right. And that's because the brief tells me that this is going to show the user's address when he's logged in. So I'm going to need as much space as possible. We have one final thing that needs sorting. The drop-down arrow should be resized to something like 20 by ten. And I think we should place it as close to the city as possible. Now, 30 pixels would look better, but I'm going to stick to ten pixels. Yeah, I'm very happy with that. Now after all is said and done, please select all of these items and center them inside the action bar. If everything is in order, nothing should move. Well, maybe one or two pixels. Right? Now, this is our first design. Let's select the car, then we'll make a few copies. As I said, I wanted to judge it in context. So I'd like to see the entire height occupied by restaurants. Overall. It's a rough draft, but it has all the required elements and we can begin to play with them and come up with at least two of the variations. I'm gonna see you in the next lecture where we're going to do just that. 18. Restaurant listing alternatives (2): Welcome back. In this video, we're going to explore several options for this card. We're going to duplicate the entire screen, so we're going to keep things nice and clean. This will also help us compare all versions. Now before we start, there's a lot of advanced things that we can do in Figma. Things like components, variance, auto layout that can give us amazing flexibility and power. The issue with them that confusing for beginners. While we could spend a few hours talking about them and doing various small exercises that would seriously delayed the app project. So my advice is this. Let's focus on the essential design principles. Later on in the course, we're going to talk about those more advanced features. Sounds good. Let's go for it. Okay, The first thing we should try out is a very light gray background. And I've actually sample the color from Dribble that has a tint of blue in it. And the color code is f, z though, F1, F eight. And it's very subtle. Please be aware there's no rectangle set as a background. This is the color for the entire frame. The text doesn't look great on this gray background. So let's create the base rectangle for this card. Here's the process, select the image by clicking on it. Next Greater copy by using Control D, D as in duplicate. Move to the Layers panel and select the bottom one. Okay, Now let's increase the height to 500. At the moment, it doesn't make a whole lot of sense. But here's the thing. Remove the background image as the failed by using the minus symbol. When that's done, we can add the regular, the fill color, make it pure white, of course. And basically that's it. We now have a card and the contrast is much better. Now sure the text doesn't fit and did other few things to fix, but this is the process. So again, duplicate, select the bottom layer, increase the height, and then play with the fill color. Okay, back to work. Let's select the image and change the coordinate radius at the bottom. We've previously used this field here, but to control individual corners, we have to click here. My advice is you click on the first one and check the icon. This will tell you the story of what your logistic. In short, we want 5500. Now we can reposition the text layers, select both these items and move them 30 pixels inwards. As for the distance on the vertical axis, that doesn't matter all that much at the moment. But try and place them somewhere near the middle of this guard. The right side, same thing, 30 pixels, but keep this in line with the title never sent of it. In this situation, this is a matter of knowing how to use Control and Shift. Let me clear things up. So hold control and click on the title. Now obviously that's selected, assuming we wanted to grab desert as well, we have to hold Control and Shift, check the layers panel for that. So remember control-click helps you select one single layer. If you then want to pick up multiple layers, use control shift click. Just like that. Keep in mind we're going to remake all these final adjustments when we get to the typography lecture, when we're going to actually pick out fonts. Okay, After the bit of tinkering, this is our first scarred, this is the first alternative. Now, looking at them side-by-side, I think it's an improvement, but overall, I'm not happy about that size. So let's duplicate the screen once again and try something else. Make sure you have enough room. The sky is the limit in Figma. Now let's say we shrink the car down by say, for the Pexels. So that means that the base rectangle has to be for 60 and the inner one needs to be only 360. Give me a moment to use the properties panel. I'm fast, but I'm not that fast. Okay, we're good to go. Next. We need to handle these texts layers. And this is where you have dexterity really kicks in. So rapid-fire, select them and move them up 40 pixels. So that's four types of here, the up arrow key, if you hold shift as well. Now while we're here, let's add a splash of color to these tags. They look boring as they are, plus you wouldn't know, you can actually click on them. So let's see what we can do. Any color would be fine, but I would rather not use the same green from the rating. I'd like to avoid any confusion and make them stand out a bit more. Red or orange is the complete opposite of green. So let's go with something like that. Now, the exact color code really doesn't matter because we're going to set up the color scheme of bed later on. We have still on the first option regarding the header. Okay? Right. I'm happy with the new card. And I have to say that I'm pretty happy with the new aspect ratio of the photo. It's not as tall as it was before, but there's still generous and it looks quite nice. Remember the level that we had the best vibe. And I think a lot of it was it's eerie feeling. Everything seemed to have more than enough space. Nothing was cluttered, nothing was busy. So I think we're going to leave it like that. Now, let's think what else can we do? Let's make a copy and less thing. Now, we could give the tags are solid background color to show that you can actually tap them. You can click them. Meaning does an action available to the user. But because they want the rating to have its fair share of attention, I think I'm going to move that above the photo. So let's get to it. Move the rating and the bottom-right coordinate of the photo. Something like this. Obviously we can't see it, but we can add a fill by using auto layout shift. They write the text and the emoji and select the right. Use shift a to create an auto layout. Then as before, enable a fill. Pure white of course, squared off, it doesn't look great, but we can change that by putting in a large value here. Then let's add the padding of say, than both horizontally and vertically. This should do the job. Nice and easy All to do auto layout. And in case you ever change the text, make it shorter or longer, the field changes as well. This is one technique and Figma that's actually really worth it here. And by the way, having a white background, this is one of the easiest ways to get great legibility while not making any compromises. Leave 30 pixels from the bottom and right edges. As you can see, once I set up a value in my mind, 30, in this case, I'm keeping it. Okay. Call it rating in the layers panel in case you want to stay organized. That's a bit difficult to do while filming. So I do apologize for that. I was really focusing on actually teaching you stuff and my layers panel isn't all that great. Let's take a quick break and we'll continue in a moment. Thank you. 19. More variations for the card: Welcome back. Let's handle the tags. We're going to use auto layout. Once again, the width is going to vary depending on the length of the word. But we want at least 20 pixels on each side. So let's be generous. That's one hotkey that I love. So make sure that you remember it. Okay, this should be orange slash red. But don't worry too much about the shade. Just make sure that pure white text is really going to pop. It's really going to stand out. Now, I'm going to move pretty fast because this is standard stuff. You should be able to follow along. But of course you have to pause the video often. The coordinates have to be rounded to the max to match the rating. I'm starting to pick up speed, but hopefully you can follow along without any problems. Now, here's the thing. The height of the card is not good enough. We simply can't make this work. Even if we raise the title just a bit, I suggest we change this up. Now, speaking about sizing things up, I think I'm going to leave 20 pixels between the tags. And after all is said and done, I think this is how it's supposed to look like. The thing is not all your ideas are going to be great and that's totally fine. What's essential is you create them as fast as you can and then judge them by looking at them side-by-side. Let's remove the delivery time from the top left corner. This should be placed on the same line as the restaurant's title for this variation. Let's write the liver, the end 30 min. The default font is just fine for now, what we're looking for is balance. This, this card look great. Now, I can say the diamond love with it. I can say that this rating on the right side is perfect. At the end of the day, Let's zoom out and see all the options. Now, to give it the fifth chance, make sure everything is buttoned up nicely. If you spend a lot more time on our design, you'll obviously be more inclined to like it better. But we started here with no background and very large cards. That's clearly the worst one. The second version looks nice, but the third one is definitely better due to the smaller card size. I also liked this dash of orange. But when I compare these two, I think solid tags where a mistake, this is too busy and unbalanced. Still it was worth doing it, but now I'm not going to pursue it. I'm pretty confident it's not okay. I like the floating rating, but we'll have to work on it some more. So let's take a break and we'll continue with our variations and just a few moments. 20. Final restaurant listing variations (2): Welcome back. I hope you're having fun and that you are working with me. But of course, on your second viewing, at this point, we've played around with various options and we know for certain that we want to stick with this version but without the tags. So let's do this. Create another copy of the latest art board and remove the orange rectangles. The easiest way is to right-click and choose remove auto layout. Or you could just redo it whatever you want. But this is a good chance for you to know that you can always remove all or layout. I like that color though, so let's apply it to these texts layers. We removed auto layout, but we still have an extra frame in the layers panel to remove it, right-click and choose Ungroup. This goes for both of them. Now we're going to divide them with a hyphen and clean things up. This divider can be black or something like that. As for the distance between them, well, I say anywhere 15-20 pixels. The question is, should we keep this position? I think we can play with it a bit more. So here's my idea. Let's move the delivery time underneath the title because the brief says that this is a very important factor for the users apps. Now, this means that the eggs will sit on the right side as before, 30 pixels from the edge. Quite soon will start picking fonts and this is going to look much better. Now, during the break, I took the time to find the clock icon that matched all the rest. Here are theirs and you can go with 30 by 30 or 40 by 40, whatever you feel works best. The smallest size is fine because it's not an action, you can't actually tap it. 40 pixels is what we used in the action bar. But that's more appropriate because you can actually click on them. You can tap them. Overall, I'm gonna go with the lower value because of that. So take a moment and arrange everything between the clock and the time ten pixels, please. Everything needs to be centered vertically. The clock icon, the delivery diamond, finally, the categories. And as an optional step, we can shorten the texts to delivery 30 min if you haven't done so already. I think that's clear this day it's a great option. It's much shorter, it's way better. And we could even remove delivery because we have that clock icon. I think that's still make sense. Single clock icon and 30 min, I think it gets the point across, but we're going to leave it in this version. Finally, the rating design is quite nice, but it's covering a significant part of the photo. So here's what I propose. I got inspired by the liver due. So I want the rating to sit on this edge. This should also balance things out. The thing is, we're going to need the drop shadow because it's white on white. By the way, this is called the pill button, by the way, PEL, as in medicine, because it's fairly round. They good time to place it 30 pixels from the right edge. But here's the thing. Even though this is not the final font, I think we need to play with the padding. I don't have anything specific in mind. It's a method of trying things out probably a bit wider, probably a bit shorter. See what you like, play with it and see what looks better. I think there's too much empty space on either side of it. So let's resize it, make it the bid, neither were they good time with it. In the ideal version, this shape is as wide as these two tags. But of course, the tags that are going to change based on the actual words shown here. International is quite long, but other categories may be short there. But yeah, that would be the ideal situation having the same width. Now, overall, I think this is a marvelous improvement from the previous design. It's much better. The shadow though, it may be a bit too strong, but once we don't it down, this is going to look quite lovely. I think six per cent opacity is just fine. Be aware that the opacity is controlled from this place. You could also use this area, but I do prefer this field. It's easier. Okay, now looking at things, zooming out, I believe this is the best version by far. What do you think? Let me know in the comments section. And of course, you can always make up your own version. Now think that once this is polished, this is going to be a strong 8.5 out of ten, and that's more than enough. Let's take a break. 21. Creating options for the action bar: Welcome back. Let's get back to the top area. For the moment, we created something very clean. But is this the right way to go? We went to the width pretty fast because we wanted to analyze the cards underneath without being thrown off. But I think we can explore some options. Let's make a copy, make room, and let's get started. So the first thing that comes to mind, and this is very creative, is to use a photo for this entire, their idea for the action bar. And it can be a picture of San Francisco since this is the current city. So let's remove the status bar fell and expand the action bar and that region. Now, why do we have to remove it? Because it's much easier to add a photo inside the single rectangle. And if we like it, we can talk to a coder and see how much effort it would take to make it happen. I know it's possible I've done it before, but I'm not sure how difficult is going to be. Now, we'll have that discussion if we love it for now, Let's see it in action. So I pause the recording and I went to Unsplash to get several photos of the bridge. Here they are, and we're going to repeat the process from the first screen. Remember the hotkey control Shift key to insert the photo inside the rectangle. So here's the first one. We have quite a few elements that don't work on a colored background. So in this case we're going to have to make them all white, please. Nothing else. Just wight nearby the yellow, orange, lime green, nothing like that. Those are the devil's worst beds. Now, I'm just playing around, but I'm serious about this advice. Only use white. Now, this isn't looking all that bad. We can obviously add another fill with a low opacity to improve the legibility of this text to get great contrast. But for now, let's keep going through the photos. By the way, in case you want to do some quick edits, you can actually do it from this place. Just click on the thumbnail and you're going to have loads of options or double-click on the photo. That's not the point of this lecture, so I'm not going to dwell on it, but no, it's an option. So again, to edit the photo, you can de-select everything, then select the photo and check the fill. Click on the image. And then you're gonna get all of these settings. Basically in short, you have a lot of freedom. This is not Photoshop. We do still have quite a few options. Okay, Let's cut it short. In essence, I'm going to use image number six, but you can check out the other ones by itself. But you have to think about the strategy. Do we really want to bring a lot of attention to the ActionBar? The thing is, we love the simplicity of the liver though, right? This takes us away from that. I don t think it's worth that. Some of these photos look okay. But that's it. They're not amazing, they're not fantastic. So I think we shouldn't complicate things. Let's trash this idea. Let's remove it because we want the focus to be kept underneath, right? Not at the top, instead underneath. But still, let's try out. Another option may be with a solid Heather, write something different, not White. So on a new copy, I'm going to start experimenting with some bold bright colors, something vivid. Right at the top of my list I have green, orange, purple, and blue. Now, I'm going to stack them side-by-side so we can give each of them a fair shot. Now, give me a moment while I zoomed through all of these versions. I'm going to speed up quite a lot. But in essence, there's nothing special going on here. Plus I don't have any particular color-code in mind. What I do have is a place in the color picker, and that's a bit lower down in the top right side corner. So not completely in the coordinator because that's neon territory. So no neon colors, but just a bit lower down. Here they are. Now the question is, do you have a favorite? Do you think that any color adoption is better than the pure white one? Because from where I'm standing, I think it's best that we keep it white. The photos are rich in color. And basically with asking for trouble here, it's not that I don't like them, but I think why does a much better option? I think it's a bit more refined and more than tune with the spirit of the app. Now, if you think otherwise, continue with you have choice and show me your end result. This is a method of taste, but also how we interpret the brief. This concludes the lecture. Take a breather and I'm gonna see you in a minute. 22. Design concepts for the restaurant details (3) screen: Welcome back. We're ready to move on to the restaurant details design. Let's see what variation we can come up with for this green. But first, let's update that. These rectangles have to be white. And the one that holds our tabs, knees that drop shadow. Please remember that we have specific settings for the share though, and that's 2.4. As for the opacity, a thing that was 15 per cent, but you may want to play with it. This is quite important when dealing with shadows because it may show up at the top of the rectangle if you're not being careful. So make sure that you check the settings. Okay, let's move on to the status bar. In the past I've used PNGs, so actual photos for the status bar, but it's best that you use an item that's adjustable. The format that you're looking forward as an SVG. Or you can simply copy, paste this item from any freebie from the web. Okay, Now, moving on, we're going to need to add some icons. I took a bit of time to find the matching back arrow and an information ALL, and these need to be placed exactly like in screen number two, all on the same line with an appropriate amount of margin. I think we might have skipped adding the guide to this art board. So let's fix that. Add any rectangle that's 656 pixels wide. As usual, the properties panel is the best way to go when you're looking for the specific size. Then drag out your guides. If you don't see this part, please enable your Lula's use this hot key. Okay, now remove that extra layer. It's as easy as that. This is one of those hacks that I absolutely love. It's quite simple, but it works. This technique came out of necessity and only a freelancer that actually values his time has this type of approach. If you see someone moving a guide pixel by pixel with this mouse, left, right, left, right. Then you know, he's far too relaxed. Wherein business. Place this info icon next to the guide. Okay, when you're done, please repeat for the other side, but take your time with it and make sure that you do it right. Of course, the easiest way to arrange these is to dry out the big box that encompasses them all. Then hit the Alignment command and you've made quite a big step. Leave 30 pixels between the arrow and the title. So it's nice and airy. The default font won't win any awards. We're going to do finishing touches in the next lecture. This is a bit risky, making it so big, but we'll get everything sorted soon enough. Now, the main idea here is to stay consistent. I don't like to use different values on different screens. Finally, for the tabs, Let's do this. Select all of them at once because this is the smartest way to work. Then change the orientation to center. This makes them stay put because my plan is to increase that size to 24 pixels. Plus we're going to change the weight from regular to bold. For the color, for the moment, black is totally fine. We've spent quite a lot of time arranging them with the help of that line that shows the active tab. I don't want that effort to be for nothing. So that's why we changed the orientation. Okay, let's move on down. Select the first guard and make a few copies. So this looks a bit more realistic. Take the line as an example. If it's not the right size, meaning 656 wide, we can quickly edit it with precision. Select that and use the properties panel type in 656 and move it into place. By the way, this is a great chance to use the x field as well. So x is the horizontal access. So if we type in 32 pixels here, that means the layer will be placed 32 pixels from the left edge of the screen. So x starts from the left side, y starts from the top. Now again, here's where we need to do some manual editing. Right now, Figma does not have a great feature that adobe XD has. And that's Repeat Grid. Well, not at the time of this recording. So to quickly change all of this content, we're going to have to do it manually. Give me a second while I handle that. This is a great chance to practice your speed. Please never, ever show you a design with the same content over and over again. Not to me, not your client, not to anyone. This shows that you are lazy and trust me, you don't want that label. This is not hard to do. It's a matter of going through the motions. So take the time and replace just about everything. And with that out of the way, we can continue. E.g. we can focus on Add to cart, which is the main action in this green. I've looked long and hard and I've decided to use this plus symbol. This is from flat icon as well. As I understand that when you tap this entire region, so this entire area, the product automatically gets added to the cart. While we've not in the styling phase just yet, please change the color of the divider so it won't be as distracting a very light gray, the likes of ddd should work very well as a temporary solution. And yes, by the way, you can add leathers in this area, a HEXACO, the color code can contain not only numbers, but letters as well. So DDD is an actual color code. Now, the hierarchy from screening but do has to be shown here as well. So I'm going to make the title, the price, and the weight bold. We can set them to 30 pixels. Though that may be a bit of a squeeze. Once we get rolling, we can get a better sense of all the spacing. Move the title down by the way, if needed, though, that's an optional step. Ideally, the title should be top aligned with the photo, with the thumbnail on the left. The price wait, an icon should be bottom aligned with the thumbnail, but as an entire unit, so everything is sitting on the same line. In the meantime, I wanted to remind you that I want to see two designs from you. One, a perfect replica with exactly the same icons, font sizes, and colors as you see in the course. And another one that's u alone. That means new photos, new fonts, new icons, new layout, the works. I also want to see different content. Don't post your work exactly like what you see here. Choose different restaurant names, their eggs, prices, recipes, et cetera. Now, before we continue, please make these two menu items. Grade 777 is what we use so far. That's because we wanted to show they're not active, they're not clickable. Okay, now let's see what we can do here. I have two big directions. So one is to use a photo instead of the action bar, which might work better than it did in screen number two with the San Francisco Bridge. And the second thing is to provide the client with a scrollable tag version instead of the fixed three tab design. So let's do that in the next video. After a quick break. 23. Variation for the restaurant details: Welcome back. Let's create a copy and get to work on the first variation for this screen. Let's remove the status bar rectangle and raise up the action bar. And that's because we want to add an image in that region. But here's the thing. We can make this area even bigger, though it's not as common. We do have that option. From my testing. A height of 270 pixels is going to work fairly well. So that's 270. The tabs will of course have to be moved underneath along with all our dishes. Remember, work smart to better see what we're working on. Change the background color to something like maybe gray. This way we'll know where the tabs need to start. The idea is to create something similar to Food Panda. They could time because there are quite a lot of layers. I always recommend you zoom in and out so you get a better sense of what you're doing. With this change will no longer be able to fit five complete dishes, but I think four is good enough. Now we can start building on top of this layer in the action bar, we're going to add the restaurants cover the photo. In this case it's an image of a Beta. I already have something prepared. The hotkey control Shift K, or use the Place Image command underneath the rectangle tool. Everything in this area needs to be made white, including the status bar icons. This will take me a minute, but I have the magic of editing on my side. Okay, now, obviously we can't read the text, but let's add another fill. Pure black, of course play with the opacity, maybe 40 per cent, more or less, 50 per cent. See what you like. And there you go. Awesome. This is looking quite nice. Remember, right now within iteration mode with just banging out versions, creating version after version. Though the action bar isn't present per se, we still need two layers, and that's the back arrow and the dipole. Now let's drop the info icon because it gets lost in the mix. And let's move the rating elements somewhere in the middle of this part. That's not 100% required. But I think it's a nice touch, right? Because this is the cupboard photo of the restaurant. So I think having the rating here that makes sense. Pick up the rating from any of the previous screens we created. The drop shadow might need to be intensified, but it's not going to make a whole lot of difference. Even if you make it 50 per cent, the opacity of the shadow, it's barely going to be visible. And remember, we're using our computer, we can zoom in on a phone. You won't notice it. Trust me, when it's all said and done. This is how the variation is gonna look like. Now, personally, I like it more than the clean version, but it's all a matter of taste. I like to let the client decide it's really a coin flip. So I'm going to keep both versions in my pocket and we can move on to the scrollable dab option. Let's use the initial concept for it. So the scrollable tab is something from Google Material Design. It's basically one of two options, fixed, which we already have. Then now we're going to do the second one. When you make copies, these should all be side-by-side. Here the main difference is the menu items are placed on one single text layer and then pushed towards the right. Remove these two and come up with five or six food categories. I have something prepared in the node bad, but you can come up with something on your own. I'm just going to paste. So here are, there's, now there are two options regarding scrollable dabs. You could potentially just approximate that, wing it and simply align everything as you see fit. Or you could do it by using the official measurements, which is what I'm gonna do. First, I'm going to reduce the rectangle's width to one AD, which is the minimum according to the guide. So it was 240. Now it's going to be 1AD. Next, this has to be placed on 140 pixels away from the left edge, 10. For remembered how to do that, you can use the x field from the properties panel. Again, why E104? That's from the material design guidelines. Excellent. Now, regarding past that, my first tab, this needs to be horizontally aligned with the rectangle. But of course, that's a problem because the layer contains loads of menu items. So in this case, we're just going to have to approximate that. Now we could be precise by adding a rectangle on either side and do some manual back and forth. But it's fine to eyeball it. I have loads of experience, so I'm gonna do just fine. Now when you're done, please change the color, the Volga, the tabs to a washed-out gray. We need to show that inactive. The color code we decided on is 777. Now there's one thing that I'd like to address. You might be curious about the background and why I left it white. We could try an off-white color. We already have a color, the code, but in the end, I decided to not include that. I tried it off camera when I wasn't recording and it didn't look right. Just so there are no secrets. Here's how that would look like. It's muddy, dirty, busy, far from the AV look that we want to create. Now we could potentially add a background, the white background, a card for each dish. But that's another thing I decided to not do. The reasoning is simple. So number one, it would either pressure space. But two more importantly, this is a list, so cards don't belong here. According to the official Material Design Guide, all these items belong together. So that's why we're not going to split them up into separate cards. At the end of the day, these are the options regarding screen number three. We need to choose a font or a color scheme and apply some finishing touches. I don't have any other ideas, variations for this green. I think it's time to move on. I'll see you in a moment. 24. Choosing the best typeface: Welcome back. It's time to talk topography and we're going to use the same iterative process on these few screens. So select the best versions and put them side-by-side so we can quickly go back and forth between them. If you're undecided at the end, that's fine, but choose three different screens so we can explore each bond in a number of situations. I already have mine separated here and we're going to work on copies. We're going to keep it simple with one single typeface that has at least two weights. So that's regular and bold. If it has more, that's great. But another factor is the size. So what we want is for the font to be as small as possible. And I'm talking kilobytes here. So if we're undecided about two similar typefaces, we're going to go with the smaller one. So 600 kb versus 200, clearly 200. What we're looking for is a sans serif font because we want the clean sharp luck. Finally, the most important searching point is personality. So we want something similar to what delivered, who has rounded, interesting and a little bit of personality that adds value to the design. Now, you might be scratching your head about that. What does personality mean? Well, let's put it this way. If we use Arial, we won't win any awards. In my book, developed a love of typefaces that fly under the radar. They are very simple, they don't attract attention in any way. There, the bland, boring. And that's for the reason that means they're versatile. They can be used in any circumstances. In the context of an AB design. We do want our text to stand out just a bit. So the choices we make in terms of topography could make or break the design. So I already mentioned Ariel, Leto, certain weights of Open Sans robo though Source Sans Pro and a lot more fall in this boring category. So let's open up Google fonts. I'm going to disable syrup and handwritten. And we can go to down. Now, we're looking for at least four or five choices. The first one that grabs my attention is Montserrat, which is a favorite of mine. So that's one. The second one is Ubunto. It has a lot of layer. So that's two. New Nieto looks lovely and I'm going to add it as well, though, says is a bad light, but it has quite a lot of weight. So this is quite nice. I'm going to keep it. Now. Quicksand is another one that's quite interesting and I love it. Now for the sake of keeping things short, I'm going to stop here. But when you're doing this yourself, please go to more typefaces. I wouldn't go over then, but at least five. As you practice, you're going to start developing a mental database of great looking fonts. And you're going to have a much narrower word lists for your next project. That's why I didn't waste time scrolling around. I already knew what I was looking for. Okay. Download archive extracted. I'm going to show you how I quickly sort them by size, especially if you selected lots of them. So inside this folder, search for that TDF and you're gonna get a bunch of them. And then you can change the viewing mode to details. And you're gonna get the size in a separate column. Then you can immediately see that Ubuntu is far more heavier versus quicksand, e.g. so I won't cross it off my list just yet. I want to remove it, but it has to look absolutely fantastic to keep it as an option. Everybody that develops apps wants a very low app size. The file size has to be as low as possible. That gets you more than stalls and it's great. In my company, this was really important. We would trim absolutely everything, even if it was 20 kb. Now let's go back to Figma and let's see what's what. So I have these copied. The fonts are installed. So let's check out quicksand. Now, there's no magic here, just the magic of editing. You have to select all the texts layers and change them. Now we could use a more advanced feature, but this is on purpose. I'm doing it manually because I want you to do it manually as well. Then in the second part of the course, I'm going to show you how you can do this automatically. Well, as close to automatic as possible. This is very time intensive process, but you're going to have to be patient when changing so many layers. Now what's your first impression? Take a close look and think about that. Now, one thing, when you change any typeface, you're going to ruin your previous alignment. So you might have some overflow action. Some pods are gonna go outside the bounds is not a problem. We're going to have to align everything once more. But, uh, yeah, this looks pretty solid considering with going through it pretty fast. Now, we could work with a higher degree of precision, but again, that's not the point in this step. Now, let's continue with the next typeface by creating more copies. Now Nieto, let's see it, right? Please be aware there's also another version called Nieto sands. Now, this is how it looks like. And my first impression is that it's quite similar to quicksand, but it's slightly rounder. You can see this, especially in the delivery time, but there's a close race. It really depends on your taste. Okay, now I'm going to zoom ahead to see everything right. Remember, you have to do this on your own and that other level by faces available on Google fonts, there is no alternative to hard work. Try to be as efficient as possible. You could select Bold text layers and change the typeface directly to that weight. That means you're going to have to be really fast with your control click technique. Now, no matter how you do it, it's important that you do it. Plus you do have to have a good number of texts layers. If we would have done this step at maybe the location screen, when we just started, it wouldn't be relevant. It's like asking to people on the street who they're voting for. They say candidate X, right? And then you say, hey, you know, a study shows 100 per cent of people wanted to vote for candidate X is only two people. Don't fool yourself. Use several types of texts, layers, headlines bodied x sub headlines, numbers, white background, mixed bag, round and so on. But of course, if you include ten screens, then the difficulty goes way up. So that's why we didn't create all the screens and left this step at the end. While that is doable, it's much better to decide the style of an app at the early stages. And three screens is ideal in my book. Okay, here they are. All the typefaces that I select that you have this file attached and I suggest that you open it. But Figma might give you some warnings. If you don't have those fonts, it may give you some warnings. No worries. Okay, each typeface has its own strengths. But what I can clearly say from the get-go is that Ubunto is not worth that. Sure, it looks nice, but not 34 times as nice as the other ones. Remember, it was way bulkier in terms of size. Monster AB is also lovely, but all in all, I think the best looking one is new Nieto. It has a lot of weights. It's fairly small, so it won't blow up the app size. And it has this special zing that makes it stand out, especially when you use it in the black variant. So black simply means bold times to something of that nature. Now, considering the target audience, I think this is a great first choice. In case something comes up at a later point in the AB design, we can easily change the typeface to any of these alternatives, as well as explored some other ones. But yeah, that wraps up this lecture. We've made great progress and I want to congratulate you for sticking with me until this point. I'm gonna see you in a moment. 25. Define and refine our app’s look with styles: Welcome back. It's time to set a few minutes aside so we can define the AP style. We're looking for the colors, font sizes, line-height, and so on. And we're going to apply all of these to the rest of the screens. I know that may be scary, but we have a lifesaver technique using styles. So let's start with the easiest of them, the color scheme, right? The process goes like this. We choose a title, say San Francisco, right? We opened the color picker and we play around with various nuances. Was great as that we can see the change in real time, right? So we play around with it. And in the end, I decided to use 212f. What nine, which is a dark shade of blue. So do 12 f49. I'm giving you the exact color codes so you can follow along, but honestly just play with the color picker until you're happy. Now, this is nearly black, but it's ideal for lots of texts layers. Now how do we apply it to lots of texts layers? First, we have to set it up as a colored style. Click here on these four dots, right next to fill to the left of plus. It says colored styles, but we don't have any, which is totally fine. Click on this plus and we're gonna get a pop-up that's asking us for the name. Call it whatever you want, like title, color, main color, primary color, whatever. Head creates style. To show you the palette of colors styles. Here's a quick example. So select the title desert heaven, which is currently black. Now click on these four dots next to Phil and you'll find that blue we just added. Here it is, one click and that's it. Now, you may say, Okay Chris, So what will, Here's the thing. Let's de-select everything right? Notice something in the top right side, we have colors, styles right there with a single entry. We can right-click it, and of course we can delete it, but we can also edit that. So from this new panel, we want to change the color from the Properties. Click here to open up the color picker and we can go to town. I'm going to make it red or green or something crazy. And notice how both titles change. This is the power of styles. This is how you quickly change an entire design and just a few clicks. Clients always want to see more options or maybe they changed their mind with this feature. You have nothing to worry about. I'm going to hit Control Z because I do like that blue shade. Now when you want to break up a color and style, simply select the text layer and use this broken chain icon that keeps the same blue color, but it's no longer tied to the color style. Again, I'm going to undo that Control Z because I do want that two layers isn't a big deal. But imagine if we have 100 screens and nearly 1,000 texts layers, that's where the color style is an absolute must. Now to continue, please select V screens and move them separately. We have to clean things up just a bit. My choices are the location screen, the main listing screen where the rating is floating on the edge, on the top right side. And finally, the Virgin where we have scrollable tabs, three screens in total, and we can build up our styles. Let's focus on the second one. So the title is blue, shown in new Nieto black for the size we could go with for D. But I think 34 is a better choice. So that's three for this dialing should be applied to the restaurant dipole as well. But here's the thing. We also have text styles do. So rather than going to fail, you're going to see we have the same four dots next to text. Click and you'll see text styles in this, the exact same process. Click the plus symbol to add it, name it, whatever you want. Just make sure that makes sense like large tidal. Then we can apply it. Control click desert heaven, and click on that entry to test it out. Let's make a dramatic change. So we're going to de-select and then we're going to hit Edit. And then we're going to make it 50 pixels tall or something crazy like that. And yes, it does work as expected. It escape and then Control Z. Now let's take it from the top. The title is done. What about all these icons? I do like that orange, so let's try it out. Grab the hamburger menu, and let's set it to the following colored gold. But here's the thing. This icon is inside the frame. The details don't really matter. But here's the sense. If you change the fill from up top which is currently white, it's not going to look well. Instead we're going to have to change selection colors. This is currently black. That's what we need to change. Ffd see zeros either, which is a lovely intense orange, then add it as a style. My plan is to apply it to all of these other icons. The drop-down, filter and search. Use Control to select the first one, then add shift to multi-select. And that's it there, the orange, lovely stuff. Please apply the same color change to the tags from the bottom right side. As you can see, with minimal effort with changing the design in no time at all. What about the clock? I think the same blue is fine. See, here I messed up. I selected the frame and I change the fill by mistake. There's a lot to talk about, but let's discuss the details in the second part of the course. For now, focus on the essence, changed selection colors. If you have an icon inside the frame, That's the best way to go about it for now. Just as a small side note, we could have done this previously when we tried out different typefaces. I know, but I wanted you to work manually. Gaining speed is the most important thing as a designer at this stage of the game. Okay, Going back to it, What about the delivery time? Well, this needs to be shown in new Nieto regular 24th pixels in a fairly dark gray. Let's go with 777. We can add the color as well as the character style. I think it's very likely we're going to use it as the main body text, meaning the description for each dish. So let's call it body. I want to stress that I'm not 100% certain. I may change my mind. We're going to see as we move along. But because we have styles, we can quickly do that. We can quickly change our minds. For the reading. Let's go with new need TO 20, So fairly small. We can make it gray, That's 777 colored code. And then select the 92 per cent part and make it black. Black in terms of weight. As for the color, we can sample the emoji because we changed the font, the alignment may not be perfect, but that's a quick facts. Now, you may have a question, Chris, How did you decide on 34th lag for the titles? Why not 30? Why not 36? Why not worthy? The answer is simple. I tried them. I uploaded the design to my phone. I looked at my design for my phone and I compare them first between themselves then versus lot of apps that I previously analyzed. That before it seemed like the best choice. The same goes for all of the other ones. It's not something that Google Material Design has set up, is something that I decided. Okay, fast-forward one, then this is our result. This is how your project should look like at this stage of the game. Let's take a quick break. 26. Practice your speed: Welcome back. We along screen them, but do and I want to replace this dummy content. Here are all the resources that I've prepared for this screen. First, the photos, quite simple, console shift gay. I know in some other programs you can simply drag and drop images inside rectangles, but not in Figma. They good time with it. And then when you're using huge photos, be a bit more patient. Figma might take a few seconds to process them. Okay, next we're going to do the titles one-by-one, nice and easy. The votes are up next. Now, you might ask, Chris, why are you doing all this stuff? Why are you showing it? It's simple on one hand, it's great practice. You have to exercise. They END out and be prepared. Lazy is not something that can ever describe me. Secondly, it's important that we show the client and the developer something that we're proud of, something that feels real. The effort required to make an airfield real is minimal, but it dramatically improves the impact of the app. It feels much, much better. Now, imagine this. You invite some guests over, some friends, right? And then you have dirty socks in the middle of the room. Everything else is nice and clean, all set up. But those dirty socks, man, the ruin, everything. Even though there's such a small part of the overall room, they focus all your attention to them. So it's not a great thing, is the same thing here in design. Having fake repetitive content, lots of Lorem Ipsum, it just breaks the magic. So that's why we have to do it. And just to bring this home, Let's decrease the size of the photo by 40 pixels. So Control click it and let's have a look for them. 360, Let's go forward to the 20. And for the card from 470, let's move it to 430. Of course nothing is aligned anymore, but we know shift helps us move things in ten pixel increments. So within the need for depths, select all of these guys like so remember the control-click the first one, then hold shift to multi-select. And now we can use the up arrow four times whilst holding down Shift. Now, is this re-size absolutely needed? No. But as I said, I want to put in the hard work and see if I can improve the design. And I think it's working. Previously. I was a bit hesitant, but now I think it looks fine. Now when you're ready to go, Let's move on to screen number three. Start with the title, select it and apply the character style that's called exactly that title. For the back arrow and the Information icon, these need to be orange. Moving on down the active tabs needs to be orange. So you know what you need to do with this rectangle. Now for the dabs? Well, to be honest, I'm not sure. Let's start with the title styling. Obviously it's too big, but we can change it down to 26 pixels, e.g. as before, the inactive tabs need a different treatment. So let's fix this. Now. Select all the other items and set them in a separate text layer. I think that's best. So just use cut and paste Control X. Okay. So this one needs to be set in neonatal 26 as before, but in the regular form, you should never change the size of the font even if it's inactive is not good practice. As for the active one, this should be made orange. Now again, now here's a tip. You might not know how much space you should leave between past-time pizza. After all, we want to emit the space between pizza and result. All right? But because this is a single layer, you can't find out the actual distance. Well, here's the tip at the rectangle between these two and have a look at the width. Once we have that value in mind, it's actually quite easy with this layer selected hold Alt, and check the existing measurement. Then fine tune it with your arrow keys and you're good to go. Okay, let's move on down the dish names. Well, I think these should be the same as the tabs. So Nieto black, 26 pixels, but this time around in blue, we need to apply this to all the entries. So do what you have to do in order to make that happen. Now obviously, the chemical style is the best way to go about this. So please make sure that you put it to good use. I'm trying to go as fast as possible, but I do want you to understand what's going on. For the description. We're going to have to use the body styling. Nieto is a bigger font, but I do want to keep the lines of text, so resize it if needed. But just imagine after that we apply styles to absolutely everything in case we want to change something no matter what it is, size, font, line-height, whatever color. We're going to have an easy time where that price and weight applied the 26 title styling and check the position. You want it bottom aligned with the thumbnail, though you might have to eyeball it. This font has quite a lot of extra space on the top and the bottom. And there's nothing you can do about it. When you click it, you can see the highlight. It's quite big. Now, I do think the price should be shown in orange though. Yes, indeed, this is miles better. Finally, the Add to Cart should be orange as well. Now, believe it or not, I think we're done with this green. If there's anything you want a button up, now's the time for it. I'm not sure if this has to be so chunky. It's not that important. So let's bring it down to bold rather than black. The thing is styles of absolutely fabulous and you could make an entry for just about every little thing. As you might have noticed, I didn't add every single styling though, and that's intentional. I don't want to add too many and then get confused with that. It's time for the break. 27. Finish the first screen: Welcome back. Okay, let's go to the location screen. Let's take it from the top and make sure that we're on the same page. The icon needs to be 18180 and pure white. This has to be placed AT pixels from the top edge. This is a good chance to use the y field. Remember, y is the vertical axis and it starts from the top. X is the horizontal one and it starts from the left. Now the name of the app, the live right there. Then if you don't have it and let's style it. I'm thinking you need all-black. 70, pure white. Oh, I don t think I added white as a style. The thing is, if we constantly move our mouse over this region, it's best to have white here as well. Now centered it on the canvas and place it about ten pixels from the eigon, give or take. Okay, now that's done. Next. I think it's safe to say that orange is going to be the main action color. So let's apply it to both of these buttons. Keep in mind when dealing with buttons, it's best you use on auto layout and not a rectangle and the text layer, That's just best practice in Figma. What about the text? Well, let's change this to show restaurants. Let's start out with 26 title and see what's worth. Now, the size itself is okay, but it's a bit too chunky, so let's drop it to bold. This makes a big difference. If you don't see it through the video, trust me on it. Check it on your phone, and I think you'll agree with me. The problem I'm having here is the hierarchy. It's not clear. So let's think about it. We have three available actions. We have entered a location with a submit button, skip this step and move on to the next screen or create an account with log n. In general, create an account or login could be considered two separate things. But I'm going to combine them to keep things easy. So how should we go about it? While it's fine to have two buttons with the same level of importance, I think it's best we apply at different styling to create an account. From what I understand from the brief, the registration process isn't all that important. That means show restaurants is the most important button in this screen. As such, Let's enlarge it to 656 pixels. We should also change the height to 90 pixels, just so it stands out a bit more. Now, that's a lot of bedding, but it's no big deal. Just focus on what's important and don't get caught up with too many techniques going up for the moment, the fields need to match the buttons where so 656 pixels it is, then things are rapidly changing, but remember to pause as often as you need to put the text. This is officially called the hand. Please apply the body styling. When the user touches the field, the hand will go away. Now, here's the technique to make a field to do auto layout. First of all, select the text and use Shift a, nice and easy. Then add the fill white one. Nice and simple. Change the coordinate radius to five pixels, so it looks a bit better. I might change this to ten pixels later on, but for now, it's fine. Oh, by the way, we do need the GPS icon and you have something attached to the course. I'm going to simply drag it inside this frame. When you do that, you're going to notice the default layout isn't right because the text is not centered. That's not the problem though. De-select the icon and click on the frame. Move your gaze to the right side. This is the issue. We need to change the alignment and with good to go. Okay, we want this to be 656 pixels wide, so it matches everything. But notice the width and height are grayed out. And that's because of these settings, these upset to hug content. And that means the shape will grow based on what's inside that. Because we know we need a certain size. Let's change this from hug to fixed width. Now we can type in 656 and that's great. The height is still not available, but now you know how to change it back to where we need to move the search icon to the right. Dragging it won't work. And that's because we have to change a setting. Click on these three dots and you'll get a new panel. Here. We want to change spacing mode from pact, which means close together. We want to build an option space between. And just like that, they fall apart. In case you don't like the padding on either side, you can change it from this place. 20. I think that's a great choice. By the way, if you don't understand what I just did with hug contents, that's just fine. You don't have to use auto layout. You don't need to complicate things. But at this stage, I thought it would be nice to have a glimpse of how this works. Oh, by the way, please make the GPS icon orange because you can tap it, you can click it so that can get your IP address automatically. Okay, now let's think this is the most important part in this screen. What's next? And that thing, create an account comes second. Now we could give it an orange button as well, but it would compete with show restaurants. I think it's best we move it at the bottom of the screen. But first, let's move skip this step out of the way for the styling. Let's do this. Increase the height to 100 pixels so it can't be overlooked. That's not exactly huge, but it is slightly bigger than the main call-to-action. Make it pure black, but drop its opacity down to 60 per cent. No border for that, the idea is to give it a generous amount of space, but without making it stand out too much. So that's why I chose black. Make it span the entire width of the screen. So that means 720 pixels. Align it correctly. And you should now see what I'm trying to do. When you're done, change the text to create an account or login with a capital C. The small stuff really matters at the end of the day. Overall, this is a good design for the second year action. Could we use auto layout here as well? Sure, of course you can do that on your own. Now, let's have a good look at our design during a quick Greg. Thank you. 28. A new style of button to have a great flow: Welcome back. We have one main item left. Skip this step. I'm going to use something new, something called the ghost button. So start with an auto layout shift they, but instead of adding a fill like we've always done, we're going to add the border instead so no fill just the board, the white one fairly thick. I'm thinking three pixels. You should always stay away from one pixel strokes. They look super fuzzy and low quality. So this is a ghost button and it's called that because it has no body, no fill, no body. That's why it's a ghost right? Now. By the way, make sure you're spelling is on point and you capitalize the first letter. Obviously make sure everything is centered. But here's the thing. You may not have enough contrast versus the background image depending on what you have selected. Should we do have a color overlay, but that may not be enough. Plus when you have no fill, selecting these buttons is quite difficult to do. So here's what I propose, enable the fill though and make it pure black, but then lower the opacity to about 30% or so. I think that's going to help us quite a lot, both with the contrast and width selecting this button. Now, let's analyze things. The logo is at the top. You glance at it and you move down right in the middle, you have this main area where you have to put in your address, your location. Awesome. It's big, it's bright, it stands out. Now the question is, could we add any extra details? And I'm thinking we could add an icon inside the orange button. But here's what I propose instead a bleed effect. So select the orange rectangle and enable a drop shadow in case you have a border disabled. For the color. We don't want black. Instead we're going to go for the orange. For the settings. I've used this effect loads of times. And here's what works best. Five for the y field, five for B. And finally, an opacity that set to 30%. You could use more. Just remember to zoom in and out. In. Once you deselect the button, you're going to see what I mean by bleed effect. It stands out quite a lot. It's like it's glowing and it's an extra detail that some clients might love. Now, let's see what else. Oh, the coordinate radius, of course five pixels as before, you may want to try a larger value like ten or 15 up to you. The thing is I don't like the position of skip this step. It's just floating about. We could bring it closer, but I would rather not get any accidental clicks on it. So let's do this. Get the type tool and right, or in new Nieto bold 26 pixels, pure white, of course. Now centered horizontally and move it maybe 50 pixels from the orange button. Now here's the thing we do want symmetry is something you should always aim for. So if we have 50 pixels up top, we need 50 pixels between. Skip this step and this item here. Hold Alt and measure things out. Then if needed, use your arrow keys on your keyboard. Okay, Awesome, but that's not the end of it. Get the line to all hotkey L, and let's do some math. We know that these guys are the 656 pixels wide. And we want to divide there, but without going across the word, that doesn't make any sense. So I think 50 pixels is enough for that. So let's do this. 656 -50, that's 606/2, that's 303. Okay. Let's drag out a line and resize it. Use the properties panel for depth and when you add the line hold Shift, so it's perfectly straight to the pure white. Lines. Don't have any fills, so don't look for it. Instead change the thickness from here to bedsores. Okay, now let's duplicate it and place it on the other side. It should be quite easy to align. You do have that orange button up top, so please use it. When you're ready, center red with the word and maybe group it though that's optional Control G. And I really think that this looks awesome. It's interesting and it actually helps the user navigates through his options. Let's have a break and we'll do a complete run-down after that. Thank you so much. 29. Project overview until this point: Welcome back and congratulations, you've just finished the first part about food delivery app. I know it's been quite a journey, but hopefully you've arrived at this point with minimal nail-biting, swearing and head scratching, the process is somewhat difficult in the beginning, very similar to 1,000 piece puzzle. But as you struggled to make progress piece by piece, the whole image becomes a parent and you can pick up speed. I can't stress enough the value of patients and dedication. This delivery app is a real-world project, something you might encounter in your job. Be it at a design agency or on any freelancing platform. This is not me bragging, but most designed tutorials don't show you relapse. It's just pretty photos and that's it. There's no thought of functionality behind them. And that's like learning to ride a bike when the world is filled with monster trucks. So while you are learning may be difficult, I'm a firm believer that the harder the training, the easier of the fight. Meaning when you land the job, you can truly shine. And that's why this course is the way it is. Now we still have a long way to go. But look where do we start at a simple wireframe than the layout? Then some design experiments, we chose a typeface than a color scheme. And we solve the actual problems trying to fit as many restaurants and as many dishes as possible in a single screen without making it look busy without scrolling too much. We talked about aspect ratio, having the right aspect ratio for these photos, the chain of command, aka the high-level Kino screen. We use cards, icons, various topography techniques, and we learned how to use the assets panel. So again, from the bottom of my heart, congratulations for making it this far. Stick with me and you'll do even better. The first Green was probably the trickiest though. And that's because you can type in your location in the field, but you can also use your phone's GPS and your address is going to be filled in automatically. You can also skip this step. And then the app is going to show you a restaurants from the largest city. Now all of this information is in the brief, and I do hope that you read it. Finally, you can register or login. So the whole thing is this, knowing how to structure of these four different actions is no joke. We sorted them by their importance and we made design decisions accordingly. So that's why e.g. we use the ghost button. That's why we lowered the opacity of this rectangle. Okay, Overall, fantastic job. And again, congratulations for getting here. If you want to finish the entire thing, you're going to have to continue watching. Thank you so much. This is Chris signing out for the moment. Thank you. 30. Create the login and register screens: Welcome back. Let's start with a copy of the initial screen, hold Alt, and drag a copy underneath it. This is what we're going to use to show the login and register fields. Basically, we're going to show what's going to happen when you click on this button at the bottom of the screen. Now let's delete a few things or skip this step, and then create an account, de-select and have a look on the right side to see all the styles so far. So this is what you should have on your end as well. Though the textiles are not set in stone. You could have more, you could have less. Okay, now, drag the field and button a bit lower down to make a bit of room login and register can be shown by using tabs. So grab the line tool hotkey L and drag one out. With looking for the sixth, five-six in terms of web, use the top-right side for that. So that's 656, pure white with a thickness of two. Remember to hold shift when dragging down the line if you want it to be perfectly straight. Now, above this line, Let's write register. We do have several styles, but let's do this part manually. This should be shown in new Nieto bold and their dy. This is something that's come across in our project quite often. Okay, click on these three dots to get loads more options. Now, I want all my letters to be uppercase, and that's this option here. The reason behind this choice is quite simple up of gaze, and that's because of hierarchy. Now, this helps the users navigate to the screen more on that a bit later on. This has to be placed 20 pixels from the line, give or take. Of course we're going to need another tab that's going to be called login. So please write that in as before, make a copy and replace things. To keep things intuitive, we're going to drop the weight from bold to regular. Now we could potentially use a very light gray, the likes of ddd to show that this is not the active tab, but actually I have a better solution. So grab the existing line from this screen and then duplicate it, Control D. Then we're going to make it four pixels deck, which is the standard according to Google Material Design. Now for the color, I'm going to use the following. That's f, d, d, d, z, those seven, which is a shade of yellow, actually gold, which I do like. Now, this stands out, but in the right amount is not neon, but it's perfectly fine. Okay, Finally, we can resize it by using some math in the W field. Just add slash due at the end of it and then hit Enter. And that's going to give us 328 pixels, That's 328. And with this element, we can now align the dipoles. Remember how that's done? Select register with the yellow bar and the line horizontally, this one here. Then move login somewhere in the middle of the remaining white bar, something like this. You might want to zoom in for this next bit. Okay, grab the active bar with the white one, so two things selected and then right align them again. Now we can select login along with the yellow bar. So basically we're constantly grabbing two items at a time and we're aligning them. Rinse and repeat sent to these guys as well. And finally, select both bars and move it back into place. Move the gold one to the left in its original place. And basically that's the DAB system than we need quite a lot of room underneath for the other fields. So place this about 60 to 70 pixels from the logo. We're going to have email, password, phone number, city, and so on. So we're going to need as much space as we can get. And this is where we're going to need components. Any repetitive content, such as a field, should be made into a component because of a simple reason. Now, imagine we're going to have 50 or the 100 fields inside this project. And then we decide, Hey, you know what, we might need another look, maybe a different coordinate radius, a different styling. What then 100 fields. Imagine that. Now, as I said, we could potentially update them manually screen by screen, but I'm using a component is much, much smarter. Now, in general, you will find components in the top-left side when you click on assets. Now we don't have any right now, but we'll get to it in a minute. Still here we can see our page number, That's number one. Now, in general, components are kept in a different page. And why is that? Because it's best to see all of your assets separately. But because I want you to follow this as easy as possible, what we're gonna do is we're going to do this, grab the frame tool, hockey F, and drag one out right here on the left side. No specific size in mind, just a random one. Then changes, fill from pure white to maybe a very light gray. That's because the fields will very likely be white. And we're going to have white on white, so we do need decent contrast. Hence, the light gray background. Now, you can rename this frame and to rest or resources, resources frame whatever you want, just so it stands out a bit and we can identify it. Finally, we can add the first item here, the logo. Select both layers and move them inside this new frame, the Resources frame. Then look at the top of stigma in the middle of this bar. This is the icon with looking for Create component. And you can tell it's a component by looking in the layers panel. This is the symbol for the master component. A massive components simply means the original one. And because we want to keep the original one nice and safe, we've moved it here in the Resources frame. Of course, we're going to need the logo in these screens. So drag out a copy with all to drag like so. Now this clone, this copy is called an instance. And again, you can think of it as a copy of the original component. Notice this icon in the layers panel. This is a bit different. This one is empty sea here. But if we click on the original component, the mass of the component that's filled, this is a different icon. Now, in case this Resources frame is too far away, you can always do this. Switch to the assets tab. From here you're going to have local components. And then underneath the name of the frame, That's resources in my case. Now from here, you can simply drag out a copy. No other hotkey, just click and drag. Always remember to send them the logo. Then we can use the y field, the place at 80 pixels from the top of the screen. So that's eight z though. And basically now we're using components. Now you may ask why, Chris, why should we do it? Because we may change our mind and make the logo e.g. yellow, right? Oh, actually, I think we didn't add that color to the color styles. So let's handle that. It's not a big deal. Select the active tab, use these for doors to open up the color of the styles menu and then add that entry, call it highlight or whatever you want, gold, yellow, wherever. And then we can go back to Add component. So as I said, it's very useful because we can change lots and lots of instances, aka copies by playing with the original master component. Just like that, changes color and everything updates. But obviously we needed wide. So let's undo with Control Z. Now you could of course play with the text underneath, maybe change the weight, the alignment, the distance, even the typeface itself. So this is the power of components. We're going to use them quite a lot. So don't worry if you don't want 100 per cent, get it. For now, let's continue. 31. Using components – step by step guide: Welcome back. We have to add quite a lot of fields for this registration form. Now start by moving the existing one into the Resources frame. Let's also switch to the layers panel so we can see what we're working on. So this is an auto layout. We have 20 pixels on either side in terms of padding and 15 at the top and bottom, It's a fixed width and the height is set to hug contents. Okay, this is our starting point. First of all, we're going to need the label most fields, neither labels, so you know what they are. Enter your location is a hint. It's something to help you with the format, but it's not the actual label. So grab the type tool, hotkey D, and let's add that label. Now for the styling, this is gonna be placed on a dark background. So let's do this. New Nieto, but 30 in pure white. And most of these fields are gonna be mandatory. So I say that we add this symbol that's shifted eight on your keyboard. This is a star or an asterisk as it's officially called. And this tells the user that this field is mandatory. He has to fill it in. Now to make it stand out, we're going to use our accent color, aka our highlight color, and that's the yellow in this case. Now please be aware that I've only selected the star, not the entire layer. So that's how I'm going to apply this color grade stuff. Now, the label has to be left aligned with the field. But to keep things, Let's select everything and hit Shift a. So we've added another, the auto layout. This will help us keep the labeled left aligned, but we can also quickly change the spacing between the label and the field by using this part right here. Awesome. Now let's go with them for now. This is gonna be a lifesaver if we ever change our mind, remember 2050, 100 fields, this is really going to help us. Now, let's continue. This GPS icon might be switched with something else, right? So here's what I propose. First, we have to select that two ways. The quick one is to hold Control, move above it and click it. Check the layers panel for that. We've drilled down as low as we can go or less, just de-select and do this. Double-click once and then double-click once again. And now we have our GPS, Saigon dragon away from this VL because there's a good chance we might use it loads of times. And we might change it with a filled icon or something else, a multi-colored icon. So now that it's separated, let's transform it into a component as usual by clicking here. Great stuff. Now I'm going to drag out an instance inside this auto layout inside the field. And why? Because next we're going to transform the entire thing, the entire field into a component. Just like that. No worries if you don't get it right now, just trust me on this, let's continue. So for now we have three components in total. We have the logo, the GPS, and this field. Now it's time to drag an instance inside this first screen above show restaurants, but we don't need the label there. What are we going to do? So in the registration form? Sure. We do need a label, but not above. So this is what we do. Let's control. Click the label. Focus right here on the right side of the screen in the middle where it says layer. Notice we have a symbol right here. It says create Boolean property. Now, Boolean simply means it's a yes or a no choice, true or false, one or z though, binary. Click it and you're going to get this new window. The default value should be true. And that's what the name show labeled sounds just about right. Create property and well, nothing seems to have happened. We do see this purple highlight here. And if we deselect, then click on the component within the seed, this properties region, and again show label. But what does it do? Well, let me show you. Now you should see this option right here, show labeled. And of course we can toggle it and it goes away or it comes back. This is a Boolean property. We told Figma that we want to control the label if it shows up or not. But notice if you click on the original component, you don't have that toggle. And that's normal. The toggle only shows up in instances in colognes, in copies. The massive component doesn't have it. This one here. Finally, you might be disappointed that this field raises up when the label is hidden. After all, we do want 20 pixels between the field and the button, right? Well, let's do this. Select the Copy and then move here, two constraints. Here the default is set to left and top. We want it set to left and bottom. To change that, simply click here. It's as easy as that. And now you can hide the label is going to stay, but please watch this lecture again. And when you are ready, we can continue with the icon and the registration fields. Thank you so much. And remember, the toggle only shows up in the copy, not in the original master component. Okay. Good luck with it. 32. Use instance swap to quickly change icons: Welcome back. I hope you manage to get here. Now, we need lots of fields for this form, but we have this icon here that we actually don't need. We saw the Boolean text property for the texts obviously, but let's apply it here as well. Inside the main component, please select the GPS icon. Notice this is a copy. The original one is above it. We won't touch that one. Okay, focus on layer once again. This is what we're looking for. Apply Boolean property. Why doesn't it say Create? Because we already have one for the label, but no worries. We're going to click here to make a new one. Call it show icon, though the name really doesn't matter. As for the default, we're going to change it to false. And that's because most fields won't have an icon. Let's go back to screen them with one and check it out. There, none the icon. And with pretty good notice, there's a slight issue and I don't want to waste time on it. Now, in the main component, the hint is now centered and that's not good. So here's what's what. Now we have to change the following thing. Select the Auto Layout brain for the field, this one here, and change its setting to pack. This will of course affect screen them, but the one that copy from screen number one, the GPS icon will be too close to the hand. So that's no good. Here. I went too fast and I selected the instance field. Notice the layers panel, this is a mistake. I can still change it to space between, but it's not what we want. So use Control Z and select the auto layout from inside the instance. That's what we want. Okay, Now it's time to add loads of fields. So drag the first one and center it horizontally, placed at about 40 pixels from the yellow bar, give or take. Of course. The first field should be called fullName. Replace that label. And I think we need to do the same thing for the hand. This can say John Doe or Christian therein. Whenever you want, you have name, whatever, hit Escape and with them with it, we're going to have quite a lot of fields, and this one doesn't need to be this wide. So here's what I propose. Like the instance, this one here, this should be set to fix right here. So we're going to give access to the web, divide this by two by adding slash do in this field, and that's the 28. Now, the thing is we also need an empty space between the fields. So let's remove 20. So that's the, OH, now you could add -20 in the field or just type in 308. Now, you might be surprised to see that this field is not changing. And that's because we have the auto layout inside this instance. So the instance itself is neither where you can see the purple highlight right here. Now, we have to select the Auto Layout, this one here. Instead of fixed, we're going to need to change it to fill container. Now you may ask Chris, why Phil container? Well, the instance is the container, the blue highlight. Remember? So we're saying, Hey, this field needs to be as wide as the instance. If the instance the clone is 308, then so should the field right. Now, if the instance gets wider, follow that value. The only other option is her contents. And that simply means, hey, Figma, make the field as why does the content itself. And the content in this case is Christian barren. That wouldn't make sense in this specific situation. So obviously we're not going to use it. Let's make another copy and place it on the right. The label should say city as well, the hint, let's go with something basic like select city. On Select a city. I think it's select City. Now, this means we're going to need the drop-down. We already have one in screen them, but do next to San Francisco. So select it and move it to the resources rain. Then let's make it into a component. Please take your time with it. When you're ready, drag a copy back to San Francisco. Now, since there's quite small, you may want to use the assets panel for that, whatever works best for you. When you're ready, let's think about it. Go back to the city field and enable an icon with the frame selected, you will have to change the spacing from packed choose space between. But right now we only have an on or an off option for the icon. And basically that's not good enough. So we need to be able to swap out these icons to change them out. Well, luckily we can do that in Figma. So go back to the main component. The easiest way to work is to use the layers panel and find the GPS Saigon. Here, it's slightly grayed out. Okay, now, move your focus here on the right side. Here we have another symbol, right in this position next to where it says GPS. Click it and we're going to have an instance swap. An instance swap simply means that we can change the icon. If we de-select that and then select the master component, you should have three properties in total. So that's show or hide the label. Swap the icon, this one here, and finally, show what a high di icon. Let's go back to select the city. The two toggles are here, and in-between them, we get this job down. So we only have two icon components in this project. So click here and you should find that data will quite fast. It's as easy as that. But here's the thing. The difference in size breaks the icon and that's no good. But we do have an easy fix. So go back to the main component, the arrow, and then we're going to use an auto layout shift a. Now the size is totally fine. Now I don't want to bore you with various explanations, but remember this, if you're the icons have a different size and you want to be able to swap them around. Simply use shift day in the Resources frame on the mass of the component. Let's recap. So in the field component, we selected the GPS icon and we use the feature called instance swap property. Once that's applied, we can go to a clone. So an instance, we can switch up the icons based on what components we have available in this project. In our case, there's only two icons, so obviously that's quite easy. Now in case the icon doesn't fit, we need to use Shift a on the original icon, aka the main or master component. Okay, let's continue. 33. Focus on your speed: Welcome back. From time-to-time, you're going to have these intense sessions where the only thing that matters is your speed, e.g. right here, where do we do need quite a lot of fields. Let's get to work by making a copy of the name field and dragging it down, change the width to 656 and the field should grow without any other settings. Move the main call to action down and make room and do your best to blaze through these steps as I work in the background, let me tell you a few things about my thought process. So this is part of the game. Now, no matter how many fancy tricks you use in Figma, this is a part of it. Now assured the goal is to work as smart and as efficiently as possible. But at the end of the day, you will have repetitive, tedious tasks, boring tasks, and this is one of them. So rather than complaining about it, they get as an exercise, as a chance to improve your skills, C does nothing difficult that's going on here, but it has to be done. So the way I see it, I like to challenge myself to do it as fast as I can. During my time as the CEO of my app design company, five years in total, I've interviewed hundreds of designers and I always gave them with skills. Sure, I wanted them to know the hotkeys and have good knowledge about designing about the program. But I always looked for speed. Speed shows me that you value your time. Speed tells me that even if you don't know something, once you learn that once you get caught up, you're going to do a great job. It's one of those few indicators that employers often look for. Now, while your CV may be beautiful, It's not enough to get a great job. Usually that has to be some type of skills test. And it's easy to see why. Because some designers may take 20 min to do this repetitive work, does may do it and have that maybe even less debt, right? This alone tells you a lot about that specific designer. So focused on your speed, That's how you're going to make a great first impression. Password web and these fields are done. But here's something you may have noticed. Selecting these text fields wasn't all that great to have an easier time with it, you could do this. So let's go back to the main component and select the label. On the right side. You're going to find this part that says content. And you can see that this is a field where it shows us the current text. And obviously this is label. Just above it. We have this icon and it says create text property. Click it, and you're going to get a new window for the name text is totally fine, and the value is also okay. Now, what does this do? Well, select any field. And on the right side, besides show label, show icon, you'll also want to have this option to change the text right from this place. Now, does this save you a lot of time? Well, it's up for discussion. I intentionally showed you this feature after we manually relabeled all of these fields. Because speed requires practice. It's one thing to understand that, but it's another thing to actually do it back to the main component. If we can edit the label, surely we can do the same thing for the hand. So simply Control click it to select that and look for the content on the right side. Click on the same icon and create a new property. This time around, this should be called, hence, the name matters because we have to stay organized. Now we have the handle, the button, but we're going to need the component. Now, drag it from the registered screen. We need to place it in the Resources frame. From here, let's make it into a component like so. Then select the text and we're going to do the same thing. We're going to make the text editable. No need for anything else. Okay. Now, drag out a copy and keep the text as it is. Create an account. Watch the spelling though. The distance from the last field should be the same as from the first field, the yellow bar. I recommend 40 pixels. That's for the z though, give uptake, of course. When you're ready to move on, make a copy of this green and be as efficient as possible with your actions. Now, I'm going to start from the bottom. So the text should say, enter your account. Again, please watch your spelling. This is quite important. Remove the name, CD and phone number fields. Raise up the email and password fields and make sure they match the distance from the previous screen. I said flipped the pixels, so let's use that here as well. Then raise up the orange button as well. Let's work on the DAB. Move the yellow bar towards the right in change up the weight for these layers. So register this should be shown in regular. And then login. Obviously that needs to be bold. To finish up, we need a new layer that's called forgot password. So make a copy of the label and place it to the right side if you want, you can also change the text alignment from left, right align just in case we might edit that later on. Now, you might notice that this new layer will be above the instance and that's totally normal, so don't worry about it, that's fine. Okay. Make it yellow. And basically, I think that with just about done, not only do we have two beautiful screens, but we've learned a lot about using components and various properties like Boolean, icon swap or the x property. Okay, see if there's anything else. And if not, let's continue. Thank you so much. 34. Use component properties – like a professional!: Welcome back. We now know how to use components quite well. So I'd like to keep on building on that knowledge. So let's focus on the action bar. This has to be made into a component as well. So here's what I propose. Select all the elements like so now use Control C, Control V to paste it inside the Resources frame. Or you can simply drag out a copy, whatever works best for you. Now remove the rectangle because we don't need that. Now let's do this. Select these three icons, the hamburger menu, the filter, and the search. These all need to be made into components. And we do have an option right here where we can make multiple components. Hello, a single click. Just like that. Awesome. Now why not the drop-down? Because we already have it here in case you don't please handle that. Okay, let's raise them up so we can see all the original components up top. Okay, Now drag out some copies. First, the hamburger menu than the other two. Okay, it's time for some auto layouts. So shift a right to be on the left side shift, and then two icons on the right side, again, shift a. Speaking of that, remember to use Shift a on the original mass of the components on the icons themselves. That's super important. Now we're going to keep it simple. So we need 40 between the icons on the right and then 20 for the ones on the left. Now, could we set up different margins, e.g. ten pixels between the drop-down and the city name shore of quotes. Those types of details make things a bit more complicated than they need to be. So I'm always going to choose simplicity whenever they can. Have a nice background, we're going to have to select both auto layouts and then use shift. They once again, basically now this is a single element. And because of that, we can of course add the fill p Otherwise, please, though we're going to need to change the padding. The settings are fairly simple though. 32 pixels on either side. As for the height, you could keep it set to z though. And here's why. Move up top. Now, here, both of these drop-downs should be set to fixed. Now, why fixed? Because we don't need any flexibility. We want 720 for the width and 112 for the height. Now, could we make it flexible, responsive, short? We could, but as I said, let's keep it simple because that's not needed. Finally, we need to change the position of the content to center. This is done by clicking here, simple enough. And one more thing, we need to change the arrangement to space between fact doesn't really help us change it. In essence, this is done and we can make it into a component. Okay, great stuff. Now, let's make it editable, like we just learned. So start with the text control. Click to select that next to the content. Click on this arrow for the name text is just fine. And for the default value that can remain San Francisco. Next, the dropdown. Here's where I want you to pause, see if you control click it. You may get this layer, the actual vector. And you might get angry because there aren't any settings here. The only thing you see is this icon that says Select instance. And that's famous way of telling you, Hey, you've actually selected the wrong thing. I don t think you need to be here. You can't do anything to the actual vector. You need to work on the instance. So you can click here or you can just use the layers panel to actually select the instance. You can recognize it by this empty diamond icon. Okay, good stuff. Now let's apply a Boolean because we might want to turn it off. This is done by using this icon here from the layer section. Let's change the name to show drop-down. Now, do we need to apply a swap instance property? I don't really think so for this one, we're probably going to keep this icon. But what about the rest? 100 per cent, we do want that. So start with the hamburger menu. Click here to create an instance swap. And when this time, please name it to, let's say ICAM-1. Then select the filter, not auto layout, but the instance of the filter, create the new one and let's call it Icon to finally the search icon, a new property that's called Icon three. And we're done, but we have to try it out. So let's make a copy of this action bar, and let's try to replace an icon. Let's go with the hamburger menu. So e.g. say that we want to replace it with the GPS icon. So does it work? And yes, it does. Now, here's the thing. In case the GPS icon is distorted, find the mass of the component and then use shift. They, I already did that. Now, play with it and see if everything works well. When swapping an icon, you might notice a drop-down here. You have local components and preferred. This second one is useful in case you want to import the huge library of icons, hundreds of icons, maybe even thousands. So what you don't want to do is scroll like a madman. So what you do is you choose a few icons that are more likely to be used to change the preferred list. Please do this, select the main component, then go here and click on this symbol to edit it. From here, you're going to get preferred values. And now you can hit this Plus icon. Basically you can check the components that you might need more often than not. In case you can't manage, just use this toggle to change the viewing mode. And because we have here, let's change something because I count 123, that doesn't make any sense. So you can actually double-click here to rename them. E.g. icon left makes much more sense than icon right one and then icon right two. And that's much better with just about done with it. I think we forgot something quite important. What if there's no title? So select it in the main component, and let's apply a Boolean property for that as well, because it may happen. So this time around, call it show title e.g. because the actual texts might change. But what about the two icons on the right side? Are we always going to need them? I don't think so. So let's do the same thing. Show icon, right, one. And then we're going to have show icon right too. So these can be set to true by default. And when you're done, go back to the clone, to the instance. And there stood out, we're not going to apply a Boolean to the hamburger menu, because in most apps, the back icon is always present. Okay, you can remove the title, you can remove the right icons. Now, to be honest, I'm very proud of you for making it this far around. Trust me, when I first got started learning about these properties, these components and whatnot, I had a tough time with it. I learned it step-by-step. It was frustrating at first. I wasn't finding the right properties, but I'm very happy to say that with patients and practice, I eventually got it. And so will you Let's take a break so you can catch up. Thank you. 35. This is how you use variants: Welcome back. Let's talk about component variance. So let's take the status bar. We have to reuse it over and over again. But what if we have 200 screens and then the client says, hey, I don't want it in white. So we should prepare for that. So drag it from the second screen into the Resources frame, and let's do this. So I'm not going to fool around with auto layout for the right side. I'm going to keep it as it is. Instead, I'm going to make it into a component directly. Now, I want you to notice something look up top where we usually have the Create Component bygone. It's no different. It says create variant. So let's use it. We can now name this one too dark or colored or something like that. Switch to the other one and call it light or white or whatever. This is going to help us recognize them. Notice there's a dotted line around these two guys. So this shows us that we're dealing with variance. What variations? Now for the second one, let's use the selection colors and make all the icons white. Then for the background, let's make it orange with any other color. See what this is going. Basically, we're making options, aka variance for the same thing, for the same element. So if the client changes his mind, we can flip a switch and then be done with it. Let's go back to the second screen and switch to the Assets panel. I'm going to do that so you can see how this typically goes. You can drag out the status bar like any other component, nor did the hotkey just click and drag. Of course you have to align it, but then look on the right side and you can choose light or dark. And this is totally awesome. Drag another one for the screen number three. And now here's another situation for the variance. Say that you didn't put in a password in the login screen. We could show that the button is disabled, right? So let's select the MainComponent and create the variant. Let's call it disabled, which is a very common term. Then let's change up the styling. So let's remove the shadow altogether and then change the color from the bright orange to any grade that you set up in the Styles panel. Okay, Now go to that instance and let's switch it from the default state. Now, the naming of the default state doesn't make a whole lot of sense. So let's rename it. Let's change it to active e.g. and now you know what property one doesn't sound all that great either. So let's rename it to state. So the state of the button, active or disabled. Then you're gonna get familiar with all of these terms as time goes by. Developers, coders are very familiar with them too. And just like that with making great progress with variance. Now before we end, let's handle the third screen. Here's my approach. Select both of these icons, the back arrow and the info one, and then move them into the Resources frame. You can resize it at any point, by the way, in case you want it bigger than use auto layouts for each of them just for good measure. Awesome. Make them into a component. Now, go back to screen number three here and something to be aware of, you can actually drag out a copy of this other action bar. You don't have to use the assets panel or the Resources frame. It's the exact same thing, no matter what you choose to rely on. Step-by-step, disabled the drop-down arrow, we don't need that. Replaced the title width, mature their pizza delivery. Awesome stuff. For the icon on the left, we want the back arrow. Take your time with it. You might not have it in your preferred list, but we can add it there in a second. Just take your time with it, then you should be good to go. Hi The icon, right, number one, because we only need the info icon. Set that up and I think that we're done. Yeah, overall, this is excellent progress and I'm super excited about it. Sure you do need to practice. Sure. This may be totally new and maybe a bit confusing, but after you do it a few times, you're going to get it. Trust me, I promise you, you're gonna get it. Just stick with it. As I said, go to the main component and edit the left icon at the back-end though to the preferred list, because it's very likely that we're going to use it quite a lot. And with that, let's take a break. Thank you so much. 36. Gain speed: Welcome back. Let's have a look and see how we can improve the design. First of all, let's handle screen to the rating system. Drag it inside the Resources frame and move the icon next to the other ones. Okay, This is perfect. Now, make it into a component. And when that's done, Lee's drag out a copy. Now, putting back the emoji inside the auto layout frame may be a bit tricky on the canvas itself. But if you can't manage, just use the layers panel. Drag and drop it. Now, okay, remember, never put a main component inside another one, that doesn't work. Okay, let's make this into a component and then we're going to add the very end. Now, we could potentially do three of them. That's what the brief says, but I'm going to keep it a bit simpler. So drag in another MOG, an angry one, and you do have one attached and it's called exactly that angry. This needs to be 40 by 40 and the color that's clearly bad. Now, I don't have a specific color. Golden mind, just go with something that looks different enough from our orange. Some people might mistake our orange or red, so make sure that you use something that's different enough. Okay, let's make the angry emoji or component as well. Then obviously drag out a copy. By the way, I'm constantly for getting one thing. Whenever you make an icon into a component, please make sure that you set on auto layout. So that's shift they, every single icon here needs this shift, a treatment. Otherwise, it's not going to look nice. Now, let's see what's what. Now, this might be a bit difficult, but I really want you to do it this way. So after you have a variant of the original card, remove the green emoji, and let's swap it manually with angry one. Now again, you should use your Layers panel for this thing. This is the harder way to do it, but I really think it's wet bed. Remember, always work with colognes, not with original components. I'm going to say that over and over because it's quite important. Okay? You can also replace the percentages and the number of votes if you haven't done so already, just make it feel real. And when it's all said and done, you can drag out a copy from the assets panel or anywhere else and test it out. You can name the property, state or status, or something along those lines. As for the variance themselves, good or bad, positive or negative, green or red, whatever the word is, best for you. I repeat, nobody actually cares. It's only for you. What matters most is you keep things simple and intuitive. Take your time and add clones to screen number two. After that, I think that we're just about done with it. Now, could we have used Auto Layout and various other things for the restaurant entry? 100% sure that we could make the entire thing into a component, maybe make a few variants for those cases where the restaurant is closed for the day, e.g. but now we're talking about fine tuning stuff that's usually done at the end of an expensive project. Basically it's more of the same techniques. So I'm going to skip that and call this one. Then. Instead, let's do this to practice my speed. I'm going to redo the login and register for verbs, but with a white background, a clean one. So let's do this. Let's start with a copy of screen number three. Now, let's see how fast we can handle things. For the title swap. Please change it out with, please login or register, then no info icon on the right side. We don't need that. And basically that's done for the top part. Now for the tabs, Let's resize back the bar to the sixth year. It is half of 720 because we only need to lay eggs. That's register. And then login. Please replace the text, but we can keep the styling as it is, orange and bold, and then regular and gray for the other one, for the inactive one. What I'm going to do though, is I'm going to enable the all caps transformation. This is a bit hidden in Figma, but that's totally fine. Okay, this is going to go, remember to send the V active bar as before, though, before you do that, you might want to change the text to center text instead of left. That's going to help us with all the alignment. Okay. Now, the tabs themselves, they take only a minute, but well, I handled that. Think about the fields. They're white and this is a white background and going to be trouble. So let's think. Now we could enable a drop shadow. But I really don't want an ugly one. I prefer soft shadows that don't stand out. Really visible ones are quite ugly. So because of that, I think we're going to use a color background. We're going to change it. So until then, remove all the entries. Here's the fastest way to work. Grab all the fields from the other version of this green and then drag out a copy here. Now place everything 30 pixels from the top and you should be good to go. I hope you're seeing the issue with white on white. It's not going to work. Now, the fixed set, select the art board, and then let's sample the color from screen them with du. Now, the colored code in case you're following along is f z though, F11, F8. But it's simpler and faster to sample it. So that's what the eye dropper tool is four. So let's put it to good use, right? But even with the background, the fields still don't stand out. Plus the label is white as well. So what should we do? Well, this calls for the very end. Let's go back to the Resources frame and see what we can do. Always take the time to arrange all these guys correctly. In general, you would have them on a separate page with infinite space, but I wanted to keep them close so you constantly see them. Okay, let's create the variant and call it for the simple BG, for simple background or something like that, that makes sense to you. Now, the label has to be blue, same weight, but different color. It should look nice. Now, as for the asterisk, that's going to show quite well in orange, I believe it's going to stand out. Now. We're going to see in a minute if it does indeed look nice. Now for the field itself, Let's go with a basic shadow. I'll actually keep the settings that the defaults. Now here's the thing. We could actually use a board that as well. Well the tryout, various other things. But all in all, I'm pretty happy so far. Now, let's go and try it out. Then. You're going to see something. When you change all of these fields without the variant to the new one, only the shadow applies. The label color doesn't actually change. Here's why. Go back to the very end. If you want to be able to edit your level of hens than change the variant to another state, specifically changes color, you will have to use a fail. Here we have two colors. But to make this easier, we're gonna do this. I'm going to remove the asterisk so the fill won't be mixed anymore. That's what's causing the problems. Now, it should be blue, the main color. So now if we go and try it out, you're going to see this works quite well. We can even change the content of the label and then switch between states. So we're changing the actual texts. And then with applying the new state and it works, it's all fine and well, that was the issue we were having mixed under fill and that was screwing up things for the Figma. But what about the men that though the symbol that's the risk? Well, the asterisk needs to be set as another text layer. Let's make that happen. So once you have it, makes sure that it's arranged correctly, then set up the fill. Now for the first one, this has to be yellow of course, because it's for a color background. Select that with the label and then use shift. They, by default, they are going to be stacked. But you can change the orientation from here, from vertical to horizontal. And basically we're good to go. Repeat the same thing on the variant. Add the star, changes color to our orange, then use an auto layout on it along with the label. Okay, now I've changed the orientation. And basically we're good to go. Let me recap, because we had two different colors in the label when we switched variance, when we switch states, the label remained white. Figma was getting confused. The figs that we've separated the asterisk and we've applied one color for the label and another one for the star. Plus one thing that you can do is set up a textile, call it label or whatever the one labeled I think is pretty fine. Just in case you get a double star on the previous screens. That's just because I manually typed it in, you probably did the same thing. So what you're going to have to do is you're going to have to remove it one-by-one. One thing to note is that I didn't make the asterisk into a component. There's no need for that, at least not right now. Okay. I think we're pretty good. Please make sure that you watch this lecture at least twice. I really wanted to include this in the course because it's a mistake I've done myself when I first got started with variance. And I think it's best that you know about it as I work in the background, let me tell you the takeaway. When you're dealing with buttons or the fields. Always think about the States from the get-go and create them asap as soon as possible. You know, most buttons will need a disabled state. You know, most fields will require an on or off label. So that's experience for you. So in the next project, you can immediately create them. And of course you can take it even further. You can think about hover states. If this is a website or active states for the field, maybe validation, maybe a red stroke when you put in the wrong format for the password. Maybe the password is too short, things like that. Maybe a green stroke on the field if everything is fine. Now, all of those things are best handled at the start. Otherwise, you might have issues like the one we just encountered. Now, before we end, I would like to change the position of the buttons at the bottom, 32 pixels from the edge. I've done this before then other projects, and I think it really makes sense to the user. Basically you get used to this position and it's easier for the user. You know that it's there always at the bottom. Are gay. With that. Let's continue. 37. Using fields the right way: Welcome back. Let's work on add new address and my inflammation, which are two screens based on fields. And that's about it. So start with a copy of the last screen and let's take it from the top. Let's replace the Bible width, add the new address. You can remove the tabs because we don't need them. But that shows us that we don't have a clear separation here. So we need to do something. Basically, let's add the shadow from Effects. That's the simplest way to handle it. Now the settings should be for the blur. And two for the y. This is a very, very soft shadow, but that's how you should generally approach them. If you can clearly see a shadow, then it's probably over done. Okay, Now let's drag some new fields we need for anecdotal. I loved the fact that after the copier do Figma realizes that you want some more. So when you hit Control D, it automatically places the next copy correctly. This is lovely stuff. Good job. Figma. When you're ready, get to work and replace all of these labels. And hence, I have my wireframe on the other display so I can read them out quite easily. This is why it really pays to have two displays, its city. And then the hand is, select the city. Next we have street name and they chose a hint that says Market Street. As far as I know, that's a real street in San Francisco. If the client is from there, this is going to make it feel more real. Now, the street number, let's say 548 with something for the hint. Then finally the zip code which I googled, it's 94104 dash 5401 game. They get down with it and never ever leave them at their defaults. Repetitive content is probably the worst thing that you can do as a designer. Well, one of them, at least. Now for the city, we're going to need the drop-down icon. So please enable it from that switch and then use the drop-down to select the triangle. The spacing has to be changed from packed the space between, but we've already done it ten times. So I think you can manage. Now for the button, it should say Create address. And I think that's about it. Now I'm going to zoom to the other screen, my information, because it's basically exactly the same thing, the same techniques. Meanwhile, I think the most exciting upcoming feature is content grid. This is a feature from Adobe XD that allows you to put loads of content in with ease. So e.g. let's say that you have 20 thumbnails and you want 20 different images. Well, rather than inserting them one at a time, you simply drag them over. And that's that the program does this thing. Plus it's the same thing with texts layers. It's one of the most impressive things about Adobe XD. And now since Adobe has bought Figma, well, I hope it's just a matter of time until we get this feature. Now, knowing Adobe, it may take weeks or it may take years, That's, there'll be for you in a nutshell. It's a huge, powerful company, but some things are incredibly slow, especially some features. Anyway, these are all the fields nicely buttoned up. Please make sure you handle everything on your end and then continue with the next lecture only after you made this step. Thank you so much and I'm gonna see you in a second. 38. Create the left menu: Welcome back. Let's design a beautiful left menu according to the material design guidelines, start with a copy of the previous screen, though you're going to have to delete just about everything. Only the status bar is useful. So we're going to build this menu from scratch. If you're not familiar with the left menu, is what you get when you click on the hamburger menu is how you get to your settings, your payment methods, and so on. Let's start with a rectangle for the top area. This needs to be 720 by 288y 288 pixels. That's the standard 144 dp doubled. Now we're going to make it orange, though this can be a gradient or even a photo. That's why I actually like this layout even though it's from Google Material Design to place it correctly. And after that, let's place the logo above it. Now, the logo could be replaced by an avatar. And again, that's a nice feature of the left menu. It makes it more interesting. But here's the thing about the logo. We don't want the text, just the icon. Now we could potentially create a Boolean property, but let's keep it simple. From the Resources frame, just drag the icon outside. As you can see this as a standalone vector, no component, nothing. This is totally fine. Bring it into a new screen and we're going to resize it. I think one-to-five by one-to-five is just right for this specific rectangle. And that's because it's going to leave us enough room to add a few details like the user's name and his e-mail address. Now, you may ask, Chris, could we use an auto layout here? 100 per cent? Of course. Now, do we need to add an auto layout? No, not really. So that's why I'm going to keep it simple. Plays the logo 32 pixels from the left side. And you can use the x field for that. Or you could potentially just hold the Alt key and measure things out, then tap your that'll keys and that's fine. Now, the distance from the top doesn't matter that this specific moment. Underneath, Let's write my name, Christian Baron quest Barron. In terms of styling, smaller title, should be fine. Left align it with the icon, and leave about ten pixels from it, give or take. Of course. Finally, the email address, Chris baron@yahoo.com. That's not my real email, so please don't use it. Actually don't email me in general, use the platform to get held fast or of course, the discourse server. I'm always on there. Okay? This should be shown in the body style, but pure white. And with all three of these items selected, we can now move them up or down to place them in the center of the orange rectangle. Now again, could we use an auto layout? Sure, of course, but I'm fine with it as it stands. Moving on down, we're going to need quite a few icons and text layer. Now, the background itself needs to be pure white though. Select the frame and change the fill back to pure white. One thing I didn't mention is the fact that the left menu is actually two-thirds the width of the screen. But we went full width because it doesn't have any impact at the moment. So we can continue as it is. Now. It's time for some icons. I already have something prepared. These are from flat icon.com. I spent quite a lot of time looking for them. You have them attached and then also numbered from the top to the bottom so you can have an easier time with it. Please. Don't use them for commercial purposes though. You have them just so you can work along if you want to use them for your own projects, we have to pay for them. Okay? Now when you drag in lots of icons inside, you may have some issues with them. E.g. if I tried to select the first five of them, look what happens. The fifth icon isn't being selected right now. I have to make a much bigger box to grab it. So this can be a bit frustrating to have an easier time with them. I suggest you do this. So once you manage to select all five of them to do a box selection, please use Shift a, then change the layout mode from horizontal, the default in this case two vertical. Now, one thing that's left is to set the distance. I'm going to say about 60 or something like that. And that's because we want to avoid accidental clicks. So we have to be generous without spacing. Of course, always centered the icons. This is an absolute must. You may be tempted to left align them, but please go with center. You can do that by clicking here. Okay, In terms of empty space there, d2 pixels as before, Let's staying consistent. Feel free to use the x field while we have the auto layout set up. The great thing about it is that you can always remove the auto layout. Just click here on the minus end, basically what then with it. Now, by default, they're going to be grouped, but no worries, just right-click and choose Ungroup. Now why would you want to do that? Because we want to add some text layers and we might have a hard time aligning them correctly if the group together. Okay. Now, let me add the first item or the squad just orders in general. I want this shown in the label style. So that means new Nieto 30, bold. If you don't have it, please set it up as a textile. That's what the color blue is totally fine. Please align it vertically and Figma should help you out with those red lines. But here's the problem. The icons are not inside this screen. The screen is called frame for the, but the icons themselves are much higher up. Basically I drag them inside Figma, but I probably didn't have frame for deselected. So Figma didn't place them inside it. No worries. Select all of them and drag them into frame 40. That's going to fix it. Okay. This is pretty good. Awesome. I'm going to fast-forward word while I do all the other ones in order, we're going to have the following. So the first one, my orders, then inflammation addresses what address? Payment methods and contact us. These icons are nice and elegant, but they are fairly serious. You could look for the ones that are a bit more interesting, maybe a bit more playful. Now colored ones might be tempting, but you have to make sure that they don't make the app look childish because the font is already on the playful side. So you have to make sure that you stay away from that. Going to kid friendly territory might be dangerous. You want to stay semi-professional. Okay, This is looking good. Let's do at the bottom we're going to have a logout button. So let's make it happen. So add another text layer. And we're going to do something like this. The text itself, it's nothing special. We're going to have a separate icon for it. Now, just as a side note, we could have used a few auto layout here and there. So we could adjust the spacing between the icons and the text as well as between each row. But you know what, actually I'm going to let you handle that because it should be fairly easy to do. Now to finish off the design, let's separate the logout area by adding a divider. So get the line tool hotkey L and draw one out, 720 with a single pixel for the thickness. Now, choose the body gray color. You should have a saved as a colored style. And the thing with all with good to go. Here's the thing. This is a modern, clean and professional left menu. We could do something a bit more interesting. But again, I'm going to leave you to it because I do want to see you a virgin and I wanted to give you a lot of options. So again, you're going to have to come up with something a bit more interesting. For now, we can continue. 39. Create interactive checkboxes: Welcome back. We need to handle the right menu. Start off with a copy of the left one. Remove the logout icon and text as well as all the other icons. Now we can keep the divider and the text layers. This is gonna be a filter system that allows the user to change the list of results. It's what you get when you click on this icon from the top right side in screen them, but do. Now for the first batch of choices, we'll type in these categories. So we're going to have Spanish, American, International, Indian. And finally it Valiant, no gate, take your time with it. You could potentially add a few more or you can remove some of them, just make sure they fit. Now let's get the rectangle tool with looking to create a checkbox. 48 by 48 leaves for the coordinate radius than pixels is just fine. Okay, Let's have a look at the settings. Let's disable the fill. We don't need that. And let's activate the stroke or the board the gate. Now the color of the border is quite important. The thickness, three pixels please. So now for the color, so the thing is, if it's too light, it may seem disabled or inactive. Dark may be seen as too in your face. So I decided on this color code, C3, C3, C3. Now feel free to save it. Then you'll colored styles as light gray or something like that checkbox color. Now I think like grey works a bit better. Now, this is actually going to be a component. So let's convert that by clicking here. When you're ready, please move it to the Resources frame. They good time with it. You're going to have to pan around quite a bit. Remember, zoom out, hit Control, use the mouse scroll, use the spacewalk key to pan around. Here we want to create the variant. You should be familiar with the process by now. Here's the thing. Let's remove the border and make the entire rectangle orange. Again, take your time with it. Don't rush it. Okay. When you're ready, we're going to have to add the check mark. And as always, I've prepared something. You have this icon, the batch, drag it inside, but here's the thing. When you want to align it inside this square, please make sure that you have a look at the layers panel. That's because it's quite easy to get disoriented. And you might not know why the alignment tools don't work as expected. This is what you want. Okay? By the way, please be sure to rename the property. And actually the two variants as well. Call them checked and unchecked as what the property itself. That's state probably I think that's fine. State status, whatever works best for you. So again, that's checked and unchecked. Okay, Let's move back to the screen. We have to drag this checkbox from the assets panel and do quite a few moves to align these correctly. Now, as I'm working in the background, I do want to say that I really enjoy teaching AB design. This process itself relies on a few principles and techniques. Once you've mastered them, you can really focus on what's important. And that's how the app looks and feels and functions. Like I said, the million times, nobody cares how you created the app. It's none of their business to do components, variance, and auto layouts. The end result is what matters, how it looks, how it functions. That's what matters. It doesn't matter if you did it in Photoshop, Figma and Adobe XD. Now, obviously you want to use the best tools for the job and the most advanced techniques. But again, the focus on what's important. Okay, back to it. Just in case you need some flexibility here, please select each checkbox and tidal together and then use Shift a. You do that for every single option. We're going to select all of them. And then you guessed it, we're going to do another, the auto layout. And here's the thing. We need to have them because the first one controls the distance between the box and the text, the checkbox in the text. So say we want 20, well, just select all those frames and you can quickly change that spacing is quite simple. And then the big one helps us change the vertical distance. We want 40 e.g. right? Again, simply type that in. Awesome. Now to give the user some context, let's add a text that says Show Only. This does change the layout a little bit, but I think it's fine. It needs the body text styling and gray for the colored code. We don't want it to stand out too much. Remember, this is only a small part of the menu. We actually have two types of filters. So we have cuisine type and then food type. When you're all set up, move up the divider from downstairs. We want about 30 pixels from the last checkbox to the divider to the line. Awesome. Now the idea is to show both the client and the developer how this panel is supposed to look like. So make sure you change the state of two or three check boxes. Make them orange, then please do the same for the associated text. Just make them orange. When you're ready to move on, simply grab everything here and make a copy downstairs. Now, let me speed things up as I change the food type. So this is going to be pizza, tacos, burgers, coffee, the works. A few items might not fit inside the screen, but that's not a big deal. Actually. It's great because we have to show that this is scrollable. Okay, now here's the thing. We do have the top area unchanged and that's not cool. Now, in general, when you're dealing with filters, you should have a way to clear them. So e.g. if we have four checkboxes, it would be quite annoying to manually uncheck them. So let's do this. Let's remove the logo and the e-mail address. With the remaining text layer, Let's change it to four active filters. And on the right side, I'd like to use an icon. But I think that text layer might work a bit better. Being wider is going to be a bit more useful. So type in clear in all caps, same font of course. One thing though, please leave 32 pixels on the right side as well. On the left. That's quite easy to do because we do have the x field that helps us quite a lot. Now we could have used guides, but overall it's fine. Okay, Let's resize the rectangle. 2112 pixels, 112 pixels, the standard height. Okay, when you're ready, you can center the text and I think we're done with it. Well, not 100% with the Intel screen, but we're going to finish it after the quick break. Please be sure to catch up to this point. Thank you so much. 40. Create toggle switches: Welcome back. The right menu looks nice, but we have a few toggles to create. This is all based on the brief. I'm not showing it during the recording because it slows down all progress. But be sure that I'm constantly checking it out and you should do the same. Okay. Let me make a copy of show on TV as well as three entries. Do that. Make a copy of this auto layout, the big one. And then you're going to have to remove it. Remember, use the minus symbol on the right side, this one. When that's done, you're going to have a frame by default. I can say that I love that about figma, but it is what it is. We're going to have to right-click and then choose Ungroup. Now, you're free to make those copies. Now, could we have manually typed in some new texts layers? Yeah, of course. But I do feel like we need to get comfortable with getting our hands dirty. Same thing here with arranging things. You're going to see, you're going to have to move loads of layers. This is a real project that requires you to think on your feet. If you're not comfortable moving things around like this, you're going to have a big problem. Most projects are not nice and neat. Then the messy they're clumsy. More often than not, which you see in a course is a very tidy version that's been prepared than rehearsed. Now in this specific case, I've actually built this project before in Photoshop and Adobe XD. So I'm quite familiar with it, but I still try my best to give you an authentic experience by including some mistakes and messy beds. Okay, Here we are. I removed the checkboxes and all of the texts layer should be blue and left aligned with everything else, nice and clean. Now let's create a toggle switch. Start with a rectangle that's 72 by 33 z though. Now why this specific size, 72 by 30? Well, I've measured the other boggles and this seems to be on the money. Make it very rounded. I like to use super high values. Now for the color, Let's use C3. C3, C3. You should have it then you'll Styles panel. Okay, right now please align it to the right side. You can use the clear text layer for that. Next on the list, we're going to have to grab the ellipse tool and make a perfect circle. The hotkey is 0, 0 from circle. I think it's so that makes sense. You can hold Shift or you can use the properties panel. I'm looking for the 48 by 48, the same size as the checkboxes. This has to be white, but of course we can see what's going on with the white background. So for that we're going to enable a drop shadow. Now, the settings that I've found to work best at the following. It's six for the blur and then two for the y field, 25% opacity. Now the circle has to be placed on the left side to show that it's turned off. Of course makes sure it's vertically centered. When you're ready, move it to the Resources frame. Remember having everything well-structured works great. The idea with pages is that you can make a very nice presentation so anybody can have an easy time exploiting your project. In this specific case, I'm doing it for learning purposes. So I'm not going to break it up into pages because that's not ideal. For the very end. It's actually quite straightforward. Let's do this. Now. Move the circle towards the right and change the rectangle from underneath to orange. Now, the naming should be simple on or off. And you can rename the property if you like. Again, status state, something like that. Now the finishing touches moved back to the screen, and let's add three of these to the top of the screen. So let's write the line them with clear. But here's the thing. It's gonna be tricky to arrange them correctly. When you try to vertically align them with the text, the text might move for different reasons. I'm not gonna get into that. So basically you're not doing yourself any favors this way. So for that reason, we're going to apply on auto layout for every single row. Then we're going to do when big auto layout, just like that. And we're going to measure the spacing from underneath. I think we set it to 40. Yeah. That looks just about right. Please have to toggle set to on and that's the one set to off. I think it looks more interesting that way. But the labels themselves, well, a thing, the brief said something about pre-delivery. Accept credit cards and 60 min or less. Oh, by the way, this is a great teaching moment. When you change the text, the auto layout may give you some headaches. No worries. Here's the facts. Change the width to fixed. That's going to open up the width field. And here you can put in 656. You can remember that value from the divider. That's the entire screen size -32 on either side, so that's 64. Then total. Finally changed the auto layout from packed to space between. And actually, that's job, well done. This entire screen should be all set up. Though it didn't seem all that complicated. These two menus pushed us to good work. If you manage to get here, my sincere congratulations, it hasn't been easy. But now let's take a quick break and we're going to continue in a second. Thank you. 41. Design cards with components: Welcome back. It's time to create my payment methods and I'm thinking that we should use a card for that. And since I know there's another screen that will use the same card design, that's my addresses. Then we should make it into a component. Okay, let's start with a copy of my inflammation. Let's remove all of the fields, but we're going to keep the button. Now, this should say add new card. In the past, I did use a floating action button and FAB, but I want to make the user feel very comfortable with the position of this button. So basically it should always be at the bottom. So we're going to stick with that position. Now for the action bar, Let's change the title to payment methods. By the way, you could even have a plus icon here in the action bar to add a new credit card. It's really up to you. These decisions should be based on what's best for the user. A plus in the action bar is probably not ideal. But considering you won't use it all that often, you know, you could potentially use it all in all. I am happy with the orange button right here. Now, before we do anything fancy, let's simply add the text layers, the foundation. So the first one is going to be primary card, which helps the user know what's the default card, if any. Now, to be honest, we should include the screen when there's no payment method selected. But we're going to talk about that later on. In short, we're going to skip over quite a few basic screens in the media screens because there's nothing special about them. We could add at least ten more screens. But again, it's not going to be all that exciting node useful. Okay, next, let's add edit That's thick. Now for the cards number, I'm going to use a dark that's created by using alt Z, the one B9. So again, that's by using alt and the numeric keys on your keyboard, 0139. And once you have a dot, simply copy paste it a bunch of times. Remember, four characters per group that are four in total. If you can't manage with a dot, just use a star. That's Shift eight. Okay, For the last group, this should be visible so you can identify the card. Awesome. Now, no discussion about the styling right now. Let's finish with the expiration date zero for the slash 28, e.g. and now we can talk about making this into a reusable card. Okay, So let's do this for the first line. Let's use the smaller title styling in case you don't have it. That means new needle black, 26 pixels. But the second line, Let's use the body styling. New Nieto, irregular 24 pixels. Now, in terms of color, edit needs to be orange since it's an action, it has to show that you can click at. For the rest. We're just going to use blue. It's super basic. Could we potentially use gray for the second line? Yeah, I think that works as well. It's really up to you. I'm going to stick with blue though. Now for the card itself, we're going to need a bunch of auto layouts to make this easier. I'm going to add another action, make primary. This is not useful here, but we're going to need it for the secondary cards. Right? Now let's take it one at a time. Select these two actions and set up on auto layout shift. Because we want to be able to control the distance between them. Let's say in this case probably 50. Okay, then all three texts layers need to form one line. So again, grab them and then use Shift a. Now we can change the spacing mode from pack, which is the default space between, because obviously they need to be split. Now nothing has happened, but that's totally fine. Now for the second row, grab both layers and hit Shift. A same thing we want to set them to space between instead of back. I hope everything makes sense up until now. Finally, to be able to add one single field for all of these guys, we're going to select everything like so and then use shift a one final time. Not only does this give us an option to quickly create a white background, but we can also control the vertical distance between them. In this case, let's say e.g. we're looking for 32 on either side and 16 for the top and bottom. That's our padding. Of course we won't keep square edges. Those have not been, change it to ten pixels, e.g. and I think this should be good. Okay, center it inside the screen if you haven't done so already. Now we could make this as flexible as possible, but I always try to keep things as simple as I can. So select the biggest frame, the one that has the white fill and change it to fixed width. And that's going to open up the W field. Put in 656. 656 pixels, and that should be it. But, you know what I have to say, 40 pixels between these two lines doesn't make a whole lot of sense considering we have such a small bedding. So actually, let's drop it to 20, but raised the padding to 32 for the top and bottom edges. In case you feel that it's too much, you can turn it down. But overall, I'm happy with it. Okay, let's make this into a component. I don't like the hotkey. I always have my mouse in the center of the screen. So clicking the icon from up top is easier for me. Okay, Now let's drag out a copy and center it horizontally. I haven't mentioned that. But keep 32, 32 pixels from the ActionBar. You really have to stay consistent because it actually helps. Okay, now, for the selected card, make primary has to be removed because obviously it's already the primary one. And to show that it's currently selected, let's do this. We can add the board of a thick one. The pixels for the color orange would be a bit too much. So let's go with blue and yellow. I don t think it would have enough contrast and it might be a bit shout in this situation. Okay, Now let's drag the second card from the assets. This one should have make primary kept as it is. And to make it feel real, please change up the last four digits for the credit card as well as the expiration date. I loved the fact that stigma and knows that I'm in text editing mode. So I only have to click once to change up these texts layers. Great stuff. Okay, when you're ready, please move on to my addresses. I'm going to zoom to the wet quite fast. And as I work in the background, let me tell you a little bit about Figma. What other design programs on the market a few years ago, e.g. affinity or Sketch, figma, the design world by storm. They produce great content and they really managed to build a community and all the little things that people were asking for. Well, Figma delivered even though Figma was a super small and the new company, They did it compared to Adobe, which basically has unlimited money, unlimited profits, unlimited people, talent. Well, they actually moved quite slowly. So that's why some people myself included. We're a bit disappointed by the state of Adobe XD. The updates just weren't coming fast enough. I'm not 100% certain, but if I remember correctly, Adobe XD was in Beta for at least two years, at least more than that, the Windows version, the first one came out, I believe it was after the year, maybe a year and a half after the Mac version, I was fuming. I was so angry. See, I've always been a Windows guy, but I seriously consider getting a Mac just to use Adobe XD. And then when I saw how Adobe simply wasn't coming along with updates fast enough, the frustration grew. And again, I don't think I'm the only one that feels this way. So that's why Figma basically call on like fire. And with that, we're ready to move on. We finished these two screens in record time. Plus we can always come back and make adjustments to the use of components. Thank you. I'm gonna see you in a second. 42. Here’s how you can make a beautiful credit card screen: Welcome back. I mentioned that we won't design every single intermediate screen, like when you don't have an address or a credit card has not been put in the system. But we should make the most of those few screens with a user might change his mind whether he might drop off e.g. the credit card screen when he adds one to the app. Let's start by making a copy of the last screen. Remove both those cards because we won't need them. Some extra housekeeping. Let's change the call to action to save credit card does the likely main action. As for the action bar itself, this should say add payment method. By the way, in case you want to get smart with it, you could add fancier titles, like how are you going to pay? Younger people really appreciate this. Now, if the client gives you a brief that's aimed at the younger audience, please don't be afraid to spice up your copy. Worst-case, the client doesn't like it and you go back to the boring stuff. But in case he does like it, you might get yourself a bonus or at least make a very good impression. So a spice things up whenever you can. Okay, let's handle the fields. By the way, did you know that you can change the viewing mode in the assets panel. So I prefer the thumbnail version, but there is a list as well, though, that shows me how messy I am with my naming. So I would read the switch out to hide that embarrassment. Okay, let's add for the fields in, though they'll remember centered them on the Canvas. The first one needs to beat that into pixels away from the action bar. Change the state to the simple BG version. Please don't forget to add an appropriate title and hand. Now, this does take some time, but it's totally okay. Now, the first two fields, I'm going to be credit card number and then name on car. Now for the credit card number, I found it best to use 12345678 and so on. Smashing the Z TO key doesn't look all that great To be honest. Now, the other two fields need to be an expiration date and the v. V. Now, the CVD thing is the short number on the back of the card. Since these two fields don't need to be full-width because they are quite small. This is a good chance to remind ourselves about how we make them neither were. And that's by using a fixed width on the instance. And then go down a level and set up the field itself to fill container. Okay, I hope this is starting to make sense. The field is inside something. If that's something is bigger and the field is set the fill, then obviously the field will grow accordingly and vice versa. But the default setting in our case is that the field is set to fixed. Now, no matter how much we change the width of the main container, the field itself, it's doing its own thing. We don't want that. So that's why we're changing it to fill container. Awesome. Now all is fine and well with these four fields. But there's nothing new or special here in this green. This is why we're going to take the time to design something above all these fields. So grab all of them and move them down. Start with a rectangle that's 656 by, let's say 350 or something like that. Center it and make it pure white. The idea is to make a credit card design that shows you what you put inside those fields from downstairs. So as you're typing the text, you see the car change. This is quite nice. I've done it in the past and it's a nice touch. Now, is this needed? No, it's not. But it makes the screen more interesting and it's not hard to code, so it's fairly cheap. Now, round out the coordinate radius by putting in ten pixels, and then let's add the standard, the shadow. So this is gonna be the foundation for our guard. Let's get the type tool and write out credit card. Set this up as a large dipole, and then change it to orange. Now we could potentially write Visa or MasterCard, but let's keep it generic. Then please use this icon that you have attached. This is called chip. It's already golden yellow and it's fairly well sized. All that you have to do is place at 32 pixels from both edges. The left side and the top. Hold the Alt key for that and tap your arrow keys. I'm sure there's becoming second nature by now as you're working along. Now for the number, we're going to use the exact same format. So simply drag out a copy. Now, here's the thing. We need to measure the hand from the field. But this is a great teaching moment. Now you may want to copy pasted, right? But if you do that, you're gonna get that specific styling and Figma. And obviously we don't want that. That's why we made the copy. We want the previous formatting, right? So the best way to get rid of any formatting, even when you're facing something in Microsoft Word from another website, is this. Use a standard notepad program. So paste it there and then copy it again and paste it in Word or big mode, whatever. And if you do that, you're going to keep the previous formatting, in this case, this chunky format. Again, I always go to Notepad when I'm copy-pasting stuff into emails or any texts editors. And now you know that this applies to Figma as well. Back to where we need to leave quite a lot of empty space between each group. So the easiest way, the manual way of doing it, smashed the Spacebar key and then use copy paste between every single group. Now the question is, could we use an auto layout? Sure that 100%, but this is how we did it back in the days of Photoshop. Now what I'm gonna do in this manual version, I'm going to use Alt to check the distance on the right side. And as long as you don't have a huge difference, I'm going to be fine with that. Again, we could make this entire card with auto layout, but I know some people hate auto layout. So that's why from time-to-time, I'm going to simplify things. In terms of this dense 20 pixels should be good between the chip and this layer. But the orange color doesn't work. Instead, let's go for blue. Yellow might work as well, but we'd have to change the white rectangle to something else a bit darker. And then I think that would be too much work, especially since we have a colored main background. So that would be a bit difficult. Okay, now for the expiration date, let's add the text layer. This should be shown in the body styling. And then for the color, Let's go with gray. As for the name, I'm honestly undecided. I think probably label is the best thing for it. Now, the tricky part is that we have loads and loads of text layers. So we need to make sure they don't clash between them. But yeah, I think that's about it. Oh, something I nearly forgot. We do have another icon for the right side. Have a look at the bad things before we end. And of course obviously raise up the fields underneath. But yeah, this is the type of thing clients appreciate when you go the extra mile. This wasn't in the brief, it wasn't in the wireframes. I just came up with it. Sometimes the client may reject the idea. He may not like it. But this was what, 10 min of work, maybe 20 min if you don't have any icons. But is it lifted for those clients who really want something special that wants something with a bit of zinc, I think, yes, by the way, on your own, please remake this card with auto layout and make it into a component and share it with me. I'd like to see how you manage, but it shouldn't be all that hard to be honest. Let me know in the comments section. But yeah, with that, we can continue. Thank you so much. 43. Design a beautiful reviews page: Welcome back. We need to create a beautiful page for reviews. So let's get to work. The wire-frame shows me that this has to be split with the restaurants address. So let's make a copy of the login screen. Remove the fields because we don't need them. And they don t think we should have a button here that either there's a question about how reviews are supposed to be written. If there's no button. E.g. in my own business, I send out personalized e-mails with a specific length with every single client. Maybe does the same process here. Anyway, back to wet. Let's rename the title to mature their pizza delivery, the name of the restaurant, the tabs. Well, for the text, makes sure that set to center so we won't have to reposition them, control clicking them is the fastest way. This is all good, all set up. So the first one should be reviews and then the second one obviously address. Now, the latter is useful in case you want to see how far away the restaurant is, or maybe you want to pick up the order yourself. So it does make sense. Now, let's let these two guides. So it's black and orange. And then for the inactive one, that should be regular and the gray. That sounds like a hip hop song that I believe that was black and yellow. Anyway, back to it. So let's add the chip design that holds the number of reviews and the percentage though it has a fill, we can always remove it. Plus we can get rid of this padding. To be honest, we don't really need to do that, but I wanted to show you as many situations as possible, so that's why I did it. Okay, now, let's make sure that it's aligned correctly. Speaking about the unnecessary things, this green is actually a pop-up. Don't ask me why. Just trust me, as such, we need an X icon, not the back arrow. So let's take this chance to swap it out. If you select the action bar, we do have a drop-down here, an icon swap, but there's no x in our list. No worries. As usual, I have something prepared. It's called x and it's attached. Now, drag this guy into the Resources frame and make it into a component. Please don't forget to add an auto layout, so it's going to look nice. When you're done, we can go back to the action bar. By default, it's going to show us the preferred icons, but we can change it. But notice how it makes sense. We're starting to have quite a few components here, and we do have to scroll a bit. So this is why preferred is super useful. Okay, back to it. We need a few more things. First, some text type in eight, positive and then negative. These should be on individual texts layers. And because we have 8.2, let's change the text upstairs to 80 per cent then votes. And that's because I want to make this as real as possible. For the styling. Let's go with body. We're going to sample the green from the emoji for the positive one, for the positive votes. Then for the negative votes. Well, we can sample colors from the assets panel. So I guess we're going to have to drag in an angry emoji. Then we can sample it, and now I can remove that. One thing that I loved about Photoshop was the fact that you could sample colors from absolutely. Anywhere, even outside the program, as long as you had the eyedropper tool, select that here, at least in this version of Figma, after the open up the Color Picker, you have to manually click on the eyedropper tool and then choose a color coming from another design program. That extra click seems a bit weird. Plus you can sample from anywhere else, e.g. the interface. Anyway, let's get back to it. Let's add another rectangle that's about 400 pixels wide for the height, let's go with 20 pixels, e.g. so this is gonna be the bar that visually shows us the number of good votes. Make it super rounded. And for the color green, of course, you might want to add that color to your styles. Be my guest. Now, let's keep going. So make sure that you sent a bit with the text layer. And then when you're done, please do the same for the negative votes. But this time from 400. Let's divide that by four and that's 100. Now why did we divide it? Because I have a positive votes and two negative ones. So afford to one ratio for the hundred and 101 thing that's bothering me. And that's how this looks on this colored background. So let's change it back to white, especially since we do have quite a lot of texts downstairs. Oh, by the way, between the emoji and the positive votes, Let's leave about 20 pixels. This is basically a summary of all the votes that are gonna be shown underneath. Speaking about that, let's separate this area with a divider, get align tool and added 720 pixels. Please center at, if needed, and make it a light gray. Actually, I think we have to graze in our styles panel though the divider, this should be the lighter one. But here's the thing. If we decide, that's how a divider should look like, we need to go back and fix the other ones from all the previous screens. Now here's the thing. I'm not going to spend too much time on that. I'm only going to do a few. But remember we have the dishes screen where there's quite a lot of dividers. This is where a component would have been quite nice. But this is a good teaching moment when you learn the hard way, you do tend to remember it. So please make sure that you fix all those dividers. To finish up, I'm going to add the few texts layers, which will be the building blocks for the actual reviews. And in the next lecture, we're going to style everything. First of all, titled something that says, I don't know, excellent food or something like that. Then the date, the 14th of October 2023. Then the author's name by Chris Barron in this case. Then maybe a few words. The meat of the review, something like, I loved everything about this restaurant and the delivery process. Nice and easy, very professional. And that sounds pretty good. Okay, Let's take a break. And in the next video, we're going to finish this up. 44. How to style a review card: Welcome back. Let's begin to style this review. Now the main thing we need to think about is how the user is going to go to the review. Now, I say that the title is the most important bit. So let's go for smaller by LDL in terms of the font formatting. As for the color, blue is the only choice because orange would imply some type of action that's available here and that's not the case. Next, the date and daughter's name, these are not all that important. So I think we can go for the body in terms of the font styling and for the color gray. Bottom align them by the way, if you haven't done so already. Now, the meat of it, the actual review itself. Now I say that this can be styled as body as well, but let's make it blue because people might actually want to read it versus the date and daughter's name, which are the basically for decoration purposes. Well, it's not exactly decorative, but people really don't care about those things. Those are there just to give a boost of credibility, right? So you can see that this is an actual person. We do need something visual here because it's just too much text. And I say a thumbs up or something of that nature. Now we could use the same emoji, the smiling one. But I think that's a bit too repetitive. So let's risk it. Here's what I have prepared. But you know what? Rather than dragging it and this screen than panning around towards the left. Let's actually do this. Now. Let's actually focus on the Resources frame and drag the icon directly there, because it makes much more sense here as usual, make it into a component and then add an auto layout. As usual. Though, you should know that if there's a positive icon, that should always be a negative one. And indeed you have one attached. Now I repeat, this is a bit risky. We could just use the same Smiley faces, but you do. Here, I'm trying to deviate, makes something a bit more interesting. Okay, when you're done with those resources, Let's go back to the review screen. Drag a positive vote inside. And let's think about that. First of all, I think we need a bunch of auto layout and you know how many? If not, let's go through this together step-by-step, row by row. So this is the first one, right? And then this is the second one. Now, do we need the third one for this body text? No, not necessarily. So now let's grab everything like so. And then Shift a and that's it. So we have three in total for the first 21 for each row. Obviously we're going to need to now main settings, space between and then set this up to fill container. Now. Okay, Awesome. Thank your time with it. By the way, don't rush it. I'm obviously going faster, but you can always pause. Now we do want quite a lot of flexibility, so this makes quite a lot of sense going for the fill container, looking great so far. Now let's select the big frame, the mainframe, and change its width to fixed that so we can set it up to 656 pixels. 656 pixels. And basically, yeah, that's job well done though. To be fair, we do need a bit more work to finish up. Mainly we need to fill up the screen with other entries. So let's make a copy of this divider from up top and place it down. No specific spacing in mind because we're going to create an auto layout here as well. And that's going to allow us to type in a specific value. So let's go with 20 for the moment. This also helps us out with adding or removing the extra lines while maintaining that divider at the exact same distance. And with that, let's make this into a component. As always, we're going to have to use the separate Resources frame. You may want to resize it by the way, or you may want to move it closer to the screen. Now, it's really up to you how you set it up, but makes sure that you have a good time moving back and forth. The main thing is that you have enough room inside that. Because after we make this into a component, we can do a variant just for the **** of it. The only thing that I'm willing to change right now is to replace the icon, but there's a lot more potential here. So make sure that you tried to explore the other design choices. Like maybe a different color for the title, maybe a different color background. Various other things you can do right here. But for now, let's go back to our screen and actually let's drag out a few copies. I think we can fit about Ford and total, though the last one may be a bit cut off, but that's totally fine. You can change one of them to the negative variant, just so we have some variety. But before we change the actual text content, keep in mind one thing that divider changes position based on the text above, right? So if it's longer or smaller, that divided the moves, but it doesn't move according to the next review. As you can see, it doesn't work. And that's because we didn't give any instructions about that. But here's the thing. If you select all of these entries and then add them into an auto layout. That's job, well done. Now, feel free to add or remove lines of text, and you should see that it works fine. And indeed this is correct. Now, here's the thing. We could do a boolean for the title. We can do a variant where there's no comment, options, options, options. But right now for this recording, I'm very happy with this amount of flexibility. You can do a lot more, but yeah, it's going to take a bit more time. So for the moment, I think we should just continue. Thank you so much. 45. My take on going the extra mile: Welcome back. Let me quickly handle the address tab while I work in the background, I think it's quite essential that I tell you what I consider the bead, the extra mile, going the extra mile. Some clients may tell you that c into the View tab, we could've spent a bit more time creating various properties for that component. Turning the Bible on roll-off, adding a Boolean, adding a variant for those cases where there's only a title but no body texts, things of that nature. Now, I don't think that's necessarily going the extra mile, not in the sense that clients would appreciate that. See, it's one thing for you to work hard. And the reward is that in the future, you won't have to work as hard. Your training is difficult, but then the actual battle isn't all that hard. So that's what we could've done to prop up these invariants and whatnot. But it's a whole another thing to create that credit card design, e.g. or to come up with some lovely copy, some lovely text inside the project. Now, those are the things that the client would appreciate. So please make sure that you don't mix up those two things. So I'm all for going all out, not being called lazy, but you always have to keep in mind this. Who does it help? Does it help my ego? Does it help me practice my skills? Does it help the developer or does it help the client? Because if you're that the learning point where you feel like you need all the practice that you can get the insured, go create all the variants, make it flexible, make it responsive, whatever. Do it all. But the disappointment comes when you expect the client to appreciate all those variants and responsiveness and whatnot when in fact he has no idea. Even if you explain it in detail, not going to care. Chances are that's how things are. You know, the client has other things to take care of as you're working through this course. I hope you realize, I hope you at least begin to realize why I was telling you this stuff at the beginning, right? Nobody cares how hard you worked inside Figma, you could have created your own typeface from scratch, letter by letter, character by character. Nobody really cares. What they care about is the overall presentation and that's it. Your effort doesn't justify your value node. You're the word, the true value that you can bring as a designer comes for them loads of other things. Now starting off with the basic ones, being able to communicate effectively both with the client and with the development team. Being punctual, delivering everything on time. And after all the basics, you have true value as a designer, as an app designer comes from your experience in being able to streamline the app, in making it more efficient. Things like hierarchy in the first screen where there are loads of actions. So you have to have experience and know how to shut your IT. Now to put it simply, if you, by moving a button and styling another one differently, making it goes bad. And if that raises conversion rates by ten per cent, that's absolutely huge, massive. Ten per cent day in day out, weeks and months on end. That's what's really going to help the business grow. But the skill itself, moving a button or doing a ghost button, moving a button at the bottom of the screen. That's nothing. The skill isn't a valuable thing. So I hope that you realize that the most value that you can bring to the client doesn't necessarily revolve around fancy things in Figma, variance properties and components and whatnot. In my experience, I've managed to grow my own e-commerce store from $20,000 per month to $50,000 per month. Just the basic design changes, things like moving the title up, reducing gaps, changing the size of thumbnails. These are extremely basic. You could watch for that course on Photoshop and you could still probably achieved those things. So for the more technical standpoint, they're not difficult. The techniques themselves aren't the value you having the experience to suggest those changes. It's you and knowing that, hey, if we always have a button at the bottom of the screen, this helps the user and intern generates more revenue, more than sales by saying, Hey, by making the button gray and disabled and making it light up when all the fields have been filled in. That improves the checkout experience and that brings more sales. So that's what you should bring to the table. Not super crazy prototypes are super flexible layouts. Those can help. I'm not saying they don't, but more often than not, they'll help you, not the client. Then you may ask, Chris, How do I get this experience? You get it by working, by doing as many projects as possible. There are quite a few websites like this one here that you can really use. But, um, if you really want to get 20, 30,000 dollar projects for you, you need to start with $501,000 ones and then check the stats, check their analytics. See after you deliver this project, stay in touch with the client, asked him to see his analytics, then suggest changes, design them, have his developers implement them, and then check the design. In a couple of weeks. E.g. on the home screen, we have 360 pixels tall photo. Just as a random example, try it 300 pixel one, right? So make it smaller. Then check the conversion rates. If it's from 2% to 2.4 per cent. That's incredible, right? And then you rinse and repeat until the business grows. And all those little things that you've tested, you have to remember them. And then when you get your next project, all those tracks can help you earn a lot more. So that's the value you can bring. It's not about advanced techniques and Figma, it's about what you know. Thank you and good luck. 46. 18 checkout p1Create the checkout screen – step 1: Welcome back. Let's handle the checkout screen, start to the copy of the payment method screen and remove just about everything inside that. Well, except for the button at the bottom. Now for the title in the action bar, Let's keep it simple and call it check out. Keep it nice and simple for this version will actually make our lives a lot more complicated in order to help the client. Now in this phase, we're going to do a checkout screen where the user is not logged in. If you remember, Screen1 has the option to skip registration. But if you want to place an order, you're obviously going to need an account. Let's do this. Make a copy of this button and raise it up 32 pixels from the action bar for the texts, let's write something like please login or register to continue. Now, this goes against us having a button at the bottom, but here's what I propose. Let's keep the one at the bottom, but change it to the disabled state. So make it gray. Then let's change the text with lace or the word thin bucks. Now the idea is this, the main button remains at the bottom. Nothing has changed in that regard. Now the user is still expects it to see it there, but because you're not logged in, in comes a new button at the top. So this is just another way of going about that. Now, could we use one single button at the bottom that says login? Sure, of course. But I think that by seeing this Place Order button helps nudge the use of a long. It basically says, oh, you're so close, come on, just do it. Showing it entices the user to keep going. So that's my thought process. Now, we also have to show the items in the cart. So let's do this. Grab the type tool hotkey D and write out my jaw their pizza delivery, because you need to know what restaurant you've selected. Choose the smaller di Belle from the Styles panel. Now, in terms of color, blue is totally fine, though we could potentially make it orange to signify that you could go back and order some more dishes. I think actually that makes quite a lot more sense. Okay, let's, let's actually do it. Okay, next, let's add a few dishes. So I have something prepared in the node bad. So I'm going to just paste them in. In total what we want out, three layers, the texts layers, so the quantity, the dish name, and finally the price. Now you could potentially hide the quantity and just use those classic plus and minus buttons to adjust how many pieces you want. But unfortunately that takes up a whole lot of space. This is what I'm thinking. You can tap the entry and the pop-up is going to allow you to add or remove dishes. And that's because I think it's quite unlikely that you're going to use it that often. Now for the styling itself, Let's go with body for all three of them. Though, the price should stand out a bit more. That's the classic approach. So break the chain and let's change it to probably bold instead of regular. Now here's the thing. I never like to mix sizes. So if the ones on the left of 26 pixels, the one on the right should be the same. You can change the weight or the color, but not the size. For whatever reason, it just feels off when you do that. Okay, Looking good. Now we're going to need the divider. You can steal one from the view screen, which is quite glows. Or you could make a new one, whatever you want. Now, to tell you the truth, I didn't make it into a component, but you can definitely do that. It may be helpful. Okay, six-by-six pixels for the width leaves. And now it's time to add auto layouts so we can have quite a bit of flexibility. So first of all, the quantity and the dish name shift day for both of these. Now, okay, now, change the distance to 20 pixels. Next on auto layout with the price, okay, change the layout to space between the good time with it. I'm obviously going pretty fast, but you don't have to remember. You have the spacebar at your fingertips, so use it whenever needed. Next, another one with the divider shift, they, I'm gonna say I'm gonna want about 30 pixels here. So easy though. Now, the idea is that you should have enough space to individually click on these dishes. Okay, we only have one, but that's going to change in a second. That's why we're using auto layout because we're not sure about the sizing. So it's best that we bake in a lot of flexibility right now. Now, the divider might force the content into the center because it's wider. Now, if that happens, please use this part to left align things. So that's the first step out of two. The second one is to select the Auto Layout with both elements. This one here, and now set it up to fill container. That should give you a good result. This is our first entry, but we want three and make a couple of copies. Just drag them out with Alt and Shift or use Control D. No particular gap in mind. Just place them wherever you want. Now grab everything, all three layers and the title and use one final time shift. They won less Auto Layout. And now we can control just about everything. E.g. let's go with for D, for the vertical distance between these guys. Now the question is, do we add a white fill? I think so. I think yes, but that means we're going to have to change a few things. I'm not scared though, so let's go for it. So add that fill, the white fill, and for the padding, let's go with 32 for the either side and then 16 for the top and bottom. Oh, by the way, please round out the coordinates to ten pixels. This is a given, okay? This will obviously go from side-to-side, full width. But is this something we want to keep as is? I think we could, but I think a classic hard maybe a bit better. Plus it's a great teaching moments. So let's go through this scenario. How do we fix it? So first of all, let's select the big frame and change it to fixed. With that, we can now change it to 656. Again, this is the easiest way of doing it. It doesn't ensure maximum flexibility, but that's totally fine in my book, the prices and the dividers hangout. And if you want to repair them, just select all three dividers with Control Shift. Basically these are the culprits. They are the forcing the car to be wider. So if we change the size 2592, which I know by heart because I've been in this position before, we now should have a balanced card. So five-ninths to, and indeed it works. By the way, we don't have a component here, but we may need the component for later down the road. We'll see for now, Let's take it step-by-step. Now the thing is, I do like the car as it is right now. But I think for 40 is a bit much. So let's change it to 30 for the vertical space, I mean, but you know what, the last divider, this isn't doing it for me. It doesn't make a whole lot of sense. So let's Control click it and remove it. But this doesn't look good either. There's not enough padding. So we had 16 before, but we're going to need to ramp it up. So there's going to be enough height so the user can easily click on the last entry. Some thinking 32 should work well, and I believe that we've just about done with it. Place it very close to the top button that the two pixels to be precise. And I think that we're done. Now. Could we play with it some more? Should we could make it 20 per cent more than interesting. But you know what, let's do one final thing. Let's add a drop shadow just for the **** of it. But I promise you this is it for now. But this specific case, we'll move on to the other the cases when you have logged in, in just a moment. This is it for now. I'm gonna see you in a second. Thank you. 47. Create the checkout screen – step 2: Welcome back. This is step two of the process. Say you've just registered, right? You've made an account. What's the car than a lot like? Well, first of all, let's make a copy. The button from the top goes away. But let's say that you didn't put in all your information like your address, your credit card, and so on, right? So we're still going to have a few arrows, a few warnings. Let's take it from the top because you've logged in, you're going to have your total and the ability to add the voucher. So select the tidal, mature their pizza delivery, and make a copy with control the make sure you select the text and not the big frame by the way, because this is an auto layout, the copy gets put underneath. The great thing is that you can tap your arrow keys, the down arrow key, and the layout is going to change just like that. This is totally awesome. Okay, now I have something prepared in my Notepad, so let me just copy paste that. In short, it's the subtotal the delivery fee. Do you have a voucher and the grand total? So these are all quite common in most delivery apps. The styling is obviously off, so let's fix it. Please remove both the color and the formatting. Here's my take. We can start off with new Nieto regular 26 pixels, please. As for the grand total, bold and blue. So basically three out of four things are blue. The voucher should be orange because you can click it locally. You can do that in Figma, you can choose different colors styles. Now, take your time with it. What matters most is that you guide the user all of these settings and take it bit by bit. One step, you could make grand total black in terms of weight, make it chunkier. Okay, when you're done, make a copy with Control D. Again, this is going to be placed underneath, but select both of them and use Shift a to an auto layout, you will have the ability to change the orientation. Okay? It's not easy sailing just yet because we have to change it to space between the text alignment needs to be set to write a line. It looks a bit more visually appealing. Navigate space between right align text. And if needed, you may need to change this setting from hug contents, the fill container in case you're still not sure how this works. Simply try everything out and see how you do, or just come to this chord and ask for help. But please always post screenshots so I can see what's happening. But yeah, this is it for the top bar, 0, just as an optional step, select the last product. This specific frame here. This is quite important. Now, drag out another divider with the help of the line tool. Make it 59 to 592 pixels wide and change the color to that specific light gray. I know this may be a bit tricky to do. So if you can't follow this specific step, just kept bad, or you could remove the last entry and duplicate the middle one that has a divider, never level small thing, hold you back that are always options. Okay, Let's do the bottom card, nice and simple. Start out with a simple texts layer contact info. The next wet, Let's write a warning. Please add your information by the Info. This is all written in Nieto regularly. By the way, the left one should be blue and the right ones, since it's a warning, it should be read to make sure this is as clear as day. Let's add the chevron. You might also call it an adult, but you shouldn't confuse it with the back arrow. That's something else. Okay? Now, immediately you should realize that we need to make it a component, right? So let me jump ahead while I move it to the Resources frame and go through the steps. Remember, this needs to be read and it has to be an auto layout. Okay, let's go back to the screen. But the right side use Shift a on both of these guys. Leave 20 pixels between them. Though we can always change our mind. Then add another, the auto layout for the entire row. Change it to space between. Then let's add a fill of white background. These should all come at rapid-fire rate. Okay, pure white. Then add your padding. 32.16. Awesome stuff. I hope you're having fun. Center it and change the width to 656. And believe it or not, this is our component. Now obviously we still need to do a few things, but no worries, we are going to get to the wet. Okay. For the bottom part, Let's see what's, what. Now we still have a few things to do here, but let's change up an important setting at the top. So let's compress this card by changing this value to 20. And that's because we need more space downstairs. Still has ample reading room, but now we actually get the love of space here. For our better luck, increase the line height for these last two texts layers. We need something a bit more generous. Now, to finish off this lecture, please add a very light gray stroke to the new entry that we've just set up. You should have that gray save. Okay, we have a few more minutes and we're gonna be done with this design. Let's take a quick break and we're going to finish in a Jiffy. Thank you and congrats for making it this far. Thank you so much. 48. Using variants in the checkout screen: Welcome back. This is where we left things off. Let's create the text property. First. For the left text, this is the icon that you're looking for. Call it exactly that left. And on the right side, you guessed it the same thing, right? Text. Now we can create a variant where we simply change the color of the text. Now to be fair, this is not absolutely needed, but the variant opens up a lot of possibilities. You could add a background color for the right side, maybe an exclamation mark or an icon. There's loads of things that you could potentially do, but I'm gonna keep it simple for time considerations. Called this one normal, then the other one probably ever. Now, this should be quite easy to follow at this point. Let's get back to our design and see Wordsworth. First of all, from the assets panel, we're going to drag in four entries in total. Navigate. Now, I'm going to take the time to replace the content as needed. I'm going to need a few seconds to handle that, so please be patient with it. Here's the thing. I think I forgot to change the weight of the texts on the right side because here's the thing, this needs to be bold, so it stands out. This is where the user's attention is going to go by default. So the idea here is that we have the delivery time which is set by default. Again, this is quite important, which is set by default to SAP, which stands for the as soon as possible asap. And with mentioning gets 60 min again, that's quite useful. Further down we have the deliver the address and then the contact info because obviously we do need the phone number and finally the credit card number, the payment. So the idea is the user registered, right? But remember the fields from that step. It wasn't anything about his phone number, his address, or his payment inflammation. So this is why we're showing it right here. Now. Could we have added all of this in the registration process? Yes, of course, but that's not a good practice. So a potential client wants to first see the app, see all the restaurants. And once we have his attention, we have his interests, then we can ask for more info. But if you slept 12 fields in front of him without even showing him the app, the restaurants, the dishes. Well, that's frustrating and most people will leave the essence of an app. It's to guide the user with as less friction as possible. People aren't forced to buy anything. They have tens of reasons to drop-off. And that's not necessarily because of your design. May be late for work. Maybe they have something on the stove, what the kid is crying, or someone at the door and so on. So once you understand that people that use these apps are actual real people with real problems, then it all starts to make sense. So this is why with making everything so intuitive, so simple. So you could use this app even if you're half asleep because nobody needs any extra fraction in their life. That's why we're only asking for the West 100% needed at the right point. The one, the register, no problem. Don't have your card on hand. No problem. But yeah, overall, this is the design. In case you want to add the shadow, I suggest you first wrap all these guys, all four into an auto layout. And here's the thing will avoid the double border. You can use a negative value here minus one. That's totally awesome, right? And if you really want to be Becky, after you enable a drop shadow, you can select the first and the last entry and change the coordinate radius manually. Remember you can set them up individually. Please notice I didn't set the coordinate radius in my master component or my variant. That would have been a problem for the middle entries. So instead, I decided to control that, to control the individual coordinate radius from this place. Okay, let's take a quick break. 49. Think ahead for the prototype: Welcome back. I'm going to jump straight back in and create a few copies of this screen. And I'm going to change the state of the variant step-by-step. I'm also going to change up the text on the right side to something that looks a bit more reasonable. Now the idea here is to think about the prototype. We might make this interactive so both the client and the developer can have an easier time with it. The idea is that you click on one of these warnings and then you're taken to that specific screen, the payment that an address and so on, that will also reveal any flaws of any gaps. So e.g. screens that we didn't include, we simply forgot to include them. Pop-ups or various states that were not included in the brief or than the wireframe. Now, in case you wanna do a complete prototype, you will need to use this step-by-step approach that we're taking here, taking you through every single state. Now, here's the thing, complicated, super-advanced prototypes. Do. I recommend them? I say it depends on what? On the budget actually, if you're getting paid something like 500 bucks, no, I probably would not do a complete interactive prototype, right? Instead, I would do the most basic interactions just to show the standard flow of the app. But if this is 423, $5,000 and you want to impress the client, they ensure that go for it. But there's another case that you might want to consider. This is maybe for your portfolio right? Then, yeah, totally. You could do something special C, It's all about thinking for the long term, right? If this is a 500 bucks project, sure, it's not worth the money, you know, doing something impressive, doing an impressive prototype for the client. It's not worth it. But if this is one of the very few entries in your portfolio, then take this chance to create something that can show off your skills, right? The client gets something extra. Sure. He may not appreciate that. He may not pay you for that extra thing. But what matters most here is that you have a strategy. When someone visits your portfolio, What do you want them to see? Should you want to get paid? Which are the words, of course, but at the beginning of your career, that's always stuff. So you should feel at ease knowing that you overdeliver by a mile to a pretty good prototype to go into all of these screens, all of these extra steps. But here's the thing. When you have high expectations, that's when things fall apart. E.g. when you agreed to $500, but then you'd hit with loads more work than the wireframe suggested. And you think, Hey, I did plenty more screens. I'm sure he's going to pay me more. Or, hey, you know, this prototype took me more than words. But the truth is, that's not the case. The client won't care. The client won't pay you more. Maybe he might give you a small bonus, but yeah, basically you agreed to 500 bucks. And when you have expectations, when you get upset, That's when this is going to become a nightmare. Now, if you flip it, if you understand that you're gonna do all these extra bits as an investment in your portfolio in your future. They ensure this makes sense. Now for us in this specific case, this is a course about AB designing and Figma, not about managing your career as a designer, but I still feel like I should share these bits of insight with you. Now more than anything, I want you to be happy and that can happen if you're not getting into this career with your eyes open. So again, make sure that you think about your portfolio. You think about the long run, Right? Okay, let me finish the other screen, my orders as we chat about this and that. Here's the thing. After you place an order, you will need the screen that confirms that, right. But you may also want to reorder the next day or something like that. So what I'm gonna do, I'm gonna handle both of those situations here. I hope that you're gonna be surprised to see how quickly we can build up a screen in just a matter of seconds by reusing everything we've built so far. If there's one last piece of advice for you regarding these projects, I say it's this, make sure you allocate enough time for them. See this part where we work alone with good music playing in the background with a nice cup of coffee. This is not the hard part. Should you have to learn how to use components variance, although layouts, this and that. But this is not the hard part. This is the good part. I could probably finish this entire project in under the day, maybe even half a day. Who knows? But the tricky part is dealing with the client or the project manager. It's them not giving you enough information to go on. It's then being undecided about this and that, and this formed Figma into what it is today. This is why designers or the baking in so much flexibility into their designs because they're fed up by clients changing their minds. The main thing that you want as a designer is to move along to the next project. You have the skills to finish any project in no time at all. If you're just left alone with a comprehensive, brief and or a good wireframe. But that's not how it is in the real-world. Imagine if the client says, hey, we want more space between every row or bigger fields or rounded buttons, a different typeface, that different color scheme. Well, that's why we're using all these advanced features in Figma to basically protect ourselves against that. Now, sure, in this specific case, changing the typeface would still be a bit of a pain here and there because we didn't set up everything as a style. But as you gain more experience, you can insure yourself against everything. That's the thing, that's what you have to take care of. Okay. Let's have a quick break. 50. Final thoughts about the project: Welcome back. I still have the Contact Us page to create, but that's a very basic copy of my order. So I'm going to take a few minutes to go through the motions. Now while I work in the background, let me tell you how happy I am that you made it here. I wanted to include the serious project in this course, not a simple one based on a couple of screens, e.g. we could have stopped in the first half of the course with the first three screens. What I really wanted this to be real, to prepare you for the real-world. Now the truth is, it's a lot of repetitive work. It's a lot of preparation. But once you have your components set up, once you know what fonts you want to use, what colors and so on, things fall into place and listen some of my choices. I'm not 100% happy with the size of the fields. Some spacing's here and there, but we can always take the time to play with it. From this point, the sky is the limit. You can make this project look 20 per cent, maybe 50% better in 30 min or so. Just put in some solid work. It takes you e.g. 10 h to build the foundation. But after that, in the metal of minutes, you can transform the design into something much better. Please take the time to create your own version based on what you see here, I'd like to see new layouts, new fonts, better icons of different style of icons that built the lead different vibe, a different color scheme. Maybe make it more professional, more playful, whatever you can come up with, Go for it. Now assuming you're totally done with the project and you want to share it, please don't export any screens as PNGs instead, hit the share button from this place. The view, the details here, anyone with the link can view, that's the standard and I recommend you keep it that way. You could potentially invite someone by putting in that email. But I like to use this feature Copy link and then send it to whoever you want. When you want to show me your version, please use this button and send me your link. To end this part, you may ask, is this 100% then know that there's always things that you can do. But for now we can finish the design with a smile on their face. I hope that you're proud of yourself. This is totally awesome and I thank you for sticking with me until the end. I look forward to seeing your own version. Thank you and keep watching. There's more to come.