Create your person detail view. Add all of our images we need and position them properly so we can continue with the interactions for this view in the next video.
- [Instructor] So hopefully you didn't have any troubles adding more of the inputs. And if so, this is what it should look like. You should have all these different inputs, like first name, last name, phone, email, company, project, notes, if you go into the add view and you click on any of 'em, you should be able to enter anything in any field like so, and then when you click on add, you should be brought to the people list view.
Okay. And also you can always check the exercise files if you're struggling or if you don't have the exact same code, feel free to look into those. So at this point we are missing just one view to complete our prototype. The person details screen. So let's get right to it. So the first thing I want you to do is exit out of that particular view, like so, by clicking on the X. And then let's create a new section. Which we'll call detail view.
And it's possible when you insert new images or new layers while you work on the detail view because we've worked in between those two, and then we're out, that they insert at the top or somewhere weird, this is currently an issue with Framer, but just correct it and it should work fine. So for example let's go ahead and add the detail view. So Insert, Image, and find the detail_view 2x, open, as you can see it's just inserted it right there, which is wrong.
So let's go ahead and do it here, and then make sure that your tabs are correct. Remove the 2x and then let's make sure that we have the right height, and the right width. And then add an X of 24 and then a Y of 1374. So before we actually do 1374 let's make sure it's still onscreen while we're working on it.
So let's just do 40 for now, and it should be fine while we're working on it. But once we do the actual interactions with it, we'll need to bring it out of the screen. Alright, so let's continue by adding another image. Click Insert, Image, and then find the close_corner and just cut paste and make sure also that the parent on this one is the detail view, so if we do anything to the detail view, the close corner as well will be impacted by those animations or interactions.
Let's remove the 2x. So for the height and width you do double that. So 154 146 and for the X and Y you want to do 543 and you want to do a Y of nine so it sits right in the corner right there. Kay, so let's continue, so we need to have three buttons, the call, the SMS, and the email.
Let's go and grab those. And if you feel confident enough to do that, feel free to pause, do it yourself, and then see where we're at. So the call to X, Let's do the other images as well right away. Email, and let's fold our code so we have less lines to worry about.
You do that by highlighting everything and then Fold. So click on here to get there. And then let's just add our last button for this section. Which is the SMS. And it will play with me 'til the very last minute. Let's remove the 2x right away.
This is a pet peeve of mine. Kay. So we have two more images to add and then we'll just do the adjustment for each one. So let's go ahead and add the edit section. And then add the delete section.
Okay so remove the 2x, and let's do a few changes first. So let's copy and paste the parent, and let's make sure that we add it, and then for the call, you could do all this inside of the properties if you wanted, or directly inside of the view, but I like to be specific so let's go ahead and do that here. So the first thing you want to do is double all the values.
Like so, so for the X I will put it at 66, and for the Y, I will put it at 874, like so. Then for the email I will make sure that it's a detail view. As a parent, and I will double the values here, 186, 154, and then for the X and Y, the X I will do 483, and the Y I will do 874.
So SMS again parent X 405 and then Y 874, again. And make sure you double the value as well, like so. 154 and the X is 273, actually.
Perfect. So two last images, same story, parent, let's paste it, paste it as well, so double the value, 68, 162, then we do an X and Y, so for the edit section, the X is 111, and the Y is at 727, and for the delete section, we do the double values, and for the X it's 405, and for the Y, it's 729, like so.
Alright, the view's done but now we need to have interactions and have it appear when we tap an item on the person list. We'll do this in the next video.
- 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