Chapter 3 - Turning Wireframes Into Prototypes

You’ve already learned how to come up with app ideas and how to create wireframes that show what your app will look like. Wireframes are like the blueprints of your app—they help you plan where everything will go. But now it’s time to take those wireframes and bring them to life. This is where prototyping comes in.

A prototype is a clickable version of your app that lets you and others see how it works. Even though it’s not made with real code, a prototype lets you tap on buttons and move from one screen to another, just like in a real app. It helps you figure out what works, what doesn’t, and what you might want to change before spending time coding the app.

To build your prototype, you’ll use a tool called Figma. Figma is a free design tool that works online. Designers use it to create everything from websites to mobile apps, and it’s perfect for turning your wireframes into detailed, interactive screens. Let’s walk through how to set up Figma, design your app, and connect your screens to make your prototype work.

Setting Up Figma for the First Time

Before you start designing, you’ll need to create a Figma account. It only takes a few minutes and works on any device with a web browser.

To get started:

Go to www.figma.com
Click “Sign Up”
You can use your school email or Google account
Once you’re signed in, click the purple “+ New Design File” button
A blank workspace will open—this is your canvas, where your screens will go

Name your file something that describes your app. For example, if your app is about tracking books you’ve read, you might name it “My Reading App Prototype.”

Designing Screens in Figma

Now it’s time to recreate each of your wireframe screens inside Figma, but this time with more details, colors, and real text. You’ll start by creating frames, which are the same size as phone screens. Each frame will represent one screen in your app, like the login screen, home screen, or settings screen.

To make a screen in Figma:

Click on the Frame Tool (F) or press the F key.
On the right side of the screen, you’ll see a list of popular screen sizes. Choose a phone size like iPhone 13.
You now have a blank phone screen to work with.

You can start adding parts to your screen using these tools:

Rectangle Tool (R) for buttons, sections, and headers
Text Tool (T) to add labels, screen titles, and button names
Circle Tool (O) for profile pictures or icons
Image Tool if you want to upload pictures or logos

Keep your screens neat and easy to read. Use space wisely. For example, put buttons where thumbs can easily tap them, and use large, readable fonts.

Once you’ve finished your first screen, you can duplicate it and make new ones for the other parts of your app. If you already made wireframes in FigJam, try to match the layout. You can even copy pieces from your FigJam sketches into Figma and improve them with more detail.

Connecting Your Screens to Make a Prototype

Designing screens is just one part of the process. To turn your app into a working prototype, you need to make the screens interactive. That means when someone clicks a button, it should take them to the right screen.

Here’s how to connect your screens:

Click on the Prototype tab in the right sidebar.
Select the button or icon you want to be clickable.
A little blue circle will appear. Click and drag it to the screen it should go to.
Once you connect it, a settings menu will pop up. Choose:
- On Click – the action happens when the button is clicked
- Navigate To – choose the screen to go to
- Animation – like “Instant,” “Slide In,” or “Fade” for extra effect

Repeat these steps for each screen you want to connect. Make sure all your buttons go to the correct places and that the user can always get back to the home screen if needed.

Testing Your Prototype

Now that your screens are connected, it’s time to try out your app. Figma makes this easy with a special preview mode.

To test your app:

Click the Play button (a triangle icon) in the top right corner
A new window will open with your app’s prototype
Try clicking buttons, moving between screens, and testing how it feels

While testing, pay attention to whether the buttons are easy to find, whether the screens are too crowded, or whether you’re missing something important. If you find anything confusing, go back to your design and make changes. That’s the great thing about prototypes—you can fix things before building the real app.

Example: Designing a Daily Planner App

Let’s say your app helps students stay organized with schoolwork. You might have the following screens:

Welcome Screen with a “Get Started” button
Task List Screen with a list of assignments and checkboxes
Calendar Screen showing due dates
Settings Screen where users can change the app theme

In Figma, you’d create a frame for each of these screens. You’d add rectangles for buttons, text for task names, and icons for navigation. Then, using the Prototype tool, you’d link the “Calendar” button to the calendar screen and the “Settings” icon to the settings screen.

After everything is connected, you’d test it to make sure it works smoothly. You might find that the text is too small or that the “Add Task” button is hard to see. You can go back and fix those things easily.

Once your prototype is working, you can show it to classmates, teachers, or even your family. Ask them to try it and give you feedback. Some questions you might ask include:

Was anything hard to understand?
Did anything feel too slow or too fast?
What did they like about the design?

This feedback helps you make better design decisions. Sometimes, something that makes sense to you might confuse someone else. That’s why testing your prototype with real people is so important.

Even big companies like Instagram, Netflix, and Amazon use prototypes to test their ideas. Designers at those companies create clickable mockups just like you’re doing before they spend time and money on coding the final product.

Why Prototyping Is So Valuable

Prototypes help you see your ideas in action. Instead of just imagining how your app will work, you can click through and experience it. You can spot problems early, make better design choices, and feel more confident when it’s time to build the final version.

It also gives you a chance to learn from others and improve your work through feedback. Whether your app is for school, fun, or solving a problem in the world, starting with a prototype helps you make something people actually want to use.

Key Takeaways

A prototype is a clickable version of your app that shows how it works, even before it’s coded.
You use Figma to create and connect your app screens.
You can test your app using Figma’s play mode and fix problems early.
Prototypes help you share your ideas and improve your design with feedback.
This step is used by real designers at top companies around the world.

What’s Next?

Now that you’ve turned your wireframes into a working prototype, you’re ready to take your app to the next level. In the next chapter, you’ll learn how to improve your design using colors, icons, and text styles. You’ll also learn how to keep your app easy to use while making it look professional and fun.

You’re almost there—keep going and bring your app to life!