13.02. FramerX - Design Layout and Icons
(upbeat electronic music)

My name is Meng, and welcome to the Framer X course. This session is about designing layouts and icons. It's a basic introduction to Framer, but at the same time, if you're used to Figma, or Sketch, you will definitely appreciate some of the key differences that I will explain in this course. First of all, let's create a new file by doing command N. Let's open and maximize this. So the first thing you'll notice is that the tools available are clearly different. The layout tools, interaction, drawing, and canvas. In Framer X there's a clear difference between a frame and a shape. You can use the frame for pretty much anything. That includes elements with drop shadows, gradients, blur, and it's the most versatile element which can later be turned into a component. It can also have constraints. Now the shape, on the other hand, can not have constraints. It's really focused for illustrations and icons. You can turn the shape into an .SVG, but you can not turn the frame into an .SVG. So, we're going to explore those key differences as we design the layout. First of all, let's press F to get to one of the templates. You can use the phone, the tablet, computer, TV, and the watch. We're going to start with the Apple iPhone X. Let's create a title by pressing T. We're going to type 'Watching Now'. Set it to SF Pro Display

and 32 in size,
as well as bold. Let's keep it black. If you press the option key, obviously you're going to get the distances. So I'm going to set it to 40 from the left, and 80 from the top. Now you can see that I created my first frame which happens to be a screen frame, but there are other types of frames such as a rectangle. So I'm going to create one here. Press F again, and then set it to 44 by 44. Let's set the distance to 40 from the right, and just center-line against the text. So roughly 77 from the top. I'm going to create a button that opens a menu, and here I'm going to make it 100% into my radius. So, by the way, you can use math in the fields. So I can decide to divide by two, or multiply by two. You'll notice that Framer does a really good job at setting the constraints for you by default. If I resize this frame, it knows that this element wants to be from the top left, and this element wants to be from the top right, as you can see in the constraints here. I'm going to set this background to blue. If you press command 9 you're going to focus on the element, and here we're going to create our graphic container by pressing G.

Let's set it to 24 by 24,
and center it. Right now you are in a drawing mode, and this is where you can start creating icons using one of the shapes, such as the square at the vector path. So let's press R, and set it to 16 by 2. I'm going to use the align tools to center, and then I'm going to set the radius to 1. Let's make it white. I'm going to duplicate this by doing Option-Drag, and then resize this to 13. Do another one, Fourteen.


And then seven.
So what you'll notice, is that I'm in the drawing mode and I can right-click on the graphic container and get the .SVG code, but if I get out of it and select a frame the menu here is completely different, and I cannot get the .SVG code. Alright, let's zoom out a little bit and continue our design. Since we're designing for the iPhone X we might want to have the status bar as well. We're going to go to the store, search for iPhone X, click here, and install it. Once it's installed you can go to the components and you can Drag and Drop the elements available such as the status bar. These components from the store have their own overrides. As you can see here, you can switch between light and dark, and even customize really cool things such as the time being in real-time or not. You can have different statuses. So, On a Call, Recording, you can have the Signal Strength, the Wi-Fi Strength, the battery ... It's really cool. Let's draw a line by pressing F. Using the SmartGuide 295 by 1. Obviously you can rearrange here to make it more precise. Set it to light gray. Let's make it 138 from the top, and again, Framer X is really smart at setting the constraints for you. It knows that the line is going to be adaptive, like this. Now let's create a card frame, pressing F again.


by 205.

We're going to set the radius to 10.
Set the distance to 20 from the line. Let's set the image as a background by going to the Fill Image and then choose from, let's see, the Framer X images. Choose the first one. Background One. Let's create a title by pressing T. Type 'Design and Code in Framer X'.

Set it to white.
Here, for the text, I can set it to Fix so that I can resize it, like this, and when you resize it make sure that you also resize the other way, like this. Set the text to 24,

and then a distance of 20 from the left, and top,
and also resize this to roughly 200. Let's make it three lines. So we're going to add 'Components', resize it to fit the text, like this. Awesome. So we can definitely rename the frame to Card, and then this to Line, and then this one to Menu, and, by the way, since we're using a lot of folders now, you might want to select these elements inside those folders so you can do Command-Click, or you can double click, and then you reach those layers. Great. So let's create a play button in the middle. Press F and create a 60 by 60 frame. Center it. 100% radius. Make it black and 80%. Then, we're going to create a graphic container inside this. So, press G, 32 by 32, and center it. In the drawing mode we're going to press Command 9, maybe zoom out a little bit, and draw our little icon here. This time, let's use the polygon tool, and draw something that is 32 by 32. Make sure it's centered. As a polygon, you can change the number of sides. So, for example, I can set it to eight or three. So in this case I want it three. Then set the radius to 3 as well, and set the rotation to 90 degrees, like this. Very simple, right? So let's make this white, as well. Alright, so while we're here, let's name our icons. This one is going to be 'Play', and this one is going to be 'Menu'. Let's go back by pressing the screen and Command 9. So you can see that we have a pretty basic layout that is adaptive, and I didn't have to set a single constraint. And I think that's kind of magical because, if you work with other design tools, one of the pain points is that you have something really basic and the constraints don't even work. Alright, so while we're here, I want to show you how to create more icons using the tools available in Framer X. I'm going to put the icons at the top here. So I'm going to zoom in a little bit, and a little bit more. Create a graphic container that is 24 by 24.

Set the background to zero in terms of opacity.
Let's double click this and press Command 9 to focus on it. Let's draw a super simple closed icon. So we're going to create using rectangle. It's going to be 20 by 2. Let's set it to white. The radius to 1. Set the rotation to 45 degrees.

Let's center it
and use Command D to duplicate, and this one is going to be minus 45 degrees. Voila. Super simple. Let's rename this to 'Close' and then duplicate this, Command D. And now, if you zoom out, you can see that we have the two graphic containers, and I can just move on to the next icon. Let's delete this first. Rename this to 'Heart', and draw a heart. We're going to use the Vector path, and we're going to draw from this point here. Click on it, and let's press Shift to have a perfect diagonal, three times. So three pixel squares. Click. And then, again, pressing Shift, another three pixel squares, and voila. Then, using this path, I can just press Escape and then I'm going to change, for example, the Cap to Rounded, and I can change the stroke as well, like this.

You can set it to eight, for example.
Now we have a heart icon. Let's press Escape again, and then center it. Like this. Let's make it white. Voila. Pressing the graphic container here, Command D again to create another one. This time, let's create a progress.

Let's delete this,
and then press "O" to create a circle. It's going to be 16 by 16. We'll make it white, and then center it. Now I'm going to remove the fill, and then add a stroke. The stroke is going to be 2 in width, and here, this is where it gets really interesting, I can basically increase the array, and you can see that it's doing some really interesting progress. At some point you're going to have a progress ring, just like the Apple watch. You can close it like this. Kind of neat. Let's set it to 38, for example, and I can even make the cap to be rounded, like this. Let's make it white. That's it. So, Command D again. I'm going to create a fourth icon. Let's delete this. Rename this to 'Home'. Then we're going to use the polygon, and then set it to 16 by 16.

Set the sides to 5,

and then here I can start editing the vector points.
Let's double-click this, and then I can take this point and just move it around, maybe to the right, and just make sure that it gets a line to the other point. Now I'm going to do the same with this one. Voila. Then on this point, I'm going to move two times. I can also do Command A to select all the points, and I can change the radius to, let's say 1. Now we have a nice home-shaped icon. Of course, we need to use bullions in order to have a little door here. So I'm going to press Escape. I'm going to use the rectangle, press R, and then draw a little door that is 4 by 8, and set the radius to 1.

Here I can select both shapes together,
and use one of the bullions. You can use Union. You can use Subtract. Intersect, Exclude, and Join. Here I'm going to use Subtract, like this. With bullions these shapes remain layers so we can edit them afterwards, like this. After that, if you want to flatten the whole thing into just a vector, you can right-click on it and just click Flatten. Now, I can press Enter, select just these two little points here, and set the radius to 1, like this.

So I can just center this again, and then go to the next icon. Command D. This one is going to be the settings. Let's delete this. Awesome. So let's create the star, and set it to 16 by 16, again. Center it. The star can have many, many points. So if I click here I can drag it. I can scrub the numbers like this. Let's make this number a little bit lower so you can see what the radius does. It basically makes everything a little bit more rounded. Let's put this to 15 and set the radius to 1.

Now we can just draw a circle in the middle that is 8 by 8,

and then center it.
Select the Two and use Subtract, yet again. Let's make it white. Awesome. So let's zoom out a little bit. Maybe this one also needs to be white. We see that the cog here is a little bit too small. We can always resize it. First of all, let's flatten it, and then once it's flattened, we can resize it using the option key so that it resizes from both sides, like this. Let's set it to 18. Okay, that looks pretty good. Maybe, let's do some finishing touches. Such as, having the home indicator for the iPhone X. Let's go to the components and open Home button, and then use the Home button. Let's drag it down to the bottom and set it to dark. Awesome. So as a final touch, let's just add a little indicator for how many minutes that we have left for the viewing. Inside this frame I'm going to draw another frame that is 100 by 26.

And set a distance 20 from the left and 20 from the bottom.
Let's make it black, 80 %, with a radius of 5. So in Framer, when you draw a frame that is within the pixels of another frame, it automatically nests inside it, and likewise, if you draw a frame surrounding another frame, it's going to nest that inside that frame. So this is really important to know as you get used to designing in Framer X. We're going to do a lot more of that in the future. For now, we're going to add a text. Press T, and again, it's going to go automatically inside that frame. We're going to set '10 mins left'. Set it to 14, and then center it.

So you can also press the keyboard shortcut,
1 to 0 to get the percentage. 1 would be 10%, 5 50%. In this case we're going to set it to, say 60%. So pressing 6. Cool. Let's name this 'Time'. Let's add some drop shadow. So we can go to the shadows. Set it to 10 and then 20.

You can set it to 25% or more,
and then we're pretty much done for the first session of this course. So far I've shown you something really basic, but at the same time, very useful for someone who comes from Sketch. You cannot expect to work with Framer X exactly the same way you would work with the other design tools. Just because the technologies are different. Everything is based on the web. It's based on React. You can code things. It's going to become so much more apparent as we move on to the next sessions. I'm going to show you how to create design components in Stacks which works very differently from other design tools. I'm going to show you how to do quick prototyping, and I'm going to show you a lot about code components and how to create your own code components. So I hope you'll stick around because it's going to get really, really interesting. I'll see you soon. Thanks so much for following. (Ding)


We're not around right now. But you can send us an email and we'll get back to you, asap.


©2021 RussellCoder

Log in with your credentials

Forgot your details?