Figma: How to Create Wireframes and Prototypes

Figma is a popular design tool used for vector graphics editing and prototyping. In web design, specifically UX/UI design, creating wireframes and prototypes are a guaranteed deliverable to present to developers, clients, and users for testing purposes. The benefits of wireframing and prototyping allow you to save time across the entire project. Since Figma is a common tool used in many companies for web design, it is important to learn the basics and get familiar with how it works. In this tutorial, we will guide you in creating your first high-fidelity wireframes and prototype on Figma. Feel free to watch the YouTube video or read the detailed transcript below.

 

 

Video Transcript and Tutorial below:

Figma Dashboard

1. To get started, we’re first going to take a look at what your Figma dashboard will look like once you log into your Figma account. So I’ve had Figma for quite a while now so I have a few projects already displayed here. Your projects will also be displayed here for easy access and overview.

2. On the left side bar, we have a menu where you can organize your Figma design files. You can view them by Recents, Drafts, Community (which will lead you to a page where you can explore templates, widgets, and plugins created by the Figma Community), you can also favourite specific designs, and lastly, you can organize files into different Teams if you’re working with multiple people on a project.

3. Now let’s go ahead and start designing by opening a new design file here.

 

Adding a Frame

This is what your Figma canvas will look like and what we’re going to do first is give it a title.

For today’s tutorial, we will be working at creating high-fidelity wireframes for a skincare ecommerce company. For the sake of this video, we will only be doing basic elements for 3 pages – the home page, shop page, and About page. Feel free to finish the rest of the content on your own, after the video. We can call this file Adiwata – high fidelity.

4. To get started, let’s first add a frame onto our canvas. We can do this by going onto the top bar menu, clicking Region tools, and then Frame. You can choose different frame sizes depending on what you’re designing for – in this case, we will design for a desktop so I will just use this one here called Desktop.

5. You can change the width and height of the frame to suit your specific project as well as other details here.

6. For best practice, let’s first give this frame a title to keep our layers organized. Since we’ll be doing the home page first, we can name this one Home, then whatever the width of the frame is – in this case 1440.

 

Background Colour and Grid System

Now that we’ve chosen a frame and named it, we can start customizing it further by adding a background colour and creating a grid system. 

7. For the background colour, you can go to the Fill section and type in a hex code here or double click this colour preview to choose a colour manually. We will be using the background-colour FFFAF3.

8. Next, let’s add a grid. A grid system is important to help align page elements and balance visual content. Click on the plus sign in the Layout grid section and then grid settings by clicking the grid icon. We’ll be using columns so we’ll change Grid to Columns and give it a count of 3, a margin of 90, a gutter of 40, and an opacity of 5%. Since we’ll be using the same grid for all of the pages to create consistency we can save this as a grid style. We can do that by clicking this style icon and the plus sign. We’ll name this one 3-column 1440.

 

Logo

Now that we have a grid, we can start adding content. Let’s first do a simple logo.

9. Create a circle by going onto your Shape tools and click Ellipse. Click and hold anywhere to start creating your circle – hold the Shift key on your keyboard to make it proportionate. Let’s make this circle a nice purple colour by going onto Fill and changing the hex code to 45005E. 144width

10. To create text, click on the T icon at the top and anywhere on the frame. We’ll do a simple A and change the font and size on the right side bar. The font I’ll use is Risque and we’ll make it 137px. Let’s also change the colour to match the background. FFFAF3

You can group contents together by highlighting them all, right-clicking, and grouping selection.

 

Menu Navigation and Buttons

11. Let’s create the navigation by adding more text. Our first menu item will be Home (50, Risque) then Shop, then, About. We’ll also add a button here for people to log in from.

12. To create a button, you can simply add text on top of a shape. In this case, we’ll take this rectangle shape (216x85) with a border radius of 56, and a fill colour of 763B04. Next let’s add the Log In text on top and group them together.

 

Home Page Content and Additional Frames

13. To create longer, more descriptive text, just hold and drag the text tool onto the frame (Rubik regular, 45px). We can create another call-to-action button underneath this to lead people to the shop page. Lastly, you can add any visual content. For the sake of time, we’ll just do two circles overlapping each other. (copy/paste circles – overlap.)

14. This amount of content on the home page will do for now so let’s go ahead and start on the rest of the pages. The frame size is the same, so we’ll just add 2 more with the same grid system. We’ll also change the background colour of each to FFFAF3.

 

Components and Prototyping 

15. Since we’ll be using the same logo and navigation in all of the pages, we can create this entire header into a component. Components are elements you can reuse across your designs. Now let’s group these elements and make it into a component. Before we reuse this component, however, lets first link these menu items to their matching pages.

You can learn more about components by reading Figma's Guide to Components. 

16. We can do so by going to the Prototype tab, clicking on a menu-item, and dragging the circle plus towards the matching page like this. You can also change the interaction settings by trigger, action, destination, and animation.

Since this is the parent component, any changes you make on this will reflect on the child components like so.

 

Product Grid - Effects and Patterns

Now that we have our navigation on the Shop page, we can go back to the design tab and add more content. For that we’ll need a bunch of squares. So going back to our Shape tools again, lets create a square (337x 337) with a radius of 20.

17. We can give it a fill colour of CAAF96 and a drop shadow effect. (X10, Blur4, Y4, Spread5, 10%). This helps create dimension on our designs.

18. We can duplicate this by copy/paste or while holding the alt/option key – click and drag. Luckily, we have the 3-column grid already that we can align the squares to. Then, let’s group them.

For a little design, I’m going to add two circles, and bring the product grid group on top of that.

 

Picture Frame Masking

On the About page, I will show you how to place an image from your computer onto the frame. You can do it in two ways. First you can go to your Shape tools and click on Place Image. Or you can simply drag the picture from your folder onto the Figma canvas.

19. To have the image take the form of a shape, we can use masking. To do that, first have your shape ready – in this case we’ll do a rectangle with a border radius of 50. Then we just need to make sure the image is on top of that shape, highlight both, and click use as mask.

We can add a short description of the company underneath.

View Prototype

20. To view the prototype, we can click on the play button where it will open a new tab.

Conclusion

Now, what we have here is a simple and incomplete design, but I hope it’s enough to help you get started with creating your wireframes and prototypes. If you have any questions, feel free to type them in the comments below or subscribe to our YouTube channel to get more content on web design tutorials. Thanks for watching!