Explore the first layout for the prototype and its tools.
- [Instructor] So let's go ahead and define our first layout, while taking a look at frames. So if you don't have Framer X open, go ahead and do. And then click on the "+" to create a new project. What I wanna do is save that project right away on the desktop. And call it "Polls" with ones as opposed to l's to make it original. And then what were gonna do is use the "f" key or click on "frame" in the layout section to create a brand new frame.
And basically frames are the basic of creating new devices or new sections of your device. So in this case we're going to select the iPhone8. And I'm going rename this one splash screen, or just "splash." And I'm going to change the fill. So on the right here, you have all the items that you can change for that particular item. So in this case we want to change the fill to a "linear," and I want to select the blue one, to make it look better.
Perfect. The next thing we want to do is add a little text here, so its our title for splash screen. So we click on "+" again and we select text, or "t" and I'm gonna type "PO11s" with two ones, as opposed to l, with an s. And then we're going to change our text a little bit. So what I'm going to do it go on the right again and select all my text by doing command+a and then what I'm going to do is put that text at about 100.
So on the right, here, you can select the actual size, the color, spacing, align, and the actual style of the text. And what we're gonna do is select "Heiti TC" and I'm also going to select "medium" and make it white. And while we're at it, let's add a shadow. Perfect.
And then as you position your text, you're going to see guides in your frame, here. So what I'm gonna do is position it center and then roughly a little bit higher. And then let's create a second text and this time we're gonna hit "t" and we're gonna start this text with a smaller font. So what we're gonna do for this one, we're gonna select around 24, so you can click here and select "24." One trick, if you select the font before you actually write something, you're going to lose the ability to write something. So what you want to do is type your text first.
so "Making big and small Decisions together" and then select your text, select the size, and then off you go. So to move inside of Framer you can do shift+scrolling wheel to move sideways, and then only the scrolling wheel to move up and down if you get lost in Framer.
Now what I'm gonna do is position this guy roughly under, like that, and then make sure its centered align by clicking here. Alright, so this is pretty much how you set up a brand, new screen with some text in it and we'll continue working on this in the next video.
- What is Framer X?
- Define your layout
- Creating more layouts
- Using frames and text in frames
- Drawing with a path
- Creating interactions
- Working with React components