In 11 minutes: Framer - Basics for Beginners | Robert Mion | Skillshare

In 11 minutes: Framer - Basics for Beginners

Robert Mion, Put Mion your team

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
12 Lessons (11m)
    • 1. Introduction and how to install Framer

      0:59
    • 2. Create new document

      0:49
    • 3. Insert and edit new layer

      1:04
    • 4. Add background color

      0:56
    • 5. Position layer horizontally

      1:03
    • 6. Position layer vertically

      0:41
    • 7. Update layer properties

      0:56
    • 8. Add state to layer

      0:41
    • 9. Add properties to state

      0:55
    • 10. Add and configure event

      1:08
    • 11. Playtime and review

      0:45
    • 12. Bonus: Framer docs

      1:07

About This Class

Play with shapes, add properties and interactions. Design visually and by writing a few lines of code.

Transcripts

1. Introduction and how to install Framer: Hello and welcome to in 11 minutes on Robert Me on. This is where it takes about 10 minutes for you to learn something in one minute for us to smile together. And it takes me about as long to make these as it does for you to watch them. So quality is probably not gonna be great. I've got to snoring pugs in the background, but we'll get through it. So today's lesson is all about framer prototyping tool for design. Everything you want design to your heart's content and we're gonna build this. It may not look like much, but you're gonna write some code play with some layers. You're gonna add some states and events. It all makes sense in a little bit. If you don't already have framer, you can give from framer Js dot com It's an eight hour trial. Feel free to play around after this to Siri's, but it costs 130 bucks to buy, So I suggest closing it after this and coming back for the next parent. So what's get started 2. Create new document: first things first, let's create a new document so open framer going to do that from Max Spotlight. I like that in press entered open framer. Here's the welcome screen. First we want to create a new documents so you can do file new. I'm gonna hit command and because I love keyboard shortcuts. So here we are in a new document. Got to get a canvas ready so we gotta drawn. Something could draw on a watch, a phone, a tablet, yada, yada. Let's pick phone because that's usually what this is. Four. So that gives us an iPhone and we're ready it in racist, create new layers, add states and have so much fun with framers. So you should be right here and in the next lesson will start adding stuff to the screen. 3. Insert and edit new layer: it's time to add the first layer. Come up here to the top left where you see insert and a plus sign. We're going. Teoh, choose this first option. Noticed the keyboard shortcut for later. So click that and we have our first layer. We see it appear over here on the phone. We see some code already added for us and left hand side. So let's modify this layer a little bit. Can grab any of these control points and I'm gonna grab the bottom right one. I'm gonna drag it so that it starts adjusting the height and the width of this layer. I want to get it so that the bottom right corner lines up with the middle of the screen. So by the time you get here, you should see the point snap. And that means you're ready to let go of the mouse. And we've got begin some code written over here later, just like we wanted here. And we'll do. One more thing is modify the border radius so I can grab this little circle here and do the same thing. Drag it left right up down. Doesn't really matter. We just wanted to G o as far right as possible to make the radius as big as possible. So when you get there, let go. And that's all for this lesson. 4. Add background color: Hopefully, you're following along, and this later is still selected with three properties on it. If it's not selective and looks like this, you can re select it by clicking this small, hamburger looking icon left online. 14. Let's go and grab that back in the editing mode, and I want to change the background color. The great isn't doing it for me. Maybe maybe a nice of red color. So let's click on this checkerboard looking rectangle in line with background to get a color picker, and I don't so much love this one. I'd rather go RGB. So let's choose the second option called color sliders and already receive Simcoe being generated. I want to change grayscale slider to RGB that gives me my red, green and blue and Amish men enter a hex color down here, so double click that to select it and we'll enter FF 0000 which gives us a nice press enter Nice red color, and that's all that is for this one 5. Position layer horizontally: so far, framers been writing code for us. It's about time we write some of our own, so let's position this element on the screen. So to do that, we want to given X and A Y property toe, push it on its each axis. So let's click anywhere to get out of this color slider. And I'm at the end of background color announced. So I pushed. Enter it automatically in dense a new line for me and already framers hinting at what it wouldn't expects from me. So I want to add an ex property and a Y property so I could just hit down and entered. And it will give me the beginning of an ex property, So I want to align it to the center along X. So let's start typing a l for a line and we can see it. It expects that so press enter and then dot property, which will get into probably another Siri's. But it dot and then we want it to be in the center. So start typing, see, and we already we are to get framers already giving it to us. So finish enter and there is it centered along the X axis 6. Position layer vertically: well, that wasn't too bad. Let's do the same thing along the y axis. So press enter again and it used to have X there. Now it doesn't because we've already given it next property. So let's go with wise pressed down to get, Why enter to accept that and we're gonna do the same thing. Take a l for a line and press enter to have it auto complete that another dot and instead of center. Let's do bottom so I could push down four times, as you see here. But I'll just type of B and enter once again toe position it to the bottom center of the canvas. And you just wrote two lines of code already. Super simple, right? Let's let's keep going. 7. Update layer properties: So far, you've written two lines of code. Let's go back in. Change some coat. So I want to change four values. The name of the layer, the width of the layer, heightened layer and the border radius of the layer. So, as you've just seen, I've been double clicking. Each of these. You can click and drag to select them, anyway, that you can grab all these numbers. So for me, the quickest way is to double click, and I want to change the width from 3 75 to something even and just nice for my brain. So let's do 200 eso we see it instantly changed the right there, which is great DoubleClick height for change that. So let's change that to about 6 50 and will change border radius to something like 40 just to make the corners less rounded. And lastly, let's give this a less generic but still kind of generic name of just box. So again, double clicking layers entering your values and your layer should now look like that called Box 8. Add state to layer: framer is a prototyping tool, and because of that, you expect to be able to prototype things like interactions and typically, interactions involved transitions and animations and things generally changing state and changing state based on something a user does, and and framer recall those layers having states and those states changing via events. So let's add a state. Right now we do the same way we add on the layer, come up here to the top left quick bless icon and will come down here to ST. And since there's only one layer, that's the only thing we can add a state to so quick on box. And here we have a new state Unbox, and it's just so called a. 9. Add properties to state: let's add three properties to this state that's called a on box in that way. Eventually, when we change those, we change those states with the events we can see those properties change. So three properties, we're gonna add our capacity, scale and rotation. Let's let's start with scales weaken. See some cool stuff here. So each of these has a slider that we're gonna use to change it. So we're gonna make scale, go to the maximum, which is two. And there we can already see it changing on the right code being added to the left, as we've come to expect. Now, same thing we're due for rotation. We're gonna crank it all the way up to 360 degrees and lastly, opacity. We're gonna drop that all the way down to zero so it more or less disappears. So again, we've just added three properties to this state of the later that we already had called Box . And soon we're gonna be able to transition between those states 10. Add and configure event: So we've got two states on box, the default state and the state called A and we want to be able to cycle between those states based on something that we do or something the user does. Usually it's a click. Or maybe it's a hover. Who knows what in this case, we're gonna base it off of a click. So when the user clicks, we want to cycle between these states. So let's add back. Come up here just like we did before to for layers and States. And we're gonna add an event and we want to add an event to box, which is a click, and we want to add a quick two bucks. So go ahead and click on quick, and we're gonna right a little bit of code here, and it's very simple. We want to target box when you click on it and Property Box that we want to kind of trigger is state cycle, and we can actually see it a little bit here. If we go down to times we can see that's a function, and if you push enter, we get that function and we have to call it now and a job script. You call it by typing in a parentheses and automatically closed for me. So here we have the finished code. 11. Playtime and review: as promised in the intro Here, 10 minutes of you working in one minute of us, smiling together. So here we've either generated or written this code ourselves. Let's see what it does. So let's go over the blocks, click on it in a twirls and disappears. Isn't that fancy? So let's do it again and cycle states, just as we'd expect. Click, click, click all to your heart's content. So what do we do? We created a layer. We dynamically added properties that we wrote code for properties. We added a state dynamically generated those properties and again here we at an event and told what toe happen, what should happen when that event is triggered. Congrats. And I hope you enjoy. 12. Bonus: Framer docs: you may be wondering much like I do when I watch these videos, how I knew about things like a line state cycle. It's good question. And I wanted to show you the docks in Framer because that's where you're gonna find out a lot of this stuff. So let's say we want to learn what a line does, so I can double click it, copy it and computers icons as docks and framers Fantastic for having really well written docks. So Aiken paste a line right in here and push, enter and it will take me Saw flashed yellow right there, right to where a line is. And if I scroll down, I can read all about what a line does and staying same thing with state cycle type that in and press enter Give us six matches. The 1st 1 isn't great. So much pushed this right arrow and cool. It took us right to it. So here's where you can learn all about the things that I may have used in this course and kind of start exploring these things on the left to find out where you can read about a whole bunch of other cool stuff. So that's the docks and framer. Very helpful for going forward and learning more about framer