Add two images that will be the background of this view and a button. Then add a new input module so you can have real text input interactions in your prototype.
- [Narrator] So now, we need to build our Add Person View with a form. We could simply add a static image and we would be done, but that's not fun. I'd like the form to be interactive and be able to input some text. So, right now, there isn't any existing component in Framer for this purpose. So, what can we do? If anything is missing in Framer, there is a possibility to extend it with modules. So, let's see how that works. I want you to go to your browser, and then go to github.com/ajimix/Input-Framer.
And I also took the liberty to download and extract those files into the resources, so if you're not able to get to that specific page, or for whatever reason you want to load it from our resources, you can do that, as well. So, if not, then download the zip, and then unzip. So, in the Resources file, it's called input-Framer-master. And what you want to do is open another window, and then copy and paste the input coffee and the keyboard image.
Because if you're doing any testing in Framer, or if you're sending it to Framer cloud, then you need an image of the keyboard. Otherwise, if you're testing it directly into your device, your iPhone, you'll have the real keyboard. So, copy those two files, and then go into your Framer folder, go into modules, and just paste them there, like so. That's it, that's all you need to do to add modules to Framer.
You can close that, go back to Framer, and then the first thing we'll do, we'll go to our Add people, and then at the top of the file, the first thing I want you to do is create a variable, InputModule, and require input. So, what that will do is tell Framer to look into the modules and find a module called Input, and they'll find it because we just inserted it in there.
OK. So, I want to make sure that we have a white background, as well, because from this point further, the background will be white. So, 255, 255, and 255. And then, we'll insert the two images that we'll use to create the background of our input of our form. And then, we'll add on top real inputs that people can actually add text to it. So, let's go ahead and insert the image, and go into your resources, and find form, and make sure you do the 2x again.
And for that particular one, let's just remove the 2x, and then do a few things. So, for the position, we'll be at 44x, we'll be at 127 for y. For the size, we'll be at 670 for width and 673 for height. And these are all based on the actual image, to make sure that we're doing this right. And then, make sure that you add in the properties that it's the parent of Add people, like so.
So, if we go to the Add people, you'll see somewhat of a form, OK? Then, the next thing you need to do is insert the Add form button. The reason why we're splitting the button from the actual form itself is, when you need to do a specific action in Framer, if you need to click on the button and then do something with that action, you want to make sure that you're separating that particular item that you need to create an event with, and this is why we're doing it.
Because if you're simply clicking on the whole image, then anywhere you click on the image, it will go ahead and do that action. So, we want to split the form from the Add button, and we want to go for the 2x. And the height is not 336 but 673, that's why we're not seeing more of the form. Perfect, this is better.
OK? So, let's remove the 2x. Let's do a height of 79. Let's a width of 663. And we're following similar sizes as the other form. Then, we'll add the parent as Add people, and we'll do an x of 44, and then a y of 879. And again, you could've done all this manually, so you could've simply gone here, and then click, and then move your Add button anywhere you want.
And there's a reason why I put it here for now. It's because I want to have some space to work when we have the real inputs, and then we'll reposition the button as needed. OK, so let's just bring that back to 879. And for now, it'll do. OK, so we got our module ready to go, and we'll use it in the next video to build our inputs.
- 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