3.1 Designing in Figma
In this lesson we’ll put some of the theory we’ve learned so far into practice by designing in Figma. Let’s begin.
1.Introduction2 lessons, 04:26
2.Getting Started With Figma5 lessons, 37:08
3.Using Figma as a Designer3 lessons, 29:59
4.Using Figma as a Developer1 lesson, 04:27
5.Conclusion1 lesson, 02:37
3.1 Designing in Figma
Hello and welcome back to this course. In this lesson, we're gonna put some of the theory we've learned in practice and design two pages in Figma. Now, we're gonna start in this demo mobile app project. We're gonna create a new file. We can call this Demo App. Now I'm gonna start with a frame for iPhone 8, let's say. And I'm gonna start by designing kind of a header element here. Now something like this. I'm going to press zero so that I can see everything at 100%. As for colors I can hit CTRL-C to bring in the color picker and choose a color of my liking or I can bring in another color. So in my case I'm just going to paste in on this kind of a bluish gray color. Now you will see something interesting. If you select the color, or if you open the color picker, you're gonna see a couple of options here. You can choose between solid linear or linear gradient, angular gradient, diamond gradient or image. And you can also switch between the team colors or the Team Adi Colors. Personal colors you can add these if you want and then document colors. Now, the document colors are added automatically. So here I have three of them. I have my canvas color which is this. I have my frame color which is white, and I have this background color which is this one. So as you'll be using more and more colors these will be added automatically right here and you can switch between this view And this view where we can also see the hex code, really cool. And you can also collapse or expand the section, just in case you have more colors and you need to see all of them. This is especially useful for developers, because they can grab all of the colors from the same place, instead of manually having to search for each one. Then, I'm gonna enter edit mode here and I'm gonna nudge this down about 60 pixels, something like this, or actually let's nudge it down 30 pixels. Then what I'm gonna do, is simply exit this editing mode. I'm gonna duplicate this shape. I'm gonna double-click again, and I'm gonna nudge this down, 30 pixels as well. And I'm gonna use a slightly lighter color here. And I'm also gonna put this layer behind the one I created previously. And then I'm going to do the same thing, duplicate this, put it behind my second layer. And I'm going to enter edit mode and I'm going to match this corner 30 pixels down again. I´m gonna show all of them, and then, I´m gonna select an even lighter color for this one. All right, now let´s put in our logo. But before that, let´s actually create a oval. We´ll set this to white and we'll give it a border. Let's see, stroke. We'll add a stroke, black. Let's put it at about 10%. Let's put it outside. And the weight as about 20, or maybe a bit less, like 10. Yeah, something like that. And I'm gonna increase the size to about, let's make it 155, or 160. All right, now let's put a logo inside here. The beauty of Figma is the fact that you can basically copy any kind of vector from other applications like for example Illustrator or Sketch and paste it right in or simply drag and drop. In my case, I have an Illustrator document here. And I'm just gonna I'll choose this MA, this is a vector kit that I got from the logo kit. So I'm just going to copy, paste it right in I'm gonna resize it, until I hit the ops the centerpoint here. Resize it some more, something like this. And then I can select the individual layers, and may be I'll choose either one of the document colors, or maybe one of the team colors. Let's say that, for example. Now, I'm gonna create a component out on this logo and you actually get a small pop up here letting us know that hey you can share components. And then let's move on to some inputs. So, I'm going to grab the rectangle tool. I'm going to draw a rectangle like this. I'm just gonna make sure of that I start at 30 pixels from the edges of my document, just like that. Let's make these about 45 pixels or maybe actually 60 pixels in height. And let's give them a border radius of five. For color, I'm gonna choose F4, F5, F7, which is a really light color. And I'm going to position these at 60 pixels from the logo. Now inside, I'm going to create my text, basically. Let's say or let's say input text. For color I'm going to use black with let's say a 20% opacity and about 14 pixels in font size. Now what I want is to also have an icon here next to the input text because I don't want to use any kind of labels. So the first icon's going to be an envelope. I just grabbed this from an icon set that I have and I want to set a fixed width for this. I'm going to activate constraint proportions. I'm going to give it a width of 30 or maybe a bit less, maybe like 20. Yeah, that looks all right. And I can also change the fill color here. Let's say black and with an opacity of 25 or a maybe a bit more. Let's say 40. That looks about right. So i'm gonna position this icon right in the middle. I'm,gonna place it at 30 pixels. No, actually I think 15 pixels should do the trick here. And another 15 from the icon to the text. Now, the whole idea behind this input is that I want to transform it into a component that I can reuse after that. So, I'm gonna select everything. I'm gonna group it up as form input. And I'm going to create a component. Now, for components, what I'm actually gonna do Is simply move this outside. You can create a different frame for it if you want. But I'm moving it outside and keeping it as master. Then I can simply drag in and use instances of that master element, right? So, in here, I can simply change the text to email address. And while I'm here let me just increase the size of this text so it looks something like this. Now, what about other icons? Well, I want an input for password, and maybe I'll need one for a user. So I´m gonna drag and drop some icons for those. Here´s a lock, I´m gonna fill this, and set its opacity to 40%. And also set its width to what is this 20 and I'm gonna move it in. Make sure it's properly aligned and then simply going to leave it like that. And then another icon for a user. Maybe something like this. You're doing the same, set the opacity to 40, and set the width to 20. And then make sure we align this properly as well. All right, so it's a big jumble in here with all of those icons. But in each instance, what I can simply do is hide the icons that I don't need. So I don 't need the lock, I don't need the profile, I just need the envelope icon. So now I can simply select this command D which will duplicate it. Let's set this at 15 pixel distance. And in here let's say password and then I can select this and I can hide envelope and show the lock. And if I had the need for another input I will just repeat these steps. Now what about a button? Now buttons is actually really easy to do. Let's do roughly the same steps. I'm going to choose the fill. For example, this color gonna position to set a 30 pixel from the top and then 60 in height and also resize it to match the width of my inputs. And inside I'm just going type sign in, for example. I'm going to use roboto bold aligning down the center and I'm going to fill it with white and why not add a drop shadow? You're going to set one for blur, one X, one Y. Just a small shadow like that. Nudge this down a little bit. Then, select these two, group them up as button, create a component, and as with all of the components, I'm simply going to move it up. And then I'm gonna create a instance right here, and the button is done. What it's doing, it may be a link here for forgot password, that's gonna use Roboto regular. And the fill, I'm just gonna use that color. And I also wanted underline, so I am gonna click the Text Options and select Underline. Align the text in the center, and then align it in the center of the page. And let's position this at let's say, 30 pixels from our button. Finally, let's add Final section here on the bottom and I'm gonna fill this with my initial black or my initial blue that I used here on the top and that sort of text. So I'm gonna copy that bit. I'm going to move it down and I'm going to say don't have an account create one now. This piece of text I want it to be white, and also not underlined. So this is a regular piece of text basically. So if we tap this link here on the bottom, it's gonna take us to the create account screen. If we tap this link it's gonna take us to the forgot password screen. And if we successfully sign in, it's gonna take us to the main screen of our fictional app. Now before we move on, I wanna talk about two very important things in Figma. The first one is constraints. Now if we select an element. For example, this circle here. You will see two dotted lines, one to the top and one to the left edge. That basically means that that element is anchored to the top and left sides of my frame. I can change that constraint by using these controls here. So I can control how the element behaves when I change the width and how the element behaves when I change the height. So this bit I always want to have in the middle. Let me actually group these up. All right so what I can do, is that when I'm resizing, I want this element to be in the center. The same goes for my logo here. Now I don't actually see the constraints here and I wonder what the problem is. So we have group. Let's, so for some reason, these did not get included in my frame here. Sorry about that. So I wasn't actually seeing those. That's totally fine, though. We are just going to move these outside and have all the necessary elements in place. And what I am actually going to do is group these up and now I can set the constraints for the group instead of individual elements all right. So on let's actually see what happens if I change the width of my art board here, or my frame, right? This stays exactly in the middle. But, I'm going to select the logo and also set its constraints to center and top. So now when I resize that element will always stay in the center, what about these elements? I'm going to select all of these and I want them to scale whenever I'm changing their parent. And I'm also anchoring them to the top. So now when I scale this It also scales my elements, which is pretty cool. What about these? Well these I want to scale as well, but I want them to be anchored to the top. So again, top and scale and the button as well. I'm going to select scale here. This should always stay in the center. And I'm going to anchor it to the top, and I'm going to set it to center, sorry. And this bit should always be in the center both horizontally and vertically, and this should scale. And be anchored to the bottom so now if I decide to enlarge this bit. That stays in its correct location but these actually should be anchored to the bottom not center sorry all right? So, they're always at the bottom. Now, by doing this, you make sure that your design can be resized without you having to manually adjust their position or size which is fantastic. You can go back to your original frame if you want. And notice when we resized we had some stretching here on the icons and we don't want that. So let's actually select all of these icons profile lock and envelope and the constraints should be very simple. And we are going to pin them to the left and to the center here all right. So now whenever we make a change. When we resize an element, they'll stay in place. And we need to do the same for the text. So this one should also be anchored to the left, and the center. So now when I resize, everything stays exactly where it should. That is pretty awesome. Now, the other thing that I wanted to talk to you about is the live device preview. Basically, you can use your iOS or Android device to live preview what you're doing on the screen. So, I have my iPhone here. And the app that you need to install is a free app called figma mirror. This will basically connect to your figma account and whatever it is that you're working on. You just select the frame that you want to display. And it's going to be displayed. So now I have the iPhone frame selected. Maybe I want to hide the logo, right? And it hid the logo. It works pretty much in real time. And although there is a little bit of a delay because it's not connected directly to the ad that I'm working on. Instead it goes through the Figma servers. The changes do happen almost instantly so it is acceptable that they are called live preview. Now I'm going to wrap things up here, I don't want this to be a very long lesson. I just wanted to quickly show you how to design a simple page in Figma. It was really easy and intuitive for me. I mean, I'm coming to this after working a very long time with Sketch, and Photoshop before that. And, I had absolutely no trouble just starting working in this. I pretty much knew how to find anything I needed. All of the options were presented very well. It was very clear what they were doing. So, yeah, it was a very smooth transition. I'm not saying that I'm gonna replace Sketch with Figma, but In the future, who knows? I might, maybe after they add a couple of features that they currently still don't have, but Sketch does. But that's a discussion for another time. Now, we took a look at how to design some elements. In the next lesson we're gonna have a look at how to do prototyping in Figma. Because, that's a very big deal with this platform. So, I will see you there.