Create a basic wireframe and prototype

In this project, we’ll learn how to create a basic wireframe and prototype of a mobile app.

Let’s imagine you’ve come up with a new million dollar app idea…This or That. In the app, users will be presented with two options, and they need to pick only one. Genius! Before you finalize your logo and start picking out company swag, you’ll want to design some basic wireframes and prototypes to test out your app idea with users.

Wireframes are low fidelity mockups of webpages or apps. You can use wireframes to quickly create multiple iterations of what your final product could looks like—without spending too much time focusing on things like color, images, or other elements of design.

You can take your wireframes to the next level by using prototypes. Prototypes are designs with interactive elements. They help you design, test, and show how users will engage with and navigate through your product.

Together, wireframes and prototypes help you plan out how users will engage with and navigate through your app.

By the end of this project, you’ll have experience working with frames, shapes, text, and prototyping in Figma. Let’s get started.

Design a wireframe with frames, shapes, and text

To build our wireframe, we’ll use the following objects:

• Two frames to contain the designs
• Seven rectangles to represent the images and buttons on the app
• Four text layers to identify key button labels

Create a file

To start, we need a new design file.

1. Log in to your Figma account from figma.com.
2. From the file browser, click Drafts.
3. Click New design file.

Add the first frame

Each frame represents a different page of our app. We also want to design our app for mobile devices, so we’ll use preset frame sizes. For this project, let’s focus on the following two frames:

• A “This or That” frame that shows two options
• A “This” frame that shows what happens when the user pick “This”

Let’s start with the “This or That” frame.

1. Click the Frame icon from the toolbar, or press F.
2. From the Design panel on the right sidebar, select the iPhone 14 Pro preset size.

Now that we a frame, let’s rename it. Establishing a clear naming structure makes it easier to find and manage layers in your files.

1. From the layers panel, double click on the name of the frame you just placed on the canvas.
2. Rename the frame to "This or That" and and press return (Mac) or enter (Windows).

Add shapes

Since we don’t need to get into too much detail with colors, stylings, and design, we can use basic shapes to represent the layout of our app.

Let’s add rectangles to the "This or That" frame to represent the two options.

1. Select the Rectangle tool or press R and click inside the "This or That" frame.
2. Use the Width and Height fields in the right sidebar to enter in pixel values for the shape. We’ve set the width of our rectangle to 319, and the height to 240.
3. Click and drag the rectangle to place it towards the top of the frame. Figma will attempt to align the object with others around it by automatically snapping to them—in this case, we’ll snap the rectangle in the center of the frame.
4. To customize the fill color, select the rectangle and then open the color picker from the Fill section on the right sidebar. We’ve used hex code #8ED3E2 as our fill color.

We want the second rectangle to be the exact same size, so let’s duplicate the first rectangle.

1. Select the rectangle, and press Command + D (Mac) or Control + D (Windows) to duplicate.
2. The new rectangle is placed directly on top of the first rectangle. Click and drag the second rectangle to the middle of the frame.
3. Change the fill color of the second rectangle. We’ve used hex code #D48C8C as the fill color.

Looks great! Take a moment to rename the two rectangle layers you’ve added. Name the top rectangle "This Image", and the bottom Rectangle "That Image".

Now that you know how to add and modify shapes, add two more rectangles to represent the "This Button" and the "That Button". Each rectangle has a width of 130, and a height of 95. Make sure to rename the layers. When you’re done, your frame should look something like this:

Add text

Our first frame is almost done. Let’s add some text to identify the "This" and "That" buttons.

1. Select the Text tool from the toolbar, or press T.
2. Click on the bottom left rectangle and type “This”.
3. With the text layer selected, use the Text settings to adjust the size to 24.
4. Click and drag the text layer to move it towards the center of the bottom rectangle. Figma will try and align the text layer to the center of the rectangle by providing a red guide as a visual indicator.

Right now, the text layer is just sitting above the rectangle layer. We want to combine those two layers into a group, so that they can be treated as a single object.

To group these layers, select both objects by clicking and dragging your cursor across them on the canvas, capturing them in the blue selection box. Then, use the following keyboard shortcut to create a group:

• macOS: Command + G
• Windows: Control + G

The layers panel in the left sidebar now only displays one layer named “Group 1”. Rename it to “This Button”.

Now that you know how to add text layers and create groups, create a “That Button”. When you’re done, your design should look something like this:

Create the second frame

Now that our “This or That” frame is complete, we need to think about what the next frame is going to look like.

If the user clicks "This Button", then “This Image” should get larger and “That Image” should disappear.

We don’t need to start from scratch—let’s just duplicate our first frame by clicking Command + D (Mac) or Control + D (Windows). Rename the new frame “This”.

Remove “That Image” by selecting the objects and pressing delete.

Next, expand the size of “This Image” so that it takes up the majority of the frame.

Add prototyping

We’ve finished creating a wireframe for two pages of our wildly exciting new mobile app.

Now, we want to provide some more clear guidance on how these two pages work together. How does a user get from the "This or That" frame to the "This" frame? What kinds of interactions and animations can we expect when navigating between the two pages?

We can answer the above questions with prototyping.

When users click "This Button" on the “This or That” frame, we want them to be directed to the “This” frame.

Let’s create a prototype connection to build the interaction:

1. Click the Prototype tab on the right sidebar.
2. Hover over the "This Button" layer on the "This or That" frame.
3. Click the blue plus sign on the edge of the button, then drag the connection to “This" frame. This opens up the Interaction details modal.
4. From the dropdown menu, set the trigger to On tap.
5. Set the action to Navigate to. From the dropdown menu, set the destination to “This” frame.
6. From the Animations dropdown menu, select Smart Animate.

Once you’ve created an interaction, exit out of the Interaction details modal. Press the Present button on the toolbar to test it out.

Congratulations, you’re all done!