Free Figma Tutorial: Designing Wireframes with Figma

Поделиться
HTML-код
  • Опубликовано: 23 дек 2024

Комментарии • 414

  • @butteracademy
    @butteracademy  4 года назад +97

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

    • @christinegbk
      @christinegbk 3 года назад

      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
      @jayjoharrimixbysuresh.makw1378 3 года назад +1

      C Dr dt2 St ET u

    • @PochoNieves
      @PochoNieves 2 года назад +3

      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
      @dekafmusic 2 года назад

      @@PochoNieves 😅same

    • @lewismomanyi578
      @lewismomanyi578 Год назад +2

      Just shift + G

  • @pumpkinhead6646
    @pumpkinhead6646 3 года назад +23

    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.

  • @melissatrinh7161
    @melissatrinh7161 4 года назад +154

    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
      @butteracademy  4 года назад +7

      Really glad it was helpful for you, Melissa!

    • @SonukumarSonukumar-su1pe
      @SonukumarSonukumar-su1pe 3 года назад +1

      ऐ मेरे

    • @seunodediran4272
      @seunodediran4272 2 года назад +1

      @@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.

  • @alexeinordic8774
    @alexeinordic8774 6 месяцев назад +3

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

  • @ramiahonen6164
    @ramiahonen6164 Год назад +2

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

  • @kevinnightingale1680
    @kevinnightingale1680 2 года назад +47

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

  • @codecleric4972
    @codecleric4972 4 года назад +22

    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..

  • @elcasa6587
    @elcasa6587 4 года назад +32

    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
      @butteracademy  4 года назад +2

      Love to hear it and glad you enjoyed the tutorial! Check out our latest tutorial on Prototyping in Figma: ruclips.net/video/iBkXf6u8htI/видео.html

    • @elcasa6587
      @elcasa6587 4 года назад +2

      ​@@butteracademy After this is done (our work), Do you have any videos on how to set up a online portfolio site or page?

    • @butteracademy
      @butteracademy  4 года назад +1

      @@elcasa6587 Not at the moment, but it's something I want to tackle in the future!

    • @callyderon310
      @callyderon310 2 года назад

      @@butteracademy still waiting for your tutorial on how to set up a UX UI online portfolio for Beginners.🙏🏻🙏🏻🙏🏻

  • @thisEloah
    @thisEloah 3 года назад +5

    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 !

  • @olusanyafoluso5012
    @olusanyafoluso5012 3 года назад

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

  • @TheCorvusCoraxx
    @TheCorvusCoraxx 4 года назад +16

    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!

  • @erwan8980
    @erwan8980 2 года назад

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

  • @miguelmanzaba-tcis1149
    @miguelmanzaba-tcis1149 2 года назад

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

  • @MarkWhiteartist
    @MarkWhiteartist 4 года назад +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!

  • @exhausted-tears
    @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 ! ❤👍

  • @jenniferbrown4908
    @jenniferbrown4908 3 года назад +6

    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!

  • @chinonyeremfalade242
    @chinonyeremfalade242 3 года назад

    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

  • @boomerangfish3558
    @boomerangfish3558 3 года назад +1

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

  • @AlexOkoli
    @AlexOkoli 4 года назад +4

    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
      @butteracademy  4 года назад +1

      Really glad you liked it, Alex! Thanks for watching.

  • @BrittanyMcNeer
    @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!!!

  • @muhammadisrarulhaq9052
    @muhammadisrarulhaq9052 3 года назад +6

    Thanks a ton mate. Clear and to the point presentation. You taught entire FIGMA too, its a crash course honestly. Bless you!

  • @BigYellaGal
    @BigYellaGal 9 месяцев назад

    This is a great introductory video! I like the straightforward presentation and the use of a simple example.

  • @CraigForsythDesign
    @CraigForsythDesign 4 года назад +11

    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
      @butteracademy  4 года назад

      Really glad you found it helpful, Craig! Good shout on the PC shortcut for grids. We'll be sure to update!

    • @butteracademy
      @butteracademy  4 года назад

      @Gforce Gaming Have a few in the works!

    • @butteracademy
      @butteracademy  4 года назад

      ​@Gforce Gaming New tutorial is here! This one is on prototyping in Figma: ruclips.net/video/iBkXf6u8htI/видео.html

  • @Osamailyas
    @Osamailyas 8 месяцев назад

    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

  • @goodgamegaming777
    @goodgamegaming777 9 дней назад

    You’re a scholar and a gentleman for sharing this sir 🎩

  • @Paul-wb4gx
    @Paul-wb4gx 4 года назад +2

    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
      @butteracademy  4 года назад

      Love to hear it, Paul! More tutorials coming soon.

  • @emlassiter1501
    @emlassiter1501 2 года назад

    This tutorial from Butter Academy is excellent as an introduction to Figma!

  • @jason_liam
    @jason_liam 4 года назад +1

    This channel is so under-rated !

  • @franzit
    @franzit 2 года назад

    I'm amazed by the quality of this video. Thanks so much!

  • @priyalgupta8382
    @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.

  • @dementeddiode
    @dementeddiode 3 года назад +1

    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.

  • @henriettetotland3751
    @henriettetotland3751 2 года назад

    This video saved me when i was stuck on my school project! Thank you!

  • @ademolaadetunji3915
    @ademolaadetunji3915 4 года назад +1

    This is a gold mine. Bless you Mr. Daniel.

    • @butteracademy
      @butteracademy  4 года назад

      Glad you think so! Thanks for watching.

  • @JoseSalazar-cj3gd
    @JoseSalazar-cj3gd 4 года назад +2

    This tutorial is very helpful. It gives me a head-start to create my own layout and then develop it programmatically. Thank you!

  • @markmugisha5752
    @markmugisha5752 2 года назад

    Daniel, you are a gem. This video settled me on Figma. Thanks.

  • @iamgsilva
    @iamgsilva 3 года назад +17

    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.

  • @vyavahareaditya5936
    @vyavahareaditya5936 Год назад +1

    Bro Your designing skill is very superb, Thanks for this tutorial ❤

  • @tincip
    @tincip 4 года назад +3

    This was great, I really enjoyed it! Please share more Figma tutorial videos. You are a great teacher 👩🏻‍💻

    • @butteracademy
      @butteracademy  4 года назад +1

      Thanks for your support Tina. More tutorials are in the works.

  • @zengamez
    @zengamez 3 года назад

    i get very overwhelmed and confused with some tutorials, but yours was straight to the point and very helpful

  • @60_beats
    @60_beats 2 года назад

    GREAT VIDEO, ITS HOW HE ARTICULATED THE PROGRAM. Some designers like to use tech jargon to sound all advanced. Good video

  • @rahulalinje97
    @rahulalinje97 3 года назад

    can't put words how much this video has helped me...

  • @maggievitality9627
    @maggievitality9627 7 месяцев назад

    Best Figma wireframe tutorial I’ve seen
    Thanks so much

  • @SafakSahin
    @SafakSahin Год назад

    Career changer video! Makes it look so easy.

  • @ValeriaAli-wg6tp
    @ValeriaAli-wg6tp 7 месяцев назад

    Thank you so much for this! I am new to figma and this tutorial made maneuvering around the platform so easy.

  • @ernestapedo5378
    @ernestapedo5378 4 года назад +1

    I've taken your course on Udemy and it's going very well so far. Thank you very much for this well structured video.

    • @butteracademy
      @butteracademy  4 года назад

      Thanks for your support, Ernest! Glad you're enjoying the course.

    • @ernestapedo5378
      @ernestapedo5378 3 года назад

      @Katarzyna G His Udemy course. I think he left a link in the description. Check it out.

    • @christianwhite6980
      @christianwhite6980 2 года назад

      @@butteracademy could you please link your udemy course here. I would very much love to join and learn from you

  • @jazgulmadazimova9282
    @jazgulmadazimova9282 4 года назад +3

    Thanks! This helped me a lot. I have gained some confidence in using figma while praciticing with you.

    • @hk_build
      @hk_build 4 года назад +1

      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

  • @eustaquio2247
    @eustaquio2247 3 года назад

    Best tutorial video I've found and the first one every new figma user should watch. Thanks!

  • @tranha9958
    @tranha9958 3 года назад +1

    Thanks a lot!!! I have been struggling with my very first UX design PJ. This gonna help with my 2nd PJ.

  • @masandza_1
    @masandza_1 2 года назад

    The way you explain is simple and very effective, thank you for helping us

  • @thevedicsky
    @thevedicsky 2 года назад

    How can I add the navigation bar you are using?

  • @nazdoesit
    @nazdoesit 2 года назад +1

    Thank you for this Golden Tutorial ! ✨ It really helped me understand what a wireframe is and the process of creating one !

  • @ltserge3226
    @ltserge3226 2 года назад

    20:15 the tricks of the traaaddee thanks dude this vid super helpful from a developer perspective

  • @rajeshwarie7836
    @rajeshwarie7836 2 года назад

    Liked a lot this tutorial but only 3 videos are there I am expecting more on this figma. Really a very well explained very nice....

  • @neomaredi5922
    @neomaredi5922 4 года назад +2

    Only critique would be tha you should have included a resources zip file to make this faster to follow. Otherwise the best damn Figma beginners tutorial yet. I did the guided project on Coursera and this has it beat by a mile. Thank you so much!

    • @butteracademy
      @butteracademy  4 года назад +1

      Really glad you enjoyed the tutorial. You're right about the Resources too. Here's a Figma file with Resources + Designs that you can copy from: bit.ly/38B7LHO
      _Note: Be sure to attribute icon creators for public use._

    • @MarsMatrix6744
      @MarsMatrix6744 3 года назад

      Im shocked one year after this debuted I had to scroll all the way to this part of the comment section just to find how to get the images. It was SHOCKING to go from caught up to watching you drag images and text. Great video otherwise, but that stopped me in my tracks.

  • @shekelboi
    @shekelboi 5 месяцев назад +1

    Creating this is the easy part. Coming up with a nice design like this... now that's tough.

  • @vijayva9870
    @vijayva9870 2 года назад

    Your are AWESOME faculty, I learn Figma from you and Thank You. GOD BLESS YOU..........

  • @nataliewray7743
    @nataliewray7743 4 года назад +2

    This tutorial was great! Well explained. Thanks

    • @butteracademy
      @butteracademy  4 года назад

      Really glad it helped you, Natalie. Thanks for watching!

  • @picketfencesproductions2540
    @picketfencesproductions2540 3 года назад +1

    Bro, I'll give you a virtual hug! Thanks heaps for this!

  • @KunalRana-f6s
    @KunalRana-f6s Год назад

    Amazing tutorials for beginners. Thanks for making such tutorials.

  • @adapatricialopez1769
    @adapatricialopez1769 4 года назад +2

    This tutorial is really clear and helpful. Thank you!

    • @butteracademy
      @butteracademy  4 года назад +1

      Glad you enjoyed it, Ada!

    • @hk_build
      @hk_build 4 года назад

      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

  • @deniseclaridy8299
    @deniseclaridy8299 3 года назад

    Very helpful. Very well done. I wanted help to learn how to wireframe using Figma. You nailed it. Thank you

  • @damianestevez2301
    @damianestevez2301 3 года назад

    Daniel this was mind blowing. Great way to segment the process and give someone like me hope thank you for this tutorial.

  • @nsikakarchibong1708
    @nsikakarchibong1708 Год назад

    This video is super great, I believe it would help me on figma journey as a beginner.

    • @FinazzoCodes
      @FinazzoCodes Год назад

      Hi! I'm a super small channel that specializes in creating easy-to-follow tutorials on Figma. My most recent video teaches you how to create wireframes step by step. Your feedback and support would mean the world to me! And if there's any way I can help you out let me know, hope to see you on my channel, cheers! ✌️

  • @EmoreRukevwe-mq3yn
    @EmoreRukevwe-mq3yn Год назад

    I just like the way this beautiful, I love the explanation 🤩, great job 👍😍

  • @Atulwebdesigner
    @Atulwebdesigner Год назад

    Thanks for the video. Understood a great deal about Figma and how to use it.

    • @FinazzoCodes
      @FinazzoCodes Год назад

      Hi! I'm a super small channel that specializes in creating easy-to-follow tutorials on Figma. My most recent video teaches you how to create wireframes step by step. Your feedback and support would mean the world to me! And if there's any way I can help you out let me know, hope to see you on my channel, cheers! ✌️

  • @pamelamardonesguicharrouss8481

    Awesome tutorial :) very practical and it's not as boring as others, thanks for the video.

  • @vzx13
    @vzx13 2 года назад +1

    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!

  • @kianbadie5166
    @kianbadie5166 4 года назад

    From a developer who doesn't know much about ui: If I browsed a site that looked like this wireframe, I would already think it's sleek af haha. Thanks for the vid

  • @clemtw
    @clemtw Год назад

    Awesome tutorial, thank you.
    Great structure, well presented with great articulation (even at 1.75x speed).

  • @joyz_style
    @joyz_style 2 года назад

    Thankyou so much for this video, i was using illustrator to prototype and i must say, this is 100% better.

  • @ernesto8273
    @ernesto8273 3 года назад

    This is not one of the best but certainly the best

  • @jasonkoh
    @jasonkoh Год назад

    This tutorial was so incredibly helpful and informative. Thank you!

  • @oscarrivasrodriguez2814
    @oscarrivasrodriguez2814 3 года назад

    This was very helpful as an introduction to Figma and to understand the differences/similarities with Sketch. Thank you very much.

  • @sylviajelimo6756
    @sylviajelimo6756 4 года назад +1

    Wow, this is awesome, thanks a bunch... You're such a great teacher I have no background in this and I've been able to follow through..

    • @butteracademy
      @butteracademy  4 года назад

      Glad you enjoyed it, Sylvia. More tutorials on the way.

  • @amandasimonds9
    @amandasimonds9 4 года назад +1

    Best Figma tutorial I've found thank you!!!!

    • @butteracademy
      @butteracademy  4 года назад

      Best comment I've seen all day. Thanks for your support.

  • @swapnilpareek4043
    @swapnilpareek4043 3 года назад

    You made it look effortless.

  • @rinaldorex
    @rinaldorex 4 года назад +6

    This was an impressive tutorial, very deftly explained and is very useful for getting started and can actually take time to master. The whole flow was beautifully crafted.
    Thank you, and please continue your impressive work! :)

    • @butteracademy
      @butteracademy  4 года назад

      Thanks, Rinaldo! More tutorials coming soon 🎥

  • @OdilammaOkolie
    @OdilammaOkolie 3 года назад

    Thank you. love the time you took to explain each step. I understand it better now for an assignment that I have

  • @JustTory
    @JustTory 3 года назад

    dude this just saved my life for an assignment. and now i rather do my wireframe manually

  • @thusharasampath8269
    @thusharasampath8269 3 года назад

    very elegant and clear tutorial thank you

  • @rayusaki88
    @rayusaki88 4 года назад +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 👍🏻👍🏻

  • @sallys9492
    @sallys9492 2 года назад

    Thank you so much! Really helpful tutorial, excited to continue working on my own wireframes now.

  • @redapplegreenapple8847
    @redapplegreenapple8847 3 года назад +1

    Great video, how do u get icon without water mark and how do u put them on your wireframe from the website?

  • @Yovistamps
    @Yovistamps Год назад

    Really great video. It’s edited well and it was very helpful in explaining well to beginners. Thank you 😊

  • @papanurgle7724
    @papanurgle7724 3 года назад +1

    Great tutorial video. Out of curiousity how do we complete the carousel animation for displayed items at 38:30? I am having trouble grasping that topic.

  • @thomasc7992
    @thomasc7992 3 года назад

    thank you!!!
    really helpful to me while I stress over creating wireframes for the first time!
    please keep up and hard work!

  • @vivianvasquez434
    @vivianvasquez434 Год назад

    thank you for this tutorial.. very clear explanation and presentation

  • @muftaudeenjimoh9678
    @muftaudeenjimoh9678 2 года назад

    Amazing and in-depth video 🙌🏾🙌🏾🙌🏾❣️🔥

  • @MarsMatrix6744
    @MarsMatrix6744 3 года назад

    Famous last words... "One less password i'll have to remember".. Also a nice single source of a breach. BUT WONDERFUL TUTORIAL FOR NEW USERS!

  • @karinakh5378
    @karinakh5378 2 года назад

    You are a lifesaver - thank you so much. Great tutorial.

  • @valentina111lobs_
    @valentina111lobs_ 4 года назад +1

    Daniel Salgado, Ti amo. 😂👏

  • @LifeNurtureAcademy
    @LifeNurtureAcademy 2 года назад

    Thank you so much this video was really helpful. But I still couldn’t bring my text to front. The grid covers it. How can I sort this out pls?

  • @CJ-nz5rt
    @CJ-nz5rt 3 года назад

    your tut is very clever! can't wait for your future videos!

  • @boomerangfish3558
    @boomerangfish3558 3 года назад +2

    Layout grid settings (Butter Academy)
    Mobile:
    * Columns
    * Count 4
    * Margin 24
    * Gutter 16
    Desktop:
    * Columns
    * Count 12
    * Margin 64
    * Gutter 16

  • @shafielahi7097
    @shafielahi7097 3 года назад

    Great and clearly explained tutorial Daniel. Your work speaks for itself. Good job!

  • @alexeinordic8774
    @alexeinordic8774 6 месяцев назад +1

    Hey thanks a lot for this tutorial it really helped a lot

  • @bibekkhatakho8779
    @bibekkhatakho8779 2 года назад

    Great video. I learned a lot for this single video. Cheers!

  • @irynasuprunovych1738
    @irynasuprunovych1738 8 месяцев назад

    Thank you! This is amazing Figma tutorial!

  • @sienyun6328
    @sienyun6328 Год назад

    Really Helpful for beginner like me! Thank you very much for sharing :) I really appreciate it

    • @FinazzoCodes
      @FinazzoCodes Год назад

      Hi! I'm a super small channel that specializes in creating easy-to-follow tutorials on Figma. My most recent video teaches you how to create wireframes step by step. Your feedback and support would mean the world to me! And if there's any way I can help you out let me know, hope to see you on my channel, cheers! ✌️

  • @manojpatil9824
    @manojpatil9824 3 года назад

    Very good explanation. I understood everything. Please do more videos 🙏🏻🙏🏻