Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Prototype a Screen Transition in Figma

    Joe PreviteJoe Previte
    figmaFigma

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    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.