Learn

Your design file won’t be empty much longer! At this stop on our tour, you’ll discover how to use tools from the toolbar to create low-fidelity wireframes.

While there’s no one right way to design in Figma, it’s common to start by adding a frame. A frame typically represents a page of a product. Using the toolbar, located at the top of the editor, we can add frames and other objects to the canvas.

The canvas is the gray area in the middle of the editor, and it’s essentially limitless, so we don’t need to worry about running out of space. Once objects are added to the canvas, we can move them by dragging them or nudging them with the arrow keys. Note that objects on the canvas are referred to as layers, which we’ll talk about more in a later exercise.

Before we learn how to add frames to the canvas, note that there are many tools to cover in this section. You don’t need to memorize these descriptions, and as you continue interacting with the tools, they will become second nature.

One strategy for increasing efficiency is to use keyboard shortcuts. The shortcuts are included in the exercise and they are displayed in Figma when you hover over the icons. For a full list of shortcuts, press command / control + shift + ? or select the little Question Mark (?) in the bottom right corner of the Figma editor and select “Keyboard Shortcuts.”

Let’s start with the left side of the toolbar: A screenshot of the tools on the left side of the toolbar: main menu, move tool, frame tool, shapes tool, pen tool, text tool, hand tool, and comment tool.

Tool Description
The main menu, which has the Figma “F” icon, includes a dropdown menu with options for managing the design file.
The move tool V, which has an icon that looks like a cursor, allows us to select and move objects around on the canvas.
The frame tool F allows us to add a frame to the canvas. We can choose from preset frames listed in the right sidebar, or we can create a custom frame by selecting the frame tool and dragging a frame to the desired dimensions.
The shapes tool allows us to add standard shapes to the canvas, such as rectangles, ellipses, and polygons. Images can also be added from the shapes tool.
The pen tool P allows us to draw out custom shapes.
The text tool T allows us to add text. Select the text tool, then select an area on the canvas and begin typing.
The hand tool H allows us to navigate around the canvas without selecting or moving any objects.
The comments tool C allows us to add a comment. Select a frame, object, or area on the canvas. Then, type the comment. Once the comment is added, anyone who opens the file will be able to see it.

In the middle of the toolbar, the file name, and where it’s stored, are visible. This is a reminder to make sure you have given your design file a descriptive name.

A screenshot of the middle of the | <img style="margin: 0; padding: 5px; width:auto; height: 60px;" src="https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/prototyping-with-figma/toolbar/hand.svg"> | The __hand tool__ <kbd>H</kbd> allows us to navigate around the canvas without selecting or moving any objects. |toolbar, which includes where the file is stored and what it is named.

Here’s an overview of the right side of the toolbar.

A screenshot of the right side of the toolbar, which includes: profile avatar, share button, present button, and Zoom/view options.

Tool Description
Profile Avatars will appear on the right side of the toolbar to indicate who has the design file open, including you! Hover over the avatar to see the name of the person viewing the file.
The Share button provides options for sharing the design file, such as inviting specific people to view the file, or getting a shareable link.
The Present button, command / control + P which looks like a play button, allows us to preview the design. If the design has been turned into a prototype, we will be able to interact with it in the presentation mode.
The Zoom/View options allow you to zoom in command / control + + and zoom out command / control + -. In addition to using the keyboard shortcuts, we can select from preset zoom options or type in a specific value.

Instructions

Task: Design two low-fidelity wireframes for a mobile app by using the toolbar. Replicate the fictional Codecademy app shown in the video, or create your own design that uses the same tools. Either way, design at least two wireframes, so you are set up for the prototyping exercise.

  1. Add a frame to the canvas by selecting the frame tool, or using the shortcut F. Selecting the frame tool opens a list of preset frames in the right sidebar. Because you are designing a mobile app, select a frame from the options under “Phone.”

  2. To add the second frame, you can follow the same process you did for adding the first frame. For a shortcut, select the frame that’s already on the canvas, and hit command / control + D, which duplicates the frame.

  3. Give the frames descriptive names by double-clicking on the title above each frame on the canvas. In the example design, the first frame is named “Intro” and the second frame is named “Sign Up.”

  4. Add layers to the frames to design low-fidelity wireframes for your mobile app. Replicate the example in the video, or create your own design that uses these tools: rectangle, line, ellipse, and text. You can use more tools if you feel inspired!

  5. As you add layers to the frames, reposition the layers by dragging them or nudging them with the arrow keys. You don’t need to be precise with the placement at this stage — just situate the layers approximately where you want them.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?