···

    Create a basic wireframe and prototype

    Project overview

    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.

    A prototype in Presentation view. The user clicks a button, which triggers an animation to the next frame.

    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.

    Tip: You can visit figma.new from your web browser to quickly create new design files.

    Add the first frame

    What is a frame?

    Frames are the main building blocks of Figma. A frame is a container that holds design elements such as shapes, text, and images. You can use them to organize and structure design elements on the canvas.

    A frame can be any size and can contain any number of design elements. Frames can also be nested within other frames to create complex designs with multiple levels of hierarchy.

    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.

    Animation showing user clicking the Frame tool from the toolbar, then selecting a preset frame size from the right sidebar.

    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).

    Animation showing user double-clicking the frame layer from the layers side panel, then renaming it.

    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.

    A rectangle sits on a frame, with the right sidebar in view showing the fill color, width, and height of the shape.

    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:

    A frame with two large rectangles and two smaller rectangles.

    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.

    An animation where a user clicks the Text tool from the toolbar, then clicks on the canvas and starts typing.

    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”.

    Animation showing a user clicking and dragging to select multiple objects, and then grouping them.

    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:

    A frame with two larger rectangles, and two smaller rectangles with text.

    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.

    An animation where a rectangle is selected and then deleted from the canvas.

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

    An animation where a user clicks and drags the edge of a rectangle to resize it.

    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.

    What is prototyping?

    Prototyping allows you to create interactive flows that explore how a user may interact with your designs. In Figma, prototypes are made by building connections between objects. Each connection consists of a trigger (i.e., what starts the interaction) and an action (i.e., what is the result).

    Learn more about 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.

    Tip: Smart animate helps create advanced animations by looking for matching layer names between frames. Since we have layers on each frame labeled "This Image" and "This Button", we’re able to create an animation that automatically applies a transition between the two frames. Learn more about smart animate →

    Two frames. A rectangle on the first frame has a connection noodle pointing to the second frame, and the Interaction Details modal is open.

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

    A prototype in Presentation view. The user clicks a button, which triggers an animation to the next frame.

    Congratulations, you’re all done!

    Feel like experimenting with what you’ve built? Here are some ideas:

    • Design a "That" frame, and add more interactions to show what happens if users click "That Button".
    • Add a "Next" button on the "This" frame, so that users can move on to their next choice.
    • Explore prototyping by changing your interaction animation types and seeing how the prototype changes

    Related Videos