Add some navigation with our tabbar. Framer has a component called flow that you can use for this purpose and easily add navigation with a sticky footer or header.
- [Narrator] Framer has a component called Flow, that we can use for navigation purposes and add a sticky footer or header. Let's get to it. The first thing you want to do is go into your Tabbar. While we're in here, let me show you a nifty trick. If you're into a specific area of the application, you can actually browse through all the different sections by that little icon at the bottom here. So you click here and then you can move to the People List, Company List, Add People and so on, so forth.
So if you close it again, and you click twice, then you go back into that mode. Okay, so right below, back around Tabbar, we'll add a top. So right now we don't have any simulation that we're in an iOS app with specific information about your carrier and the battery and stuff like that. So let's just add that to make it more life-like. Okay, so we're going to get our top image so go back into your Exercise files, into the Resources, and then scroll all the way down to top and grab top@2x.
So let's add these things manually. It will be a little bit easier. So we'll do a height of 40, we'll do a width of 750 and it should be already positioned in the right place. So let me remove the 2x and then clean it up. Okay, this is where we'll add the Flow components. So Flow allows us to do a lot of things that would require a lot of code.
So let's go ahead and add Flow in a new Flow component, like so. So right now everything's sparse. It's normal, so let's add the header to make sure that our little header that we just added is still going to be there. And we'll do the top. See, it shows up? Then the footer, let's make sure that we are doing our background for the footer.
And then, because right now we're not showing anything, so Flow needs to know what is the first screen that we want to show when we first load the application. So the way you do this is, flow.shownext and then insert the layer inside of the Function that you want to show first. In our case, it's the People list. And the People list is the green screen, perfect. So, what we need to do next is to make sure that once we click on People, once we click on the Add button, or the Companies, we get to the right layer.
So right now, if we go back to our People list, this is our layer, it's green. So we want to see also, for the Add button, our layer that is yellow and for the Company list, the layer that is purple-y ish. So let's go back to our Tabbar and then we'll insert a few functions at the bottom. So we make sure that we're using the buttons that we just added here. So like I've explained in my previous course on Framer, everything in here is following a linear path, like java scripts, so all the code that you typed before is available for the code you write after.
So if you write something above here and your button hasn't been declared, then you won't be able to use it. So, just keep that in mind when you work on your prototypes. So we'll do People. And let's be more specific. So we don't mix up our stuff. So People button, we'll make it more obvious and contextual as to what we're doing. So People button and then we'll do a function. So onTap, whatever we tap on that specific button, will do this.
And again, this is not a basics course on Framer. If you don't understand what we're doing here, go back to my course Framer on UX Design and you'll understand that what we're doing here is a function, so when we tap on the People button, we do this. And in this case, we'll use Flow and we'll do shownext and we'll do PeopleList. So whenever we press on the People button, we'll see the People list. It's not doing anything right now because we're already on that screen so let's continue.
Let's copy this, paste it and this time, let's do Companies. And let's also be more specific, Companies button. So Companies button will bring us to the Company list, like so. So if we Save, we click here. Boom, we have the purple screen.
People, we have the green screen. And let's add the last one. For this one, it's the Add button. Let's also make sure that we're following the same contacts, so add with a capital A. Add button on tap, show AddPeople. Let me make sure that's the correct layer, yes.
That's another little trick so if you're wondering about any layers, you're not sure what's the name of it or what's the parent to child relationship for one layer, you see it all in here. So you see these are the buttons that we are working with. There's a flow component, which has all these things in here. And by the way, if you haven't noticed already, Flow automatically adds a scroll component. We won't have to use a scroll component once we add more stuff to our View.
And the other thing that this particular screen gives you is, what is on the screen. what is visible, what is not visible, When it's visible, it's like this, when it's not, it looks more like the overlay, a little bit like a paler gray, like this one here. Okay, so Add button, add People, let's test all this. Click on People, nothing happens because we're already there. Let's click on Add People, we have that yellow screen, which is our Add People and we can see that we're on the right one.
And then click on Companies. Yes, we're showing Companies and then let's click on People again and then we're showing People. Amazing, now we got a nice navigation and we're ready to start adding more items to our views.
- 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