In this video, Emmanuel Henri creates a new Framer project then starts adding the new background that is used throughout the prototype. Then he adds the new layers to a parent and folds the code.
- [Instructor] Now we'll get started with our official new project in Framer and for those who imported from Sketch in the last video, please start a new project with us since we'll add our own images files manually to support those who don't have Sketch installed. So let's go ahead and create a brand new prototype. So if you don't have Framer open, please go ahead and do it. And then click on the Plus here to create a new project. Let's save that one right away. I'm not putting my application fullscreen yet because we're going to import the files from the Exercise Files, but let's go ahead and save, so I'm doing Command + S.
I want to save this on the Desktop and we'll call it purchase-flow, like so. And then you need to go inside of the code area and change the canvas to an iPhone, so let's go ahead and click on the little arrow here, select Apple iPhone, iPhone 7. So, we make sure when we import our files, they are going to be sized to the iPhone because this is what the original design was in Sketch.
So let's go ahead and click on the Exercise Files, resources, and there's a few things you need to grab. The one is the background here. You need to grab also the categories. Let's scroll a little bit. We need to grab the logo, not the logo_noline, this is for later in the course but you need to grab this one. You need to grab the message_area. And also, we need to grab the profile_picture and the shopping_cart.
With all that set, let me just recap what we need to import in here. So, background, categories, the logo, message_area, profile_picture, and the shopping_cart. So basically, just drag and drop these images inside of Framer and Framer automatically creates new layers for you. This is the same process too when you import videos inside of Framer. It creates a new video layer automatically, so this is something that I really like about Framer.
It already creates it with the right with and height for all your items in here. So, let's go ahead and change this. It seems like I have two logos in here, so let's see what is the issue. I have one logo here and it's also creating a second logo behind and I know why. Because basically, the background, I believe comes with the logo. So let's just go and take a look to make sure.
It does. Okay, so let's remove the logo here, like so, and we should be fine. Okay, so once you have this imported, let's go ahead and maximize the screen. All you have to do at this point is use the Properties icon here by clicking on it to position your things on the screen. So the background is already positioned accordingly, so we're good. The categories needs to be positioned lower in our application, so let's go ahead and grab it.
There's two ways to position things on Framer. You either click here and then position it manually, like so, or what you could do is use the Properties panel on the left here or use the code directly here. For the timing, I'm going to use my mouse to position them and then maybe we'll readjust this as we go. Let's do the same for the message_area, like so, this is where I want it.
Perfect. Then let's go ahead and do the profile_picture. For the profile_picture, actually, I want to have it positioned very precisely on the left of the logo, so I'm going to first do it with the mouse and then I'm going to use the values in here and position it to my liking. The y-axis, I want 56, to be precise and the x-axis, actually, I was right on the dot at 31 pixels.
The same for the shopping cart, so let's go ahead and select the shopping cart. So you click on the Properties icon here and let's go ahead and first position here so you can create the values inside of the code area, the code editor, and then let's basically do it manually by inserting values that we want. For this one, I want 61 and 282, to be precise. And again, this is purely aesthetic from what I've done in the past and this is kind of reflecting what I've done and it looks good to me.
But if you don't like it, you can change it to whatever you want. Something that I've shown in the previous course for Framer is how to fold data with the code, so one thing that I'm going to do here is add a little comment. So this is the background view and what we're going to do is fold that code and I'm going to show you a shortcut how to do that. So you highlight the code that you want to fold.
I always forget that you can only scroll from the top. Let's go ahead and do that. So I highlighted the code that I wanted to fold and then you can either do two things, either you right-click and then you do Fold or you do Command + Return on your keyboard. So, Command + Return will do the exact same thing and then you just folded your code into a nice neat area. And then you can continue adding code to the prototype without having any distraction from the previous code.
So, keep in mind one thing. If you prefer higher quality of images, you can export them as 2x from Sketch or any other editors, and then shrink them to the proper size here. So the reason why I didn't do that is because I would spend more time resizing my images versus teaching you how to use Framer. So let's move on.
- Setting up design files in Sketch
- Importing files into Framer
- Adding background elements
- Side scrolling with cards
- Creating quick interactions
- Fixing potential layer conflict issues for interaction
- Switching to different menus with animations
- Adding sound, videos, and SVG animations