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.
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!
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 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.
This was the perfect Figma tutorial for anyone starting their Figma journey. Great pace, very well explained and extremely thorough. Thank you so much. 👌
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.
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..
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!!!
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.
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.
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 !
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!
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!
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!
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.
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!
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._
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.
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!
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
@ButterAcademy I recommend you to add YT chapters to this video, this way it's easier for the viewers to come back more often looking for the information they forgot & you'll get more traffic - and everyone's happy !
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.
Amazing content! Very helpful video on Figma, specially for starters! Gives a good overview on features and also on wireframing! Thanks for this vid 👍🏻👍🏻
Thanks Francisco. I'll add a grids tutorial to the list. 12-column grids on desktop are pretty standard. Especially when developers code with frameworks like Bootstrap. Margins are totally up to you.
thank you for this. your tutorial is so helpful. I want to learn how to translate figma design into React and make it responsive. Do you have a course on that?
These Figma tips are super useful. However, true wireframes should not include finished or even draft content (graphics or copy). The whole point of a wireframe is to map the most generic content types (image, copy, hero, video, slider, contact forms, product grids, etc.), showing the scale and relationships between those elements on the page. Getting buy-in on these basics will save a TON of heartache once you move on to your high-def creative.
At 10.51 the hamburger meny to the left suddenly shows many new options which my Figma does not. I am grateful for the tutorial but feel very frustrated and do not know how to get ahead since I don't seem to find the "Resources" category which I need for later work in the tutorial
That's such a huge complint. I rember watcNice tutorialng Nice tutorials videos/channel with hundreds of thousands of subs when I was just starting out
e understand tNice tutorialngs in better depth. I didn't even realize i was just scratcNice tutorialng the surface with tNice tutorials DAW. I'm using soft and soft one and I
Damn. Nice job. I realy couldn't find a proper tutorial explaining everytNice tutorialng you needed clearly but then i found tNice tutorials treasure of a video.
big mistake is sir you didnot mention the size between button and text an Containour size ...like if u make the button there is no size mention how much size will put between the text and button size??
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
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!
Nice tutorial brother i just want to ask you wNice tutorialch software is easy and best to learn as DAW soft soft or abelton live. Pls reply as soon as you can
Thank you very much for this content! Would love to see one for prototyping as well and maybe getting into more advanced use of Figma features! :) Thanks again!!! Great content! Subscribed!
Hello! One important update if you're using shortcuts on Windows:
*Show/Hide Grid: CTRL + SHIFT + 4*
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.
C Dr dt2 St ET u
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!
@@PochoNieves 😅same
Just shift + G
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
Really glad it was helpful for you, Melissa!
ऐ मेरे
@@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.
This was the perfect Figma tutorial for anyone starting their Figma journey. Great pace, very well explained and extremely thorough. Thank you so much. 👌
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.
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..
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!!!
Love to hear it and glad you enjoyed the tutorial! Check out our latest tutorial on Prototyping in Figma: ruclips.net/video/iBkXf6u8htI/видео.html
@@butteracademy After this is done (our work), Do you have any videos on how to set up a online portfolio site or page?
@@elcasa6587 Not at the moment, but it's something I want to tackle in the future!
@@butteracademy still waiting for your tutorial on how to set up a UX UI online portfolio for Beginners.🙏🏻🙏🏻🙏🏻
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.
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.
Really glad you found it helpful, Craig! Good shout on the PC shortcut for grids. We'll be sure to update!
@Gforce Gaming Have a few in the works!
@Gforce Gaming New tutorial is here! This one is on prototyping in Figma: ruclips.net/video/iBkXf6u8htI/видео.html
Out of all the lectures I seen around wireframes this is the best lectures I ever seen yet. Very informative, thanks for the video.
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 !
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!
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!
After downloading the vector images, how do I add them into figma
How can I add the navigation bar you are using?
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!
Creating this is the easy part. Coming up with a nice design like this... now that's tough.
Thanks a ton mate. Clear and to the point presentation. You taught entire FIGMA too, its a crash course honestly. Bless you!
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.
Really glad you liked it, Alex! Thanks for watching.
Hey thanks a lot for this tutorial it really helped a lot
Layout grid settings (Butter Academy)
Mobile:
* Columns
* Count 4
* Margin 24
* Gutter 16
Desktop:
* Columns
* Count 12
* Margin 64
* Gutter 16
Bro Your designing skill is very superb, Thanks for this tutorial ❤
you are currently saving my a$s, dear sir...
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!
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._
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.
Thank you for this, you just saved my college assignment ❤️ lmao
😂Comment of the year. Glad it was helpful!
lol college
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!
Thanks for watching, Mark!
This was great, I really enjoyed it! Please share more Figma tutorial videos. You are a great teacher 👩🏻💻
Thanks for your support Tina. More tutorials are in the works.
Great video, how do u get icon without water mark and how do u put them on your wireframe from the website?
Thanks! This helped me a lot. I have gained some confidence in using figma while praciticing with you.
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
Thanks a lot!!! I have been struggling with my very first UX design PJ. This gonna help with my 2nd PJ.
One of the best tutorials I've ever seen! Clear, covers all that needs to be covered, great pace. 10/10 easily.
@ButterAcademy I recommend you to add YT chapters to this video, this way it's easier for the viewers to come back more often looking for the information they forgot & you'll get more traffic - and everyone's happy !
My figma prototype is uneven but the pdf version is perfect. Any solution?
The course show's coming soon? Is it not out yet? Btw, amazing tutorial, I learnt so much! Thanks a lot!!
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.
This tutorial is very helpful. It gives me a head-start to create my own layout and then develop it programmatically. Thank you!
Thanks for watching, Jose!
Amazing content! Very helpful video on Figma, specially for starters! Gives a good overview on features and also on wireframing! Thanks for this vid 👍🏻👍🏻
Glad you enjoyed it!
Probably the most useful video I've gotten out of this site
This tutorial was great! Well explained. Thanks
Really glad it helped you, Natalie. Thanks for watching!
Can you make a tutorial for grid system please ???? And why 12 column, 64 margin......thanks a lot
Thanks Francisco. I'll add a grids tutorial to the list. 12-column grids on desktop are pretty standard. Especially when developers code with frameworks like Bootstrap. Margins are totally up to you.
Thank you for this Golden Tutorial ! ✨ It really helped me understand what a wireframe is and the process of creating one !
Great tutorial. Thank you. Subscribed. Good luck to your new and ever-growing channel :-)
Thanks, Jèan-Pierre!
thank you for this. your tutorial is so helpful. I want to learn how to translate figma design into React and make it responsive. Do you have a course on that?
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.
Love to hear it, Paul! More tutorials coming soon.
These Figma tips are super useful. However, true wireframes should not include finished or even draft content (graphics or copy). The whole point of a wireframe is to map the most generic content types (image, copy, hero, video, slider, contact forms, product grids, etc.), showing the scale and relationships between those elements on the page. Getting buy-in on these basics will save a TON of heartache once you move on to your high-def creative.
Muy buen video, totalmente organizado el proceso de diseño. Muchísimas gracias.
De nada! Thanks for tuning in.
hi, may i ask why there is no code in my interface like yours? On the right-hand column, it only shows design, and prototype.
At 10.51 the hamburger meny to the left suddenly shows many new options which my Figma does not. I am grateful for the tutorial but feel very frustrated and do not know how to get ahead since I don't seem to find the "Resources" category which I need for later work in the tutorial
why choose Macbook Pro as the layout for the desktop version when the majority are using PC?
2 Years Later: Windows Edition!
1. Show Grid Layers → Shift + G
Thank you so much!!
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?
That's such a huge complint. I rember watcNice tutorialng Nice tutorials videos/channel with hundreds of thousands of subs when I was just starting out
A question what is your background doesn't want to change colour been trying but it isn't working?
Thank you so much for this! I am new to figma and this tutorial made maneuvering around the platform so easy.
e understand tNice tutorialngs in better depth. I didn't even realize i was just scratcNice tutorialng the surface with tNice tutorials DAW. I'm using soft and soft one and I
Damn. Nice job. I realy couldn't find a proper tutorial explaining everytNice tutorialng you needed clearly but then i found tNice tutorials treasure of a video.
Nice tutorial I just got the yamaha PSR E363 and I connected it as a midi controller however I can't figure out how to draw the notes with my
I just like the way this beautiful, I love the explanation 🤩, great job 👍😍
touch with a financial adviser was how I was able to outperform the market during the pandemic and raise a profit of roughly $40
Ummmmmm can you explain how you drew the triangle without the irritating interference from the excessive vectors?
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..
Glad you enjoyed it, Sylvia. More tutorials on the way.
Great Video. definitely worth more views!
All my rectangles get sized differently and i can't move them as one. Bleh. Designing is annoying. Cool video though. :)
wrap your head around....well...not really anymore if you're the type that wants to spend all your ti twisting knobs and routing wires.
Thanks 🙏🏾 so much.
You made is easy!
God Bless you real good.
Thank you so much for tNice tutorials video. I was so confused and overwheld when I first opened soft soft and now I understand how to finally
TNice tutorials is video is amazing! thanks for posting.
Thank you so much sir I co up with one Nice tutorialt wonders in my sleep and can't even make a soft.... No I did not
figma balls
What about link? We haven’t access to your template, cuz link is inactive
All tNice tutorials these " beginner " videos go way to fast and assu you already know stuff.
Thank u so much. I've been so confused, but tNice tutorials video helped a lot.
For the carasol when I do it the components don't disappear outside the frame like it does with yours, how do I fix that ?
big mistake is sir you didnot mention the size between button and text an Containour size ...like if u make the button there is no size mention how much size will put between the text and button size??
Super helpful thank you!
weeks and i've managed to put so pretty basic soft together. They're not great and they still have a ways to go before being
This tutorial is really clear and helpful. Thank you!
Glad you enjoyed it, Ada!
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
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!
nice and simple to follow but only useful for web not native UI's..?
Hey man, It works great and without any problems.
How do you identify which component is the "master component"?
Nice tutorial brother i just want to ask you wNice tutorialch software is easy and best to learn as DAW soft soft or abelton live. Pls reply as soon as you can
this is a very helpful video! thank you so much! i highly appreciate it
Thanks for watching!
Thank you very much for this content! Would love to see one for prototyping as well and maybe getting into more advanced use of Figma features! :) Thanks again!!! Great content! Subscribed!
Thanks for watching. Tutorial on prototyping in Figma coming soon!
As promised, here's a new tutorial on Prototyping in Figma: ruclips.net/video/iBkXf6u8htI/видео.html
Enjoy!
@@butteracademy awesome!!!! Thanks a lot!!! Will check out soon 😊Perfect timing 🙌🏻
This tutorial is absolutely what I've been looking for all this time. A treasure trove of information to one who's new to Figma. Thanks a lot buddy!
thank you for this tutorial.. very clear explanation and presentation
Installed, everything works, thanks!
thank you!!! video liked and u got a well deserved sub from me!!!!
got to layoutgrids and it looks nothing like yours, mine is squares rather than columns aand no obvious way to change it to match yours
thanks for the tutorial it really helps a lot.👌👌👌👍👍👍🙌🙌🙌
showed, how do I fix tNice tutorials? I followed exactly what you did.
Thank you for this video, it was very helpful!
GREAT VIDEO, ITS HOW HE ARTICULATED THE PROGRAM. Some designers like to use tech jargon to sound all advanced. Good video
I can't thank you enough. Bless you bro!!!
i've been trying to stack the products, it isn't working
awesome tutorial
how do you delete or erase something you dont need anymore? i always have to hide it but i know thats not right
Thank you! This is amazing Figma tutorial!
Hi there. How to create the resources section? It is just a simple page? Thanks
Keep going sir that's great tutorial
Do people not know the difference between a wireframs and a mock-up??
Did someone catch the name of the website for downloading icons?