Hi there. Now that you understand the basics of wireframing and have been introduced to Figma, we're going to put these two things together. So far you've drawn wireframes on paper, but now let's go digital. In this video, you'll learn how to transition the wireframes you've drawn on paper into digital wireframes using Figma. Let's open Figma. I'll start by adding pictures of my paper wireframe to the Figma dashboard. I took photos of my sketches already, so I'll upload them now. From the Menu, click "File," then "Place Image." Let me find where I saved my paper wireframe photos on my computer. Found them. Now that I've located them, I can upload them to Figma. Another way to upload the photos is to drag them from a folder and drop them into Figma. Let me demonstrate it for you now. There, now I have something to reference as I build a digital wireframe. Next, I'll build the frame. On the Toolbar, I'll click this icon that looks like a hashtag. It's called the frame icon in Figma. Then I'll select the platform I want to use. You can create a wireframe for any type of platform. Since I'm demonstrating how to build a mobile app, I'll choose a phone as the frame. I'll pick Android. Seeing the long rectangle makes it much easier to visualize the phone screen. To make it easier for me to reference, I've moved the home screen sketch next to the Android frame. Now I'm ready to create the bar at the top of the screen. To do that, I'll need to create another rectangle. I'll open the shapes menu in the Toolbar, where there are variety of shapes to choose from. I'll select this rectangle, then I'll draw the rectangle in the frame across the top to create the bar. Next, I need to create the navigation icon, which is usually three horizontal lines. To do this, I'll draw a line. I need the shapes menu again for this one. The navigation icon will be in the top left corner of the app. Let's draw the first line. Oops, that doesn't look very straight, does it? I'm going to delete that by selecting it and using the Delete key on my keyboard. Here's a pro tip: To create a perfectly straight line instead of drawing it free hand, like I just did, you need to hold down the Shift key on your keyboard as you draw. There, that's better. Instead of drawing two more lines, I'll copy this one. I'll select the line by clicking on it, then use a keyboard shortcut to copy it. On a Mac, hold down the Command button, then press "C." On a PC, hold down the Control button, then press "C." Now that I've copied the line, it's time to paste it. I'll use a shortcut again. This time for paste, you can press Command V or Control V. It seems like the second line pasted right on top of the original line, so you might not be able to see it. But I can use my keyboard arrows or my mouse to move the new line. I'll put the new line directly below the original line. Now I'll make another copy and position this third line directly under the previous one. Do you notice how when I move the line I drew red lines appear in the frame? Those are guiding lines to help line up the shapes. That way when you have a group of lines or shapes, none of them are too far to the left or to the right. Great. Now let's go back to our hand-drawn wireframe. The next feature on the bar is the company logo. Remember, for wireframes, we want to keep this simple. I'm going to create another rectangle to act as the place holder for the logo. Now let's fill the rectangle in with a new color to show that it's a place holder for something else, and to provide contrast with the bar. First, I'll select the shape, then in the Design menu, I'll choose the color. Since this is a wireframe, I'll just use a darker gray. Great. So we have the bar at the top of the app and a spot for the logo. The last element that'll be in this bar is the profile icon. To make the profile icon, I'll use the shapes menu again and select a circle. Remember how I held down the Shift key to draw a straight line? I'll also hold down the Shift key to draw a perfect circle. Let's make this dark gray too. To make the circle seem like a person, I'll add a smaller circle for the head of the person. I'll make this circle light gray for contrast. To make the body, a stick figure will do. I can use a few lines for this one. First, a straight line for the body. Then for the arms, let's use diagonal lines. The Shift key trick won't work for diagonal lines, but that's okay. I'll just draw these two lines as straight as I can. You'll notice that I made those lines gray as well. Now I have the bar at the top of app. Great. The next thing I need to create is the image carousel at the top of the page. An image carousel allows me to share rotating features in the app. To represent the carousel, I'll make a large rectangle. Just like in my paper wireframe. I'll draw an X through the rectangle to show that this will be an image once we get to the hi-fi stage. I'll choose a light gray for the X, so it somewhat fades into the background. Next, to show that this is a carousel and the content will change, I need to create something that shows there are multiple pages. We call this a pagination indicator. On our paper wireframe, I used an ellipsis, so I'll do you the same here. First, I'll draw a very small circle. As a reminder, I'm holding down my Shift key as I draw. There, now fill the circle in a black color for contrast. Next, I'll make two copies of the small circle. I'll put the three circles in a line and place them in the middle of the rectangle at the bottom. Now, I'll line them up using the built-in guides. Together, these three dots show that the image and content will rotate on the carousel. Perfect. Next, let's write some copy. As a reminder, the only copy you should include in a wireframe are words that help people understand the function of a button or section. To do that, I need to create a textbox. I'll click the Text icon, then I'll draw a box where I want the text to appear. The blinking cursor indicates where I can type. I'm going to write "latest tips to train your dog." This kind of title is important to explain what the rectangle represents. Although wireframes don't have a lot of text, it's a good idea to use some copy here and there, because real texts helps ground you in the design. If I just use placeholder text like Lorem ipsum here, the purpose of this carousel wouldn't be clear. Now we need to adjust the size of the text using the design menu. I'll make this 24 point font. Finally, let's center the text in the carousel so it's visually appealing. Let's use the guides to center the text. Great, now that's done. I'll add the Schedule button next. Since Schedule is the call to action, or the button I most want users to click, I'll make the button big and obvious. I'll draw a big rectangle and write Schedule in the middle. I'll do this a bit faster now that you're getting the hang of the process. Now I have more than half the wireframe completed. The last section I want to create is the list of dog walkers that'll automatically populate at the bottom of this screen based on the user's location. First, I'll add another textbox. I want another simple title here to explain the function of this section of the wireframe. I'll use "dog walkers near you," and I'll adjust the font size to 24 again so it's consistent with the title above. Next, I need to create the profiles for each dog walker. The profiles need to be divided into sections, so I'll create some dividers. To create dividers, I'm going to draw a straight line that fills most of the length of the screen. You'll see this line is drawn in black, which fits the style that we've been using. Now, I'll make a copy of this line and move it a little ways underneath the first line to allow space for the dog walkers' profiles. Great. I'm going to select both of these lines and make two more copies. Now I'll paste them in equal distance from the original two lines. This is a pro tip. Copying and pasting multiple items at a time makes the wireframing process faster. Earlier, I used Figma's guiding lines to line up each element, but when I have a bunch of elements like this group of lines here, I can use other techniques. In the design panel, I'll first click on align to the left. This makes all of my lines start at the same point on the left. Next, I want to have the same amount of space between each line, so I'm going to click on distribute vertical spacing in the design panel. Beautiful, evenly spaced lines. It may seem like a small detail, but it can really give your wireframes a cleaner look. Next, let's show some profiles. I'm going to use a circle to represent a profile photo, just like we did for the user account. Then I'll add lines to show that there are some text here. Holding down my shift key again, I'll draw one line. I'll make it a bit wider by going into the design panel and changing the stroke. I'll make the stroke five, which is a thicker line. The stroke was previously one, which is a thinner line. Wide lines typically indicate text in wireframes. Narrower lines are meant to show divisions. Another small detail that conveys a lot of information. Next, I'll copy this wide line and paste it underneath the first one. I'm going to make this one longer than the first one. Just a minor thing like different line lengths can convey a lot of information. The top line is shorter since this will be the dog walker's name. Then the line underneath is longer because it will have additional information about these dog walkers. These kinds of details will feel more automatic to you the more wireframes you build. Now we want to fill in the boxes we created with the dividing lines, with more profiles of dog walkers. First, I'll make a copy of this group of design elements. I'll do that by selecting the avatar with the lines, then using Command-C, then Command-V, or Control-C, then Control-V on the keyboard. This will make a copy of the group of elements right on top of the existing group. Then I'll drag this set of elements I just copied and pasted down lower in the frame. I can use the arrow keys so that the new elements move. I'm going to follow the guiding lines to make sure they line up correctly. The wireframe for the dog walking app's homepage is done. I think it's looking great. Coming up, you're going to be transferring your own paper sketches into digital wireframes. You should be really well prepared at this point. As you practice using Figma or any other digital tool, you get a lot faster, and digital wireframing will be almost as quick as sketching on paper. Of course, any time you get stuck, come back to this video or look up the tutorials Figma has on their website. There are plenty of resources to help you as you get more comfortable with the tool. Good luck!
