Free Figma Tutorial: Designing Wireframes with Figma

This tutorial covers the ins and outs of designing Wireframes in Figma. Not only will you learn how to use Figma, but you'll also get a comprehensive understanding of the Wireframing process.

Note: You can copy & paste from the Figma link above. Also, be sure to attribute icon creators for public use.

The tutorial is part of the Butter Academy Online UX Design Course.

About the instructor:
I'm Daniel Salgado, founder and instructor at Butter Academy. I have over 8 years of design experience working for companies like Airbnb, Virgin, IBM, US Soccer, AKQA and more. I'm currently based in San Francisco, but I'm originally from Canada.

[butteracademy]

Hello! One important update if you're using shortcuts on Windows:
*Show/Hide Grid: CTRL + SHIFT + 4*

[pumpkinhead]

As a backend dev who has dabbled with figma, without much direction, this was so helpful. I actually feel like I'm working the tool, rather than the tool working me. Good stuff.

[melissatrinh]

this video was crazy helpful to me while i stress over creating wireframes for the first time in my college courses. i felt scatterbrained about it whilst trying to develop my own process, but this vid helped organize things that felt overwhelming to me. thanks Daniel

[alexeinordic]

Out of all the lectures I seen around wireframes this is the best lectures I ever seen yet. Very informative, thanks for the video.

[kevinnightingale]

This was the perfect Figma tutorial for anyone starting their Figma journey. Great pace, very well explained and extremely thorough. Thank you so much. 👌

[codecleric]

Perfect! As a developer with minimal design skills and a bit of comfortability with Figma, using this technique is a happy medium where I don't feel as much pressure to create perfect designs but can still mock up my apps so I'm not flying blind when developing a new project..

[elcasa]

I can't express how much I appreciate this tutorial. Thank you!!! I am just learning Figma (UXUI) and this lesson is exactly what I was searching for.
Much success brother!!!

[miguelmanzaba-tcis]

TNice tutorials is one of the best tutorials of ANYTNice tutorialNG that I've ever watched in my life! Thank you so much!

[ramiahonen]

One of the best tutorials I've ever seen! Clear, covers all that needs to be covered, great pace. 10/10 easily.

[thisEloah]

this is the best figma tutorial ive seen so far!

in 1 hour u get the basis of figma and how it works

it only remained to show the plugins!

keep up the great work !

[erwan]

Best soft soft tutorial for beginners on YouTube! I'm an absolute beginner and all the other tutorials I've found on YouTube have been so

[BrittanyMcNeer]

👍Brilliant video - very easy to follow along. Also really appreciated how you had the final parts about presenting, sharing & exporting files... this video is the only one I found so far that included those important parts! Kudos and THAK YOU!!!

[TheCorvusCoraxx]

My man... I looked for HOURS for a good tutorial and YOU gave me exactly what I was looking for! Your steps were logical, you gave me a framework on how to start projects and even more. Thanks a lot!

[boomerangfish]

Probably the most useful video I've gotten out of this site

[olusanyafoluso]

First ever time I’d watch a 1 hour video on YouTube. Thank you for this

[exhausted-tears]

I admire and appreciate the way this tutor/content creator made this tutorial video. His accent, voice, tone, details and his over all method of explaining things all are excellent. Thanks for this great Figma Wireframing Tutorial ! ❤👍

[AlexOkoli]

Thank you for this. The detailed explaination on each tool (frame tool, shape tool e.t.c.); the break-down of the Figma layout; and the insights on wireframing (such as grid system) were all very useful.

[Osamailyas]

Good tutorial with real examples. Clear and understandable accent espacially for non English speakers. I like this type of tutorials which are to the point and in simple English

[jenniferbrown]

I need to tell you THANK YOU! This video is calming me down so much. You are a great instructor and I hope you decide to post more videos! This is crazy helpful as I am trying to break into UX Design from a long career as an educator. Thank you again!

[CraigForsythDesign]

Love this video, really informative. As a front-end developer trying to move into UX it's really helpful to see peoples workflows related to UX and figma. One note: on pc the keyboard short cut for show / hide grid is ctrl+shift+4.