Get introduced to classes and loops in Framer. Add a new people class and then use it along with a loop to generate multiple instance of your people.
- [Instructor] Framer offers tons of tools to make your workflow more efficient. And classes and loops are no exception. Classes let you define a new component type, like the recent text layer, with default options and then reuse this new type across your prototype. Very useful if and when you don't want to code the same stuff over and over. Also, loops allow you to iterate over items as long as it meets a condition. So we'll use both to create our People's list. Go into your People's list and then in here, the first thing we'll do, we'll insert an image.
And I'll explain why we're doing that and not using it. So let's first go and grab People Item into the exercise files and grab the 2X. So what we're going to do is create a class that will use that image as opposed to just use the image, so let's remove that and the reason why we need to insert the image first is for Framer to insert it into the images folder of that particular project first.
And then we can use it for a class. So we'll do that. And we'll go ahead and create the class. So basically you create a class by doing class and then naming the class and this is CoffeeScript stuff, so if you're not familiar with CoffeeScript, then I suggest you take a course on it. Extends and then layer. And then inside of it we'll do a constructor, so the constructor allows us to initiate that class with specific options.
And it sits in the images folder and then People, items, and you need to be specific with the name of the image because otherwise it's not going to show and in this case we drop the 2X of that particular image. Okay, so that's our class. Now our class is created but you're not seeing anything. Well that's for a good reason. We created the class, but we're not using it anywhere. So let's just quickly switch to our resources folder.
Go into the resources and take a look at the people item picture that we just inserted. So basically we have one item that we need to replicate a couple of times to make or simulate a list. So what we're going to do is do a for loop that will take our class which has that image and replicate it about a dozen times. And this way we'll create a list by using this one image. So you do this by doing a for, and again this is CoffeeScript, so for I in and then we'll create an array of zero to six, so right now it's going to create item, so let's do nine.
And then inside of it create a person layer which will use the new person and then for each layer add an extra 220 pixels. So what this particular for loop does is create 10 instances of your class and they'll call these layers person, and at each layer we'll add 220 pixels so we're not having 10 images on top of each other.
We'll have them follow each other along the line of our layer. Okay, the only thing that I just saw is that I just made a typo here is default, like so, perfect. So we got our list. And because we have a scroll component already in place, we can scroll through our list very easily. So we just need to make two changes to make sure that we're able to see all of our items because right now we can see one, two, three, four, five, probably six and we made about 10 of them, so the only thing that you need to do is change your height to about 2000 if I'm correct, and then let's make sure that we also change the color to People List to something around white so let's do 255, 255, and 255.
So we have a white background. Let's check back, yep, that looks better. Perfect, this looks amazing! So let's move on!
- 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