Create your initial views and the tabbar. First, create three layers for the views you'll work with, then leverage our image assets to add the tabbar and its icons and finally organize your code.
- [Narrator] As mentioned in a previous video, you should be fairly familiar with Framer, or at least taken my course, Framer for UX Design. If not, I would recommend you do so. Otherwise, let's get right to it. So once you have Framer open, click on the plus sign, here, to create a new project, then click on phone. So, the standard device selected is the iPhone 7, so if you want to select something else, feel free to do so. But be aware that the resolutions that we're going to set for our images are going to be for the iPhone 7.
So I would recommend for this course you follow along. If you want to test something else after, feel free to do so. But if you select something else, then realize that the resolutions are not going to be the same. Okay? So, like we've done in the previous Framer for UX Design course, you insert a new layer by clicking here. And for this one, we'll just insert regular layers. And this one, we'll call PeopleList, and then we'll change the properties. So you can change the color to anything you want because at this point, we're just going to do a temporary layer just to see the transition from one screen to another.
And therefore, it doesn't matter if you select a collar, and it's not the same. So, let's go ahead and select any type of collar, so we'll just go for something brighter, though. Beautiful green, like so. Make sure the opacity is at a hundred percent. And then for the size itself, you want to do a width of 750 by 1334, which is the full length of that phone.
You could have done something like that as well, you could have just simply resized it manually like this and then follow the guides, as you can see, and it would do the same thing, okay? We'll create another layer, and this time we'll call this one CompanyList. As you may have guessed, these are related to the layers that we had on our designs earlier, okay? So for this one, let's go ahead and resize it manually, like so. And we're just slightly bigger, so let's make sure we are accurate.
And then for the color, select something else. Let's use another tool to do that. Magenta, perfect. Then let's create a third one. This one let's call AddPeople, so this is going to be our layer where we add people. Let's go into our tool again, resize, change the color, let's use another tool again so you can see all the options that we have.
This is very close to what we had earlier, so let's do a bright yellow. Please wear sunglasses if that hurts your eyes, okay? Then, let's do the tab bar. So this one will be a little bit more specific as to what we want in there, and we'll use the code area to do so. So let's create the layer first. For this one, we'll call it BackgroundTabBar, like so. And for this one, let's insert a few properties directly in here, so I'm going to be very specific with this one, but we could have done this directly in here as well.
But I want you guys to practice a little bit in the code editor as well. So, let's do a background color. For this one we'll do an rgba. And for the values, we'll do 38 by 166 by 154, one. And that is exactly the color that we want. We'll do a width of 750, and then we'll do a height of 114.
And then we'll position it at the y-axis at 1020. So it'll be at the bottom, so this is going to be our taskbar, okay? Then we'll insert the button that will go over the taskbar. So let's go ahead and insert an image this time. And go into our resources file, so go to the desktop, exercise files, resources, which everybody has access to. And click on the add button at 2x, this is what we want.
Perfect, right now this is very small, so we'll change a little bit of those values. So we'll do 128. And for the width we'll do 124. And if you want to reorganize these so it makes a lot more sense where they are, feel free to do so. You can do something like this, so it's more organized. And then we'll do a y, and you could have done this as well manually, so you could have clicked here, and then just move it to the bottom like so.
And then you have a position that's quite centered, and I believe that's very close to what I want. So, almost there. Like, by two pixels, what I had for the y-axis. Everything else is pretty much the same. And I don't like to have the 2x in here, it just complicates the typing afterwards, so remove that if you have that, too. Then we'll add the other two buttons, so we'll go and seek out our company.
So, the first one is companies, at 2x as well. And let's practice in the properties panel for this one. So we'll do a width of 100, then we'll do a height of 94. And then for the x-axis, we'll do 535. And then for the y-axis, we'll do 1232, like so. So you could have done this manual as well, so you could have just simply dragged and dropped this digital image wherever you want, that should be fine.
And the last image that we need to insert is our people button, and let's go and find people. Not people items, but people, at 2x as well. And by the way, while we're on the subject, I've took the liberty of adding the regular size, the 2x and the 3x. What you'll find is if you use any of those, it's not going to make much of a difference once you insert them into the prototype, but it's just the quality of the actual images.
I find that a 2x is just perfect, but if you want to use a 3x or the regular one, feel free to do so. But when you actually make the height and width, you'll see how the size impacts the quality. And then you can make a different choice if you don't like it. But I always go for the 2x, and it looks good, okay? And then let's just use the properties panel again. For this one we'll do a 60, and a 92. And then we'll position it at 122 for x, and 1232 for y, like so.
So before we organize our stuff, let's just remove the 2x like so. Let's see if we don't have any other layers that have a 2x, it doesn't, okay perfect. So before we move on, let's organize our code a little bit. Okay, so what we're going to do before we move on is to organize our code a little bit. And the way you do that in Framer is by doing a comment, like so, and then fold the code. And if you followed my course, Framer for UX Design, you remember that we were doing this throughout the entire prototype.
So you do that, and then you fold. So what that will allow us to do is down the road, when we have a lot of code to switch inbetween screens and not have all the other lines of codes distracting us. So we'll do the same for CompanyList. Fold. We'll do this for AddPeople as well. And everything else will fit under the tab bar.
Perfect, so we've got our tab bar ready to set our navigation. We'll do that next.
- Researching UI colors, styles, and fonts
- Using assets available in Framer
- Creating views
- Adding navigation
- Using classes and loops
- Importing a module to extend Framer
- Creating inputs
- Adding a detail view
- Adding final interactions
- Animating a popup
- Animating a function