Prototype a Screen Transition in Figma
Share this video with your friends
In this lesson, you will learn how to use Figma's prototyping feature to simulate a screen transition. This is a great feature to demo how users will interact with your app.
Instructor: We're going to take a look at our Google Pixel 2 or a mobile view of our app. Before we create the transition, let's clean this up a bit. Let's change the text on our button to say log in. Then let's change the text in our input field to ask for the email address.
Now let's make sure everything's centered. We can select all layers by clicking and dragging. Then we can tidy it up by selecting the align horizontal centers. There we go, everything is centered.
Now let's duplicate this frame. Select the frame, then hold alt, and then click and drag so that it's below it. Let's change our input to say password and we'll keep the text to say log in.
Now that we have our two frames, let's go ahead and connect them by prototyping what it might feel like. Let's select the log in button, because when the user clicks on that, we want them to be brought to the next screen. Then on the right side you'll see this prototype tab. Select that. Then select destination. Then select Google Pixel 2.1.
Now you'll notice this arrow connects the two, meaning that when you click log in, it'll bring you to this frame. Before we forget, let's add some behavior to our transition. On the right side in the prototype menu, you can select from this drop-down different types of animation. Let's select slide.
The last thing we're going to do is click off, so we're not selecting any frame. Then let's click prototype. Then let's select our starting frame. I want you to choose Google Pixel 2.
Now let's test this out in presentation mode. If we click log in, we have that little slide effect. Prototyping with screen transitions makes it easy for you to demonstrate how users will interact with your app.
This is awesome, but one thing I'd like to see is if it's possible to create parameters for components. For instance, when creating a 'button' component, making the text an input, or the background color a select box.
Thanks, Gonçalo! So I'm trying to experiment to see if it is possible. Can you elaborate more on what you're thinking?
Right now, we can create a Component called "Button" which is a rectangle and a text field. When we create an Instance of it, we can change the text/background color on the Instance without the Master Component being affected. So in that sense, it "feels" like a parameter but I'm guessing there's someone more you want. I'd love to help figure this out.
Maybe you can elaborate?
Framer X has this concept if I understand correctly. What he is saying essentially is that instead of having to modify the text directly by modifying the text component you would set its value from the panel on the right, and then the "encompassing" component, let's say a rectangle, would adjust its length to fit the new text automatically.
Ah, got it. Thanks for the clarification, Karolis! I'm trying to see if that's possible.
As far as I can tell, it doesn't look like the rectangle would resize. At least I'm not able to produce that effect.