The difference between good design and great design often lies in the execution of details, especially alignment. In this episode, you will master Figma alignment tools and tackle a series of challenges. Let's go. Let me show you how to use the alignment tools in figma. First, let us create a frame (F) and then add a circle (C) into this frame. If you select the circle and then look at the top right panel. Technically, all alignments can be done here by adjusting the x coordinate, y coordinate, width and height of any object. The lock on the right can constrain the proportion of your shape. And the angle is for making rotations. This is the key panel for alignment. However, if you just use this panel, you will have to do a lot of math and inputting rough numbers. So let me show you more tricks. If you simply select the shape and drag it around, then you may see some red lines show up. These red lines means that you are either center aligning this element horizontally or vertically. So you can use these red lines as guidance. And if you want to move your shape around, try to hold shift and that will constrain the movement to a horizontal line or a vertical line. Another trick is to hold option on your Mac laptop or Alt on your windows laptop. You can quickly see how many pixels it is away from the edges of the frame or from any other element. If any of this is new to you, pause the video and try it yourself. Let me introduce you to the magic top right panel. The first tool in this panel helps you to left align your element in the frame. The second one helps you to horizontal align, the third one right align, the fourth one top align, the fifth one vertical align and the last one bottom align. I will also tell you the trick to remember these keyboard shortcuts. If you are using Mac, hold option. If you are using Windows, hold alt. And you know how in many computer games WASD are used to control directions. If you look down to your keyboard hold option and then w is exactly top aligned, a left align, s bottom align and d right align. And then if you hold option and v that stands for vertical align and h horizontal align. Now pause the video and try it yourself. What if we have multiple elements? Well, you can also select multiple elements and use these tools. But instead of aligning them to the frame, it aligns them to each other. So this is left align and then if we use command z or control z to go back. This is horizontal center align. This is right align. This is top align. This is vertical center align and this is bottom align. Now pause the video and try it yourself. There's one more tool left in this entire panel which is the one all the way to the right. This special tool is very useful when you have even more elements. So this time let us create three circles. I'm going to put these three circle on a vertical line. Now if you click this drop down tidy up. It's a smart function that helps you to tidy up the alignment. In this case, it helps you to distribute vertical spacing. And once that is done, this new field will come up and you can easily adjust the spacing between all elements. If we go back, let's try the second one. Distribute vertical spacing well it also helps you to distribute vertical spacing. And now if we put these three circles into one horizontal line. And now let's try the third one distribute horizontal spacing well now it helps you to distribute the horizontal spacing. And if you choose tidy up, it's also going to help you to distribute horizontal spacing. What is the point of tidy up then? let me show you some magic. Let's copy this circle again and this time form a shape like this. Now let's select all of the circles and then choose tidy up. You can see that even the icon has changed. This time tidy up is going to distribute both horizontal and vertical spacing into a grid like structure. Then you can adjust the horizontal padding and vertical padding separately. Isn't this awesome? Now pause the video and try it yourself. Now please open up the link from the description. Let's start with the first page. Challenge one - this is an example notification in apple vision Pro, except that its alignment is completely messed up. Your challenge is to properly align these elements so that it looks like a legit vision pro notification screen. And when it comes to alignment, feel free to use your common sense. The reason behind making this alignment decision is often referred to as Gestalt principles. And Gestalt principles include things like similarity, which means that we think things that look alike belong together and also continuity - we like smooth continuous lines and path. Before you go ahead and take on this challenge to align everything here, I want to give you a rule of thumb. Whenever you feel like you are not sure about what exactly to set for the padding between different element or for a specific x/y coordinate, try to use a multiple of 4. So 4, 8, 12, 16, 20, 24... the scale of 4 or the scale of 8 which is 8, 16, 24 ... These two are very well known scale to use when it comes to UI design and front end engineering. Using a multiple of 4, whether it's for setting a coordinate or setting a padding, will make life easier both for you and the front end engineer, and it magically makes things feel more aligned. Now pause the video and give it a try. Here's how I approach this challenge. First, this entire modal is not aligned to the screen. Even this is a spatial design. We're still assuming that the user is looking straight to the front. So let's first center align the modal. The next thing to fix is the alignment problem within the modal. Because these elements are within the frame, you might need to click multiple times to select the right element and then you need to hold shift to multiselect these elements and then I will align them to horizontal centers. Keep in mind that this tool aligns them to each other, but it doesn't mean that the bigger group is also aligned within the frame. So I'm also going to drag around until the red vertical line shows up, which means that they are not only center aligned to each other, but also center aligned to the frame. Now let's work on the vertical alignment. If you look into their Y coordinates, they are very random. I will work on this alignment top down, starting from the photo icon. I'm going to use a multiple of four here. So I will set the Y coordinate as 20 pixel. That also leaves enough margin on the top and I will use a 16 pixel padding between the icon and the title. You need to select both the icon and the title to make this adjustment. Now the specific pixel, whether you use 16 or 20 doesn't matter too much. However, anything under 12 could be a little bit too little. People may assume that the title is only associated with the icon if they are too close together. That's why 16 is a good choice. Now between the title and the description, negative number is almost always not a good idea. When it comes to padding, I am going to use two. Using a small padding suggests that the two elements closely relates to each other. Feel free to pause the video at any time to catch up. Now let's decide a padding between the horizontal line and the description. What padding did you use here? If your answer is close to 16, then you are an alignment legend. The division line here divides the upper section from the bottom section. If it's too close to the description text, it may make it feels like the underline of that description text. We want to leave enough room above, but we also don't want to take too much space. If we take away too much space, there's not too much room left for the action button. And finally for the action button, let's multi select the line and the two action buttons here. Apple decided to use a padding of eight pixel. In this way we leave enough touch target for each button. And because the Gestalt principle of consistency, let's say if there's any scenario with more than two buttons, the padding will remain 8 pixel. However, three call to actions in one modal is a lot of options. Speaking from a user experience point of view, using two buttons is much better. You give the user an option, but also not too many options that overwhelm them. And voila, we are done. Now pause the video, look at your design, and see which decision did you make differently from Apple and adjust your alignment based on what I've said. Enjoy. I hope you had fun. It was like ASMR for me. Now some of you may ask, what is the point of obsessing on all these small details and making it pixel perfect? Let me tell you a story. Once upon a time, I was living in London and I wanted to learn more about cryptocurrency and see if that's a good investment option. So I downloaded a few apps, and then for one of the app, it asked me to put in my credit card information and personal information. But there were some major alignment issues on that app and then I decided to not give all my information because that alignment issue to me is a huge red flag. So I googled about the app and then I realized that it was a terrible scam. Have you had an experience like this? Yes. Making everything aligned will make it look better. But the power of alignment goes way beyond its aesthetic. An aligned design builds trust. And if there's something broken in your design, that little detail might be the reason that a user wouldn't trust your product and continue to the next step. And with that in mind, let us move into another challenge. This one is even more fun. A little bit more challenging, but more fun. Now let's go to page two and work on the second challenge. This is a screen that Microsoft built to demonstrate how to use their fluent design system, and I've purposefully messed up all its alignments. Before you work on this one, I want to tell you this idea of margin. In most applications and websites, there is a margin. Here I put in a line to represent the margin. Usually, there's no information to the left or to the right of this margin, unless it's a carousel that can go all the way to the edge. For mobile apps, a very common margin is 16 pixel. And in fact, this app has a 16 pixel margin. Using a margin is necessary both for the aesthetic and for the functionality. Aesthetically speaking, without a margin, your product will look like it's very scattered and too much to take in. And when it comes to function, using a margin makes sure that people tap on the right thing rather than accidentally tap on something because our thumb is often at the edge of the phone when we hold our phone. And with that being said now let's break down this screen section by section. Let's first work on the header section. Pause the video and try to align everything on the header section and remember to use a 16 pixel margin. This search bar doesn't look center aligned. So I'm going to first center align the search bar and then I will hold option and see its padding in relation to other elements. We can see that it does have a 16 pixel margin but it only has a four pixel padding right now to the edge of this entire header. I would increase this to eight because I don't want the search bar to be too close to the tabs underneath because people can mistakenly tap the wrong thing. You can click up up or you can just do a math on the right - y axis minus four. Within this search bar, nothing is center aligned either. So I'm going to center align the element and then to ensure this bigger group is also aligned within the frame I'm going to drag them around until the red line shows up. Now I'll do a quick thought experiment on the touch target. There's the voice control on the right and then everything else is the search touch target. And for this reason I don't think it's necessary to leave that much space on the left because the search icon and the search tags trigger the same action which is just popping up a keyboard. And that is why I will align everything to the left to leave more room for the microphone touch target. Now let's work on the rest of the elements. The profile picture should have a 16 pixel coordinate. The padding between files and the profile picture shall be around 12* pixel. The search icon doesn't look like it has a 16 pixel margin, so I'm going to move it to the right until it right aligns with the right edge of the search bar. And then I will adjust the padding between the plus icon and the search icon. I'm using another multiple of four and this time I'm going to use 20. All these four elements also need to be vertically aligned. So then I'm going to select all these four elements and vertically align them and adjust the Y coordinate again. Now the heading section is done. Pause the video and reiterate on your design. Next, let's work on the tab section. This is the section that includes a line of pills. Pause the video and try to align this section yourself. Here's how I did it. I'll select all these pills, tidy them up and vertically align them. I will use an 8 pixel padding between these pills, and then I will hold option and adjust around until it has a perfect 16 pixel margin on the left and around eight pixel on the top. Now, when it comes to a right side margin, it doesn't apply in this case because this works like a carousel. So there could have more pills on the right side of notes and you can swipe this section to look at more options. In this case, you don't have to leave a 16 pixel margin to the right. Now pause the video and reiterate on this alignment. The next section will be very fun. You're going to work on the recent files section and nothing is aligned right now for this section. If you know how to use autolayout, it might make your life easier. The auto layout feature is covered in depth in the second module of this course. But for now, you don't have to know auto layout to align everything here. So pause the video and try your best. Here's how I did it. I will horizontally align recent files with the two icons to the right, and I will set its x coordinate to 16 pixel. Then I will set the padding between the pills and recent files to around 24 pixel. Here we are intentionally leaving some white space to make the section easier to scan, easier to read. White space is a designer's best friend, and for the two icons, I'll make the padding between them to 20 pixel. There's a lot of numbers here. If it's driving you crazy, put on a relaxing playlist. That usually helps a lot. But for me, I'm a perfectionist, so this kind of thing actually makes me happy. I'm going to explain through this entire section, but you can pause at any time to catch up. Now, for this next part, there are multiple layers of alignments here. On the higher level, the four bigger sections need to be aligned, and then on a lower level, everything within these sections need to be aligned. So here's what I'm going to do. I will first left align everything so that I can quickly nail down the x coordinates of everything. 16 pixel margin to the left, and then 16 pixel padding between the icon and the text to quickly check your alignment. Hold option or alt, and then hover your mouse over any element you want to compare with. And for the see more icons, they shall share a 16 pixel gap to the right edge because that's the margin. Now all the x coordinates are done. Starting now, I will work bottom up to nail down the y coordinate of all the elements. For each section, everything's supposed to be center vertically aligned. However, you cannot simply select all four elements and then vertically align them because then the two text boxes are going to collapse. That is why I will first group the text boxes. Here I'm selecting the two text boxes, adjusting their padding to zero, and then I will group them. You can hit command g or control g after I group it. Now I can select all the element and center align them because now the middle part is treated as one element. I will now repeat this process, adjust the text padding to zero, group them, and then center align everything. Now everything within these sections are aligned, but the bigger sections are not aligned yet. So next I'm going to create another layer of group. Now I can select all these sections and quickly adjust the padding between these sections. And I will use a 24 pixel padding and I will group everything I'm selecting right now again, so that I can adjust the padding between recent files and this bigger section to around 20 pixel. And finally we are done with this bigger section. As a recap, when it comes to complex design like this, you need to make sure that higher level and lower level sections are all aligned. You can break the problem down and you can work from bottom up. Now pause the video and catch up. Now let's work on the media section. I assure you that this one is also very fun. Pause the video and try yourself first. Here's how I did it. First, adjust the text box, make sure the x coordinate is 16 and I will set a 16 pixel padding between the text and the line. For this part, we can use the magic tidy up tool. It will help you to align this section as a grid style and I will set both horizontal and vertical padding to four pixel. If you test it, you can see that in this way, the margin to the left and the margin to the right will be exactly 16 pixel. I also want an eight pixel gap between media and this entire picture section. So I will group all these sections and then set the padding. Now pause the video and try it yourself. We only have one part left. Now pause the video and try your best to align the bottom navigation section. Here's how I did it. I will work bottom up again. First, I will align the icon with the text to vertical center and set a vertical padding of zero pixel. And I will group the icon with the text to form three bigger groups. Then I will align the three groups to horizontal center, set a zero pixel padding. And finally, I will multisellect the three groups and move around until the red line shows up so that I know that these three groups are not only aligned to each other, but also aligned to the center of the phone. And that's it. Pause the video to catch up. I hope you learned a lot there and had a lot of fun. Now I want to tell you something very important. Obsessing with these details can make your product better. However, there's an assumption. The assumption is that everything previous to the high fidelity design stage are done well. Anything you do on the UI level cannot solve business strategy problem or product design strategy problem. So please make sure before you start obsessing with these details on the UI level, make sure that you are tackling a problem that actually exists for a group of target audience and you understand what this problem is and who's the target audience. And make sure you've designed a great user flow that is significantly better than whatever the user is experiencing right now. And also make sure you've made high level design decisions using low fidelity prototypes or wireframes for each page. What is the bigger structure? What is each section about? Where is the call to action button, and what is the weight of different sections? Only after these you can start obsessing about turning these low fi prototypes to mid fi prototypes to hi fi prototypes, and then also work on a design system or using the current design system. If there's anything wrong on the higher level, UI design cannot solve that problem. I hope you learned a lot and had tons of fun in this episode. Now you can go ahead to your own design files and then polish up the alignment of your designs. And for those of you who are watching this on YouTube, this is an example episode of my fast track UX course, designed for designers who want to break into tech as a product designer designer or as a UX designer The learning experience in fast track UX feels much more systematic and put together comparing to learning from YouTube because YT feels a little bit more scattered and sometimes you don't know what you need to learn so you don't know what to search for and the algorithm doesn't show it to you and then you ended up learning skills that are not the key to unlocking a job in the tech industry. Also, if a skill set is hard, less people will search for it because less people know it and then the view count of that video tends to be lower. So the algorithm also won't suggest that. So overall, YouTube is more friendly for the beginner uiux design market. But if you want to learn something in depth, I will highly suggest you to enroll to the course. If you are not interested, don't worry. In 2024 I will keep posting valuable content on YouTube, Instagram, LinkedIn and TikTok. Don't forget to follow me there as well. Enjoy aligning! It's like an ASMR and I will see you in this video.
