Now that you’ve put your ideas on paper with wireframes and paper prototypes, you’re ready to create a digital prototype in Figma! Digital prototyping makes it easy to share, edit, and collaborate on your designs, and it helps you get one step closer to visualizing your final product. In this reading, we’ll go through step-by-step instructions for creating a lo-fi prototype in Figma.
Prepare to create your prototype
Before you start building a prototype in Figma, you should ask yourself how users might interact with your product. Some questions to consider are:
- What are common user flows through your product?
- What buttons will users interact with? What order will they perform these actions in?
- What will users expect to happen after they click a button or submit a form?
Thinking about these questions before you start prototyping will help you design for different and diverse types of user interactions. You’ll be using these questions, along with your wireframes and paper prototype, to build a digital prototype in Figma.
Remember, wireframes are made up of text, basic shapes, and lines. You’ll use wireframes and low-fidelity prototypes to show stakeholders how your design will look without including color or detailed content. Your designs can (and will) change over time, so it’s totally normal if you don’t know exactly where things should go yet. The important thing when it comes to wireframes is to create an outline of your design that clearly conveys your ideas.
Below is an example of a wireframe created in Figma for the dog walker app. The dog walker app will be used as the example throughout this reading.
When your wireframes are ready to go in Figma, it’s time to transition to a low-fidelity prototype. Ready? Let’s go!
Create a prototype in Figma
Follow these five steps to create a low-fidelity prototype in Figma for your own app designs:
1. Create wireframes in Figma.
Open Figma and start a new project. As shown in the image below, click the hamburger icon in the upper left corner of the screen, click File, then click New.
Select the Frame tool from the toolbar at the top of the screen, and choose a frame that matches the device you’re designing for. The correct frame will automatically appear on your screen. Or, you can create a custom size frame by selecting the frame tool and dragging your cursor across the screen to the desired size.
Next, create the elements of your design using the Shape tools located in the toolbar at the top of the screen, as outlined in the image below. There are several different shapes that can be chosen by clicking the dropdown arrow. Remember that wireframes are typically drawn using basic shapes like squares, rectangles, circles, and lines. To learn more, check out this article about how to use shape tools on Figma’s blog.
Then, use the Text tool to add labels, descriptions, and headers to your wireframes. The Text icon is outlined in the image below. Click where you want to add text, and start typing to create a new text box. Text boxes can be moved by dragging, and modification options are available in the menu on the right side of the screen.
Repeat this process for each screen in your app. At this point, you should have a full set of wireframes that represent the user flow through the app you’re designing. Make sure to arrange the wireframes in a logical order to make prototyping smoother.
2. Rename wireframes.
Click the name of a screen to select it. Then, go to the Layers panel on the left side of the screen. Double click the name of the selected frame in the Layers panel to change its name, as shown in the image below.
Repeat this process to clearly label each wireframe screen, like “Home” or “Settings.” The names of the screens in the dog walker app are outlined in the image below.
3. Move from the Design tab to the Prototype tab.
The Design and Prototype tabs are in the menu at the top right of the screen. These tabs allow you to switch between editing your designs and working on the interactive prototype elements. Pay attention to which tab you’re in, otherwise some things may not work the way you expect. To create a lo-fi prototype, switch to the Prototype tab.
4. Connect a node.
Hover over any element in your wireframes, and a small circle with a plus sign in the middle will appear, as shown in the image below. This is called a node. A node means that you can connect screens based on how you’d like users to move from one screen to the next. For example, you can connect a screen that has an interactive element, such as a button, to the screen that displays the result of that interaction.
Choose the element that you want to make interactive, and click the node that appears when you hover over it. A connection arrow should appear. Using your cursor, drag the arrow to the screen you want the element to connect to, then release the click. The two elements are now connected, meaning the user will be taken to the landing screen when they interact with the element you selected.
The image below shows an example from the dog walker app. After the user clicks the “schedule” button, they’re taken to a new screen where they can schedule a date and time for the dog walker to come. The blue arrow represents how the two screens of the app connect.
5. Repeat this process for each element that connects to another screen.
In the dog walker app, the user starts on the home screen, clicks the “schedule” button, and is taken to a new screen where they can schedule a date and time for the dog walker to come. Next, the user can browse a list of available dog walkers. Then, the user clicks on the “learn more” button beneath a dog walker’s profile, and selects the “book” button on the next screen. They are taken to a payment screen, and finally directed to a confirmation screen after submitting their payment. Notice how each step, or node, flows logically into the next just like a real user would move through a real app.
To connect all of your wireframes together into a fully functional prototype, go through each of the interactive elements in order and ask yourself what that element needs to connect to. Think of this like an audit of your designs; make sure that every interactive element you’ve designed has something it connects to. If an interactive element doesn’t have a screen to connect to, that element needs to be removed from your design or a new screen needs to be created! Visualize how the buttons and pages of your app will function to get a better idea of which element is responsible for which actions.
Now you know the steps required to create a low-fidelity prototype in Figma! You’re ready to create your own low-fidelity prototype in Figma. It can be very exciting to watch your design take shape and start to function like a real product! Good luck.