Figma Click-Through Prototype

1. Understanding Click-Through Prototypes

At its core, a prototype is an interactive model of your design. While prototypes can become incredibly complex, the most fundamental and useful type is a click-through prototype. This involves linking static screens together to simulate a user's flow through an app or website.

For our landing page, we'll focus on the "happy path". This is the ideal, straightforward journey we want our user to take to achieve their goal. For a typical landing page, this path is:

1. Arrive on the landing page.
2. Understand the value proposition.
3. Click the primary call-to-action (CTA) button.
4. Land on a confirmation or next-step screen (e.g., a "Thank You" page or a sign-up form).

Our goal today is to build this exact flow in Figma. The video below introduces the core concepts of prototyping, which we will put into practice shortly.

2. The Mechanics of Prototyping in Figma

Creating a click-through prototype involves switching from the "Design" panel, where you've been working, to the "Prototype" panel. This new panel gives you the tools to add interactivity.

The process involves three key steps:

1. Select a trigger element (e.g., a button).
2. Drag a connection (called a "noodle") to the destination screen.
3. Define the interaction (e.g., On Click, Navigate To).

The following video provides a clear, visual demonstration of this process.

As you saw, the default settings are often exactly what you need for a basic click-through prototype. The "Interaction details" panel allows for more customization, such as adding animations, which can make the experience feel more polished.

3. Your Turn: Prototyping the Landing Page Flow

Now, let's apply these concepts to the landing page you've designed. You will create a simple two-step user flow.

Step 1: Prepare Your Screens

Your prototype needs a destination. If you only have one landing page frame, you'll need to create a second one.

• Create a "Thank You" screen: Duplicate your mobile landing page frame (Cmd/Ctrl + D). Remove all the content inside and add a simple message, like a heading that says "Thank You for Signing Up!" and a short sentence below it. This will serve as the destination for your primary user path.
• Rename your frames: Good organization is crucial. Following the advice in the DesignLab article "Figma 101: Create and Test a Prototype," make sure your frames have clear names. Double-click their titles and name them something like "Landing Page - Mobile" and "Thank You - Mobile".

Step 2: Create the Click-Through Interaction

With your screens ready, it's time to connect them.

1. Switch to the Prototype Panel: In the right-hand sidebar, click the Prototype tab.
2. Set the Starting Point: Select your "Landing Page - Mobile" frame. In the Prototype panel, you should see "Flow starting point". Click the plus icon (+) next to it. A label like "Flow 1" will appear on your frame. This tells Figma this is the first screen of the prototype.
3. Connect the CTA to the Thank You Page:
   • Click to select the main CTA button on your landing page (e.g., "Get Started," "Sign Up Now").
   • A blue circular handle will appear on the right edge of the button. Click and drag this handle over to your "Thank You - Mobile" frame and release. A "noodle" will connect them.

By default, the interaction will be set to On Click -> Navigate to. For now, this is all you need.

Step 3: Test and Share Your Prototype

Now for the rewarding part—seeing your design in action.

1. Present Your Prototype: In the top-right corner of the Figma toolbar, click the "Present" (play) icon. This will open your prototype in a new tab.
2. Test the Flow: Click on your main CTA button. It should navigate you to the "Thank You" screen. To restart the flow, simply press the 'R' key.
3. (Optional) Add Polish: If you'd like to make the transition smoother, you can add an animation. Click the interaction noodle connecting your two frames. In the "Interaction details" panel, under "Animation," change "Instant" to something like Dissolve or Move In. Present the prototype again to see the difference.

Conclusion

Congratulations! You have successfully created your first end-to-end user flow. You've moved beyond designing static screens and are now able to build interactive experiences that tell a story. This is a fundamental skill that elevates your value as a designer, allowing you to clearly communicate your design's intent to clients and stakeholders.

Key Takeaways:

• A click-through prototype links static screens to simulate a user journey.
• Focusing on the "happy path" is the most effective way to build and test a design's core functionality.
• The primary interaction for this is On Click -> Navigate To, configured in Figma's Prototype panel.
• Presenting an interactive prototype is a far more powerful way to demonstrate a design's value than showing static images.

Preview of the Next Lesson:
You've now spent several modules focused on the "how"—mastering Figma and the principles of visual design to build a landing page. We are now about to pivot to the "why." In the next module, UX Psychology and Behavioral Design, we will begin exploring the psychological principles that make a design feel intuitive or confusing. Our first lesson will tackle Cognitive Load, helping you understand how to design interfaces that are easy for users to process and understand.