A wireframe is one of the first steps of designing an app or webpage and is the skeletal outline. Think of a wireframe as a blueprint of your web page or app. This first step is very important during the process for creative services because you don’t have to spend time building the app or webpage, but you still can get the client and the design team's feedback. Compared to Adobe or paper, Figma is a great tool to build a wireframe because you can work in real-time with other designers on your team and get faster feedback. Today, I will show you how to wireframe in Figma.

Let’s Learn How to Wireframe in Figma

1. Open a new draft in Figma and create a frame.

2. Create a shape for a header photo and a hamburger menu.

3. Make a circle for a profile picture and fake text that will act as the name.

4. Next, we are going to create tabs that would show you additional information and links on the profile.

5. Now we are going to add places holding shapes for photos that would be posted on this app.

6. We are going to add fake text to the image place holder on the bottom. To do that I used the Lorem Ipsum plugin in Figma.

7. For the final step of this wireframe, I'm going to add an arrow icon at the bottom to show that it will scroll.

Now that a wireframe has been created, the design team can view and leave comments or change elements. Our team of creative services professionals recommends utilizing the  ‘view only’ link for the client. With the “view only” link, they can leave comments and you can make the changes that they want "live," or in real-time -  all while they are viewing the wireframe. This is just one way to create a basic wireframe in Figma. Once you start making more wireframes you will find a workflow that works best for you. Keep in mind to take time to practice learning how to wireframe in Figma, and keep track of your progress to boost your portfolio. Happy wireframing!

Red Shark Digital | Leading Creative Services in North Carolina

When learning how to wireframe in Figma, it’s important to remember just how vast the different capabilities that Figma has to offer are. While our how to use Figma blogs are a great way to reference these effects and functions, much of Figma’s design properties are created for professionals to utilize. When it’s time to call in those creative services professionals for help with your brand identity, trust Red Shark Digital to exceed your expectations. With years of experience in creating quality assets, graphics, and other creative services, we are here to show up and show out for your business. To learn more about how our creative services can transform your brand, please visit our website or contact us today.