Free Figma Tutorial: Designing Wireframes with Figma
Рет қаралды 739,868
Күн бұрын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.
Figma file: bit.ly/38B7LHO
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.
Full course at: butteracademy.com/
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 3 жыл бұрын
Hello! One important update if you're using shortcuts on Windows: *Show/Hide Grid: CTRL + SHIFT + 4*
@christinegbk 2 жыл бұрын
Daniel, I created wireframes in Figma but when I go to play them in present mode to see what they look like on a mobile device nothing shows up. I don't know what I did wrong.
@jayjoharrimixbysuresh.makw1378 2 жыл бұрын
C Dr dt2 St ET u
@PochoNieves 2 жыл бұрын
BRO I kept doing CTRL+SHIFT+G and it keep deleting the frame! LOL! I was already giving up hope. This tutorial is about to impress lots of people in an interview I am about to do!
@dekafmusic 2 жыл бұрын
@@PochoNieves 😅same
@lewismomanyi578 Жыл бұрын
Just shift + G
@alexeinordic8774 25 күн бұрын
Out of all the lectures I seen around wireframes this is the best lectures I ever seen yet. Very informative, thanks for the video.
@jenniferbrown4908 2 жыл бұрын
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!
@pumpkinhead6646 3 жыл бұрын
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.
@codecleric4972 3 жыл бұрын
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..
@Eloah_JF 3 жыл бұрын
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 !
@dementeddiode 2 жыл бұрын
Best tutorial ever. I've been searching for hours since I'm new to Figma until I finally popped across your video. And the next hour or so, well quite a few tbh, I followed step by step on exactly how to proceed and even though I've never used Figma, it didn't feel like I was being overwhelmed with the new terminology and the likes. I pretty much was able with to complete the mobile version tutorial without much hiccups. I'm going to try the web version now and hopefully i can pull it off. Thanks a lot. You're a very good tutor.
@ramiahonen6164 9 ай бұрын
One of the best tutorials I've ever seen! Clear, covers all that needs to be covered, great pace. 10/10 easily.
@muhammadisrarulhaq9052 2 жыл бұрын
Thanks a ton mate. Clear and to the point presentation. You taught entire FIGMA too, its a crash course honestly. Bless you!
@TheCorvusCoraxx 3 жыл бұрын
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!
@kevinnightingale1680 2 жыл бұрын
This was the perfect Figma tutorial for anyone starting their Figma journey. Great pace, very well explained and extremely thorough. Thank you so much. 👌
@iamgsilva 3 жыл бұрын
This was a VERY useful and enjoyable tutorial! Really appreciate you putting this together. A lot more interesting to have a project to following along with, so this was perfect.
@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 ! ❤👍
@chinonyeremfalade242 2 жыл бұрын
I spent the day watching tutorials but wasn't understanding a thing till I found this channel. I loved this tutorial, it was helpful and very informative. Exactly what I was searching for. Thank you
@melissatrinh7161 3 жыл бұрын
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
@butteracademy 3 жыл бұрын
Really glad it was helpful for you, Melissa!
@SonukumarSonukumar-su1pe 2 жыл бұрын
ऐ मेरे
@seunodediran4272 2 жыл бұрын
@@butteracademy I have been trying to do the exact thing you do but somehow I can't seem to get it right and I would love for you to help out cos I'm a little confused and I thought I did everything right...if there's a way I can reach you I would appreciate it, thanks.
@erwan8980 Жыл бұрын
Best soft soft tutorial for beginners on KZfaq! I'm an absolute beginner and all the other tutorials I've found on KZfaq have been so
@AlexOkoli 3 жыл бұрын
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.
@butteracademy 3 жыл бұрын
Really glad you liked it, Alex! Thanks for watching.
@zengamez 3 жыл бұрын
i get very overwhelmed and confused with some tutorials, but yours was straight to the point and very helpful
@elcasa6587 3 жыл бұрын
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!!!
@butteracademy 3 жыл бұрын
Love to hear it and glad you enjoyed the tutorial! Check out our latest tutorial on Prototyping in Figma: kzfaq.info/get/bejne/n6ibi8ln2p7MpH0.html
@elcasa6587 3 жыл бұрын
@@butteracademy After this is done (our work), Do you have any videos on how to set up a online portfolio site or page?
@butteracademy 3 жыл бұрын
@@elcasa6587 Not at the moment, but it's something I want to tackle in the future!
@callyderon310 2 жыл бұрын
@@butteracademy still waiting for your tutorial on how to set up a UX UI online portfolio for Beginners.🙏🏻🙏🏻🙏🏻
@shafielahi7097 3 жыл бұрын
Great and clearly explained tutorial Daniel. Your work speaks for itself. Good job!
@damianestevez2301 2 жыл бұрын
Daniel this was mind blowing. Great way to segment the process and give someone like me hope thank you for this tutorial.
@MarkWhiteartist 3 жыл бұрын
this was SO helpful. I was able to follow you step by step to work on my own wireframe. Never used figma before. you really are a great teacher. Thank you!
@butteracademy 3 жыл бұрын
Thanks for watching, Mark!
@Paul-wb4gx 3 жыл бұрын
Chapeau. I found this tutorial well-paced and very easy to follow. Great for novice UX/UI designers to see how a master does it. Nice work.
@butteracademy 3 жыл бұрын
Love to hear it, Paul! More tutorials coming soon.
@eustaquio2247 3 жыл бұрын
Best tutorial video I've found and the first one every new figma user should watch. Thanks!
@boomerangfish3558 3 жыл бұрын
Probably the most useful video I've gotten out of this site
@miguelmanzaba-tcis1149 Жыл бұрын
TNice tutorials is one of the best tutorials of ANYTNice tutorialNG that I've ever watched in my life! Thank you so much!
@ademolaadetunji3915 3 жыл бұрын
This is a gold mine. Bless you Mr. Daniel.
@butteracademy 3 жыл бұрын
Glad you think so! Thanks for watching.
@maggievitality9627 Ай бұрын
Best Figma wireframe tutorial I’ve seen Thanks so much
@ValeriaAli-wg6tp 2 ай бұрын
Thank you so much for this! I am new to figma and this tutorial made maneuvering around the platform so easy.
@OdilammaOkolie 3 жыл бұрын
Thank you. love the time you took to explain each step. I understand it better now for an assignment that I have
@picketfencesproductions2540 3 жыл бұрын
Bro, I'll give you a virtual hug! Thanks heaps for this!
@nazdoesit 2 жыл бұрын
Thank you for this Golden Tutorial ! ✨ It really helped me understand what a wireframe is and the process of creating one !
@ashleyj.3857 Жыл бұрын
INCREDIBLE TUTORIAL!
@olusanyafoluso5012 2 жыл бұрын
First ever time I’d watch a 1 hour video on KZfaq. Thank you for this
@markmugisha5752 Жыл бұрын
Daniel, you are a gem. This video settled me on Figma. Thanks.
@franzit Жыл бұрын
I'm amazed by the quality of this video. Thanks so much!
@tonyvagawrld Жыл бұрын
Installed, everything works, thanks!
@masandza_1 2 жыл бұрын
The way you explain is simple and very effective, thank you for helping us
@JoseSalazar-cj3gd 3 жыл бұрын
This tutorial is very helpful. It gives me a head-start to create my own layout and then develop it programmatically. Thank you!
@butteracademy 3 жыл бұрын
Thanks for watching, Jose!
@thomasc7992 3 жыл бұрын
thank you！！！ really helpful to me while I stress over creating wireframes for the first time! please keep up and hard work!
@CraigForsythDesign 3 жыл бұрын
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.
@butteracademy 3 жыл бұрын
Really glad you found it helpful, Craig! Good shout on the PC shortcut for grids. We'll be sure to update!
@butteracademy 3 жыл бұрын
@Gforce Gaming Have a few in the works!
@butteracademy 3 жыл бұрын
@Gforce Gaming New tutorial is here! This one is on prototyping in Figma: kzfaq.info/get/bejne/n6ibi8ln2p7MpH0.html
@rahulalinje97 3 жыл бұрын
can't put words how much this video has helped me...
@emlassiter1501 2 жыл бұрын
This tutorial from Butter Academy is excellent as an introduction to Figma!
@jazgulmadazimova9282 3 жыл бұрын
Thanks! This helped me a lot. I have gained some confidence in using figma while praciticing with you.
@hk_build 3 жыл бұрын
This wireframe design is to just show it to product owner how the product over all looks like ... and final design will be same as wire frame with actual colors ...am i correct..? am UI developer gradually moving to UX so
@irynasuprunovych1738 3 ай бұрын
Thank you! This is amazing Figma tutorial!
@priyalgupta8382 Жыл бұрын
An excellent tutorial for Figma beginners is available. This step-by-step video demonstrates how a designer tackles a new design and provides insights into Figma shortcuts.
@oscarrivasrodriguez2814 2 жыл бұрын
This was very helpful as an introduction to Figma and to understand the differences/similarities with Sketch. Thank you very much.
@soldiergirlpoet 4 ай бұрын
This is a great introductory video! I like the straightforward presentation and the use of a simple example.
@jasonkoh Жыл бұрын
This tutorial was so incredibly helpful and informative. Thank you!
@SafakSahin Жыл бұрын
Career changer video! Makes it look so easy.
@tincip 3 жыл бұрын
This was great, I really enjoyed it! Please share more Figma tutorial videos. You are a great teacher 👩🏻💻
@butteracademy 3 жыл бұрын
Thanks for your support Tina. More tutorials are in the works.
@tranha9958 3 жыл бұрын
Thanks a lot!!! I have been struggling with my very first UX design PJ. This gonna help with my 2nd PJ.
@magda1120able 2 жыл бұрын
This was great, very well explained, thanks! I wish you had more material in your channel.
@user-cg2nz2uy8e 3 жыл бұрын
Wow! Great guide!!
@kandries1049 3 жыл бұрын
What an excellent tutorial - man you really helped me a lot. Thank you!
@sallys9492 2 жыл бұрын
Thank you so much! Really helpful tutorial, excited to continue working on my own wireframes now.
@deniseclaridy8299 3 жыл бұрын
Very helpful. Very well done. I wanted help to learn how to wireframe using Figma. You nailed it. Thank you
@rayusaki88 3 жыл бұрын
Amazing content! Very helpful video on Figma, specially for starters! Gives a good overview on features and also on wireframing! Thanks for this vid 👍🏻👍🏻
@butteracademy 3 жыл бұрын
Glad you enjoyed it!
@clemtw Жыл бұрын
Awesome tutorial, thank you. Great structure, well presented with great articulation (even at 1.75x speed).
@vyavahareaditya5936 7 ай бұрын
Bro Your designing skill is very superb, Thanks for this tutorial ❤
@thusharasampath8269 2 жыл бұрын
very elegant and clear tutorial thank you
@MOHAMEDHASSAN-fk9jv 3 жыл бұрын
Fantastic and easy to understand tutorial. Thanks a lot.
@doonyadubai3581 3 жыл бұрын
Thank you so much.The best Figma tutorial.
@vzx13 2 жыл бұрын
Bro, thanks a lot for your lesson! Greatly accelerates my learning curve with this tool. Just a suggestion, it would help a lot if you make sections in the video timeline because you already separate the lesson sections well in the video. Cheers!
@Osamailyas 2 ай бұрын
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
@vivianvasquez434 Жыл бұрын
thank you for this tutorial.. very clear explanation and presentation
@vijayva9870 2 жыл бұрын
Your are AWESOME faculty, I learn Figma from you and Thank You. GOD BLESS YOU..........
@jason_liam 3 жыл бұрын
This channel is so under-rated !
@butteracademy 3 жыл бұрын
Thanks for the love!
@st3phylee 3 жыл бұрын
this is so amazing! thank you for your effort for making this video! I have learned so much from you here!
@butteracademy 3 жыл бұрын
Thanks for watching!
@henriettetotland3751 Жыл бұрын
This video saved me when i was stuck on my school project! Thank you!
@swapnilpareek4043 3 жыл бұрын
You made it look effortless.
@Geovanna.michelle Жыл бұрын
Really great video. It’s edited well and it was very helpful in explaining well to beginners. Thank you 😊
@user-xi3sz8nx6i 11 ай бұрын
Amazing tutorials for beginners. Thanks for making such tutorials.
@pamelamardonesguicharrouss8481 10 ай бұрын
Awesome tutorial :) very practical and it's not as boring as others, thanks for the video.
@Barry101er 2 жыл бұрын
Great tutorial, thanks.
@CJ-nz5rt 3 жыл бұрын
your tut is very clever! can't wait for your future videos!
@myialine 3 жыл бұрын
Great content! It helped me to organise my assets and headers, a great time saver 💯
@isuruinfo1 2 жыл бұрын
I can't thank you enough. Bless you bro!!!
@amandasimonds9 3 жыл бұрын
Best Figma tutorial I've found thank you!!!!
@butteracademy 3 жыл бұрын
Best comment I've seen all day. Thanks for your support.
@ProducerSikste 2 жыл бұрын
GREAT VIDEO, ITS HOW HE ARTICULATED THE PROGRAM. Some designers like to use tech jargon to sound all advanced. Good video
@EmoreRukevwe-mq3yn 7 ай бұрын
I just like the way this beautiful, I love the explanation 🤩, great job 👍😍
@joyzjazzy 2 жыл бұрын
Thankyou so much for this video, i was using illustrator to prototype and i must say, this is 100% better.
@channie-cg 2 жыл бұрын
Video lookin' so clean....
@stargazing0010 8 ай бұрын
Amazing , clear tutorial. Thanks!
@wanttogotoengland 2 жыл бұрын
Thank you for this!
@karinakh5378 Жыл бұрын
You are a lifesaver - thank you so much. Great tutorial.
@gooddayexplorer-onlinemusi2120 3 жыл бұрын
Well... that was a great jump start for me - thanks a lot man, really valuable :D
@ameneko091 2 жыл бұрын
Learned a lot from your video !
@user-yw4zy9ey7z 2 жыл бұрын
Thank you for this video, it was very helpful!
@muftaudeenjimoh9678 Жыл бұрын
Amazing and in-depth video 🙌🏾🙌🏾🙌🏾❣️🔥
@frannavarrodj Жыл бұрын
Hey man, It works great and without any problems.
@nataliewray7743 3 жыл бұрын
This tutorial was great! Well explained. Thanks
@butteracademy 3 жыл бұрын
Really glad it helped you, Natalie. Thanks for watching!
@matthewdoyle2284 Жыл бұрын
Amazing tutorial! Thank you so much!!
@dibavaghefi6405 3 жыл бұрын
thank you for this awesome tutorial!
@SunnyHyde 3 жыл бұрын
excellent guide thank you for making this man
@mohamedkaba23 2 жыл бұрын
Thanks for tutorial! Incredibly useful tips
@valentineqgb6803 Жыл бұрын
this is going to be great!
@alexeinordic8774 Ай бұрын
Hey thanks a lot for this tutorial it really helped a lot
@thedigitalnoodle4021 3 жыл бұрын
Great Video. definitely worth more views!
@preemptivekicks1355 3 жыл бұрын
Thank you so much. Really great tutorial.