13.04. FramerX - Quick Prototyping in Framer X

13.04. FramerX - Quick Prototyping in Framer X

Hi, my name is Meng and welcome back to another course about Framer X. This time we're going to talk about quick prototyping. So Framer X is definitely more focused on interactions than the other design tools. You can code all your interactions if you want to but you can also link frames and create simple transitions in minutes. They have a really neat scroll view that makes things scroll able both vertically and horizontally. Or you can set the nav bar or tab bar to be sticky as you scroll. In order to create a transition you can select on any frame, press "l" to connect it to a screen. Like this. Since this is the master component, any component instances will also link to the same target. You have a really nice preview tool if you go on the top right and click on the play button right here.

And I'm going to minimize this first.

Once it's minimized I can click on the options
and make it keep on top and then I can switch back here and it's going to remain here. Whenever I select a screen frame it's going to automatically show me the prototype here. I can also switch between devices such as the space gray for example. I can also toggle the hand

like this.

Resize it.

And preview it like this.
I'm going to maximize this and put it right next to Framer X. Like this. Let's make it a little bit smaller. And add a hand. Pretty cool. Time to test the interaction right here. I'm going to click on it and you can see that it's trying to go to the second screen using a transition. The transition that I actually want is called overlay. And it's perfect for a menu like this with this size. Let's go back and reload this. And try it again. So you can see I can just click outside

and I have a really nice transition.
Let me set the links for also with this menu. So project, press "l" go to project, courses, it goes to courses. Then what you now should also go to home. So when you're setting the lengths you have the option to transition between push, overlay, model, instant, fade, and flip. And specifically push has a bunch of directions. Since this menu comes from the right we might want to close it by going to the opposite direction, so to the right. The same for the courses. And the projects.

Let's preview this.
I'm clicking here, going to watch, courses, and projects. And going back home. A really cool feature in Framer X is the ability to have a scroll view. So I'm going to add this here. It's called scroll. And I'm going to set it from right here. I'll put the stack outside. I'm going to cut it and paste it somewhere here. And then using the scroll I'm going to connect it to the stack. I can resize my stack so that it fits the whole content. And then here I can resize also the scroll view to 80 and make sure that the width is 375. And voila, you can test it out. You can swipe it from here. It's really nice. And you can do the same thing for the other pages. Such as the courses page. Let's duplicate this. And I'm going to put it right here. Remove all the content.

And then set a scroll.

So I want the header and the footer to be sticky.
So I'm going to set the scrolling area to be outside of those bounds. Now I'm going to connect this to this content. Obviously I need to remove the header from here and the home indicator. Make sure to select this screen and then you can see that I can scroll. It's really nice. And that's one way to do it. You can also do another way which is set it to the whole height and just put it underneath the status bar and the home button.

I can also decide to make as much content as I want.
So I can make this really long and then add more content if I want.

Let me quickly set up the content.

Now there's just one page that's missing and that's the section page. When a user clicks on one of these cards what happens then. So let's create that. Let's duplicate this.

And remove the scroll.
Let's just bring the card, this one.

Paste it here, resize it to 335.
And then 700. So let's hug the bottom, put it underneath the status bar. The rounded corners for this card can be specified. So for example the bottom right and the bottom left can be set to zero.

So now you have a card that does not
have rounded corners at the bottom. Let's also move the time.

So as I mentioned, these overwrites, this positioning
can be set without effecting the other instances or the master. Which is pretty neat. Set that to 20 from the right and 20 from the top. So this page is for users to watch the video and also read the text. So let's create a frame for the video. Let's go to the store and get a YouTube player. Install it.

Then I get the component.
And put it right here. Set it to 335 by 210. This is really neat because it's a real time video that's playing in the background and I can set it to auto play. Like this. And obviously you can set up your own video. It doesn't have to be YouTube. I'm just going to put it back to off.

Alright, so let's add some content.
Create a frame

and then set it to a very light

then put some text.
I'm going to paste the text because it's pretty long.

So this is for the description.
Set it to 110 and have the body text right here.

This is going to be white 100%.
Let's make the status bar at the top. I'm going to paste more content.

Since this part is kind of light
let's make sure that the appearance of the home indicator is going to be dark. Next let's add some dots here to show that you can swipe between pages. I'm going to zoom in a little bit. I'm going to use "u" to draw a circle of 6 by 6. And then press "s" to create a stack.

And here I can just command "d" multiple times.
Until I have about eight. I also want to show progress so I'm going to do a little bit of a graphic here. So press "g" do 32 by 32. I'm going to move that in the middle. And double click on it, make sure that you're in drawing mode, zoom in and draw a circle by pressing "o." Let's make it 30 by 30. And set the stroke to be two pixels in term of width and set it to about 38 in term of array. But you can also increase it so let's say 77

make it rounded.
Let's zoom out and add this to a frame. So you can do so by pressing command enter. And within that frame I'm going to add some text, press "t." Let's set it to 88, center it, make it white and perhaps semi bold.

We kind of threw things on the fly
so let's set this to 32 and set it to a distance of 20 from the card. So this is the indicator that people that swipe between left right. We can also add a card to the left and the right as well. So let's create a small frame here. Set it to 12 by 700.

And set the rounded corners
so top right is going to be 10 and bottom right is going to be 10 as well. Let's make this black.

Duplicate this.
And do the other way so 10 on the top left, zero, zero, and ten on the bottom left.

Actually there's no rounded corner at the bottom.
So let's set it to zero.

Finally, the only thing that's left
is really so set a transition between this card

to this screen.
And you can see that all the cards are automatically connected to this screen. Let's just make sure we have the proper transition. I'm going to set to, let's see, model.

That's pretty good.
There's just one thing is that in this screen we're blocked, we don't know where to go from here. So we might want to have some sort of a back button. So let's create that really quickly. Select the screen frame and add a link in the target field it's set to previous, and voila. So now if I go back to the home screen I go to the model, click outside and I'm back. And all of these cards work from anywhere. I can go to another screen and navigate from here let's say to courses and click on this one. It's going to work likewise. One last thing is that you can actually preview the whole thing on your device. So you click here and go to the live preview. Using your device you go to the camera and then you scan this QR code. It's going to ask you to open either to the browser or to the Framer app. I definitely recommend to open to the Framer app because it's going to allow you to navigate in full screen. So that's it. We've learned how to prototype in Framer. I'm sure you are as excited as I am about coding your own components because that's the real power of Framer X. All of these beautiful components that we see here that load to real data even the status bar as well as this grid component, the icon component, and the API call component I'm going to teach all of that so that you can create something from scratch completely custom to your needs. I hope to see you in the next session because that's where the real interesting things begin. I'll see you there and thanks so much for learning with me.


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?