And I'm gonna select a 2% letter spacing. We're actually let's go a little bit heavier, maybe medium, and font size I'm gonna select 15 pixels. I'm gonna set its font family to Futura PT and font style is gonna be book. I wanna make this uppercase, so I'm gonna do that. So T for text tool, I'm gonna say sign up with Facebook. And for the button, I'm gonna do the following, I'm gonna start with the text. Ungroup, rename this to icon-arrow-left and create component. Finally, the last icon I'm gonna add, is an arrow left and I'm gonna choose this long version here. Right click, Ungroup and I'm gonna call this icon-envelope or icon-email would be a better name for it, create component. Again, click drag, and I'm gonna resize this to 24 pixels. I'm gonna choose, I'm gonna search for envelope, and I'm gonna choose this one. So click this button, and now I have a component called Icon Facebook. And what I'm gonna do is I'm gonna create a component out of it. And I'm just left with this vector, which I'm gonna call iconfacebook. I can actually right click on the group that's gonna get rid of the parent frame. And I'm gonna resize this to 24 pixels, just like that. And that's gonna resize the width and the height at the same time. So let's resize it, I'm gonna click this button that says Constrain Proportions. And actually, I think this doesn't work directly, but we can just click and drag it in. So what I'm gonna do is copy this Facebook square, copy, and let's go back to Figma, paste.
#Figma login free
Right now I'm using Font Awesome, the free version available for desktop and you'll find a link to that as well.
And then you can grab this icon, you can paste it, you can export it, you can use it in other software. And then you can browse them, so you can even search for a specific icon, for example, Facebook. And with it, you can basically add your own icon sets from your files, on your computer. You can use it on both macOS and Windows. And let me just bring this over, so you can see it better. Next, I wanna grab some icons, and for that, I'm gonna use an app that's called Icon Set. But for now, we have our first component, which is the logo. So it's really easy to create, for example, a button component and then each instance will have a slightly different style, and I'll show you that in just a little bit. And also, any instance of a component can have different styles than the master. And if at any point you want to change the master component, it's gonna change all of the Instances automatically which is fantastic. Because you can have a centralized file with all of the components and then your team members can use instances of those components. Also components are very useful when working in teams. Let's say for example, I want to change this fill color, all the instances will be updated automatically, that's the main purpose of components. So what that means is that, if I'm gonna go to my master element and make a change. And if I'm gonna make a copy of this, I'm now going to have an instance, I said child earlier, the correct term is actually instance. So components are elements that can be reused and they function on a master child system which means the one that you see right here is a master. So now, I just transformed that standalone element into a component. To do that, I'm gonna click this little button here, or I can choose to use CTRL+ALT+K as a keyboard shortcut. And the next thing I'm gonna do is create a component. And I just downloaded the source files, copied and pasted a vector version of the logo in Figma. You'll find links to all the assets that we're gonna be using in this lesson, in the lesson notes. And I got this logo from Envato elements. And the very first one is the logo for the app. The second page will be for the actual Screens. Now I'm gonna have two pages in here, just to help me with the organization a bit. And this new file is gonna be called Sign-up Form. So what I'm gonna do is create a, new project under Mobile Apps because we're gonna be designing a sign up form for a mobile app. But we are don't have to worry about those right now. And you also have some additional options and this drop down here like the Interface Scale and Color Space. And any file that you open will be opened in tabs in this top bar here. Well, the only difference is that, to get to the home screen, you now have a dedicated button right here, a Dedicated tab. And as you can see there's no difference than the browser-based one. For this lesson, I switched to the Figma desktop app for Windows.
#Figma login how to
And how to work with some new tools that we haven't covered yet, like components or the layout, color, and text styles, and more. We'll be designing a sign up form, a very simple one using, of course, the knowledge that we got from the lessons so far. In this lesson we're gonna do something practical.
0 kommentar(er)
