I have been using figma for a while now since I graduated from a full stack web dev bootcamp. And I am so happy I found this video cause now I realize how many things I was doing the wrong and hard way. Beautiful tutorial and walkthrough!
I'm not a begginer but I can totally say that this tutorial has lots of very valued and essential tips and tricks to use figma in the easiest way possible! Thanks for sharing such knowledge.
Been watching so many Figma Tutorial videos in the past but yours (Ran) stands out. Clear and no exaggeration. On top of everything-- the workflow is just so easy to follow. Thank you!
In all the years I've been watching videos on youtube, I think I've never taken the time to post a comment.. But man, you're an absolute legend! Thanks for making this so easy for me.
I start bootcamp in April and have never used Figma before. So, I decided to see if I could find a beginner tutorial that is more hands on to familiarize myself. This was perfect!!! Instructions were clear. Speed was great! It wasn't too fast or too slow. I learned so much. I will definitely be watching more videos from this channel. 😁
@@JK-ws6qr I've had a total of 3 clients, in the past 11 months, I charged about $800.00 for each website and managed to retain one by up charging the hosting by $20. As you can see I'm still not rich, however I'm sure everyone will have different varying results.
@@horikatanifuji5038 I see. Im just starting out learning the basics of both figma and webflow. Are you self taught? Or which courses helped you the most if you dont mind. And id love to see your portfolio / work if thats okay?
Recommended even if you know Figma's basics but not quite yet confident in your own skills. Excellent video and it is great practice! Thanks Ran and team *thumbs up* indeed
For Ran and the team;; I have three thought to share: -Thank you for making this video, and part 2 as well. This great background for moving on from the design class. After I finished the class this last spring, but before I was to start on the final project, i felt, for lack of a better word, abandoned. I was taught all these great design skill to start working on a website, and then not offering any tools or recommendations for how to go forward. For those with no experience in "web" work such as html/css, Dreamweaver, etc, the question might arise as to where to go next. When I brought this up to the team after I finished the skills section, I was pretty much told that i was on my own. I appreciate that you all see the need to fill the gap. -As some of you may remember, I was in the Webflow class. I dropped it because I couldn't keep track of the mouse as it moved across the screen. I am almost blind and spent more time actually looking for the mouse than learning the lesson. What I would suggest in the future is that you consider using a bigger mouse. -Since I have your attention, I might as well go for number three. I've been watching Ran's videos since last fall and I've noticed that there's a light coming down onto the right side of his face. In viewing the videos, there is a light the hits the right rim of his noes, which can sometimes is distracting until one gets use to it. You may want to defuse the light so it does not hit so sharply. It's the blind photographer in me that notices such oddities.
I decided to learn UI/ UX today while i will be writing my code, I decided to start with figma, and guess what? Today is my day one and this video has helped me do a couple of websites design. Thanks Flux Academy.
Thanks for this awesome tutorial Ran! I'm a graphic designer in Brazil, and even though my English is basic, your explanation and process are very smooth and easy to understand. Keep doing a good job!
You have a clear English voice that is easily understandable even for non-native speakers like me. I'm using this video to help with our product design. Thank you for sharing it!
My first time really using Figma and it took me hours to get it right but I got every thing from this tutorial done and I am so happy how detailed you made it. It's the only one that I've really understood so far. Definitely going to the next video! Thank you!!
How should you decide your grid style? The 12 column grid seems standard, but how do you determine whether you should use center or stretch, or what the offset and gutter should be?
Delightful to be able to peek over the shoulder of someone who obviously has a lot of experience. The workflow advice is incredibly helpful, and like others have said, this is one of the most beginner-friendly tutorials I have ever seen. Well done! Got a new subscriber here :)
It may be overwhelming to be exposed to so many features and buttons Figmas offer but this video is such great tutorial to learn the basics. I was able to follow along and replicate the example page design. Thanks so much!
I followed through the whole tutorial and managed to recreate your work exactly. Thank you so much for this awesome crash course! I had never used figma or done web design before. Great start
HI! Why you arent using auto layout for every section? I started working as UI for a little project for a big agency and the work with a lot of auto layout with massive use of Figma token plugin. What do you think? Nice video : )
Much easier and better way to navigate and zoom is to use scroll wheel click for hand instead Space and ctrl + scroll up/down to zoom in/out instead ctrl+ and ctrl-. Those shortcuts you mention on your video are directly copied from Adobe products and really not that useful, convenient and fast as the ones built in Figma.
This is extremely helpful for Figma beginner. Appreciate your effort in telling many different key points. I've tried navigating around in Figma, and extending the frame is one of the pain point when things will move along. Thank you for producing this lovely video (and you have a beautiful voice!)
Amazing tutorial! I've just watched it, and I'm going to practice. Thanks a lot! I took a 2-week break from my studies because I could not find a good one, and here it is!
Thanks Ran. I have been following you on IG and I must say here is the best channel for Web Designers. These resources are great. Although, I couldn’t get to download the resource file. I did not see it via the link you shared. Anyways, thank you. I dab.
You are the BEST Teacher. You are just fast enough to keep my attention and just assume I have never touched figma before, which helps alot. Most people do this forgetting some people who are follwoing along are new and they talk to them as they hsould just KNOW this shit. So thank you for being a BOSS!!! :)
Wow, I really loved your explanation by sharing screen, Your clarity and depth of insight made it easy for me to grasp the concept. Thank you for breaking it down so effectively!
What a great tutorial! I just jumped into Figma/UI Design I had to compliment you, nice work! Gonna watch the part 2 once I learn more about AL and Constraints. Thanks!
This tutorial video made me love figma such that i feel like practicing right now....i really need more of this tutorial Actually am a web designer with elementoe page builder but i just wanted to improve my skill more and put myself ahead. i really need more of this tutorial. Thank you so much for this
This was really helpful to get started with Figma. I would request to make more videos on using figma to design various types of websites like blogs, news site, social media, etc.
"Wow, this is hands down the best Figma tutorial I’ve come across! 🎨✨ Your explanations are so clear, and the step-by-step guidance makes even complex designs feel achievable. Thank you for sharing your expertise and making learning such a joy!"
its a superb beginner friendly tutorial, the way of explaining things are really easy to digest. The usage of grid system is a awesome idea to align things easily. and a lot of new things can learned from this tutorial
Great content here. I came to learn a bit more and get used to Figma, but now I also have some more ui design tricks and insights on my bag. Thank you.
Thank you so much for creating this video. I am transitioning into the UX/UI field and this video was so informative, yet easy to follow along. Highly recommend for anyone who is interested in learning Figma. Thanks again!
I have been using figma for a while now since I graduated from a full stack web dev bootcamp. And I am so happy I found this video cause now I realize how many things I was doing the wrong and hard way. Beautiful tutorial and walkthrough!
Probably the most beginner-friendly breakdown of Figma out there. Incredible work, Ran. Please keep the Figma uploads coming!
indeed
OMG Yes! And very engaging.
I coudn't agree more.
Please do you have the link? I can't seem to access it.
same here
@@nnachijoy2441
I'm not a begginer but I can totally say that this tutorial has lots of very valued and essential tips and tricks to use figma in the easiest way possible! Thanks for sharing such knowledge.
This was one of the best beginner tutorials I have ever seen. The design and the aesthetics of it were brilliant. Thank you for doing this.
I appreciate the comment KJ, means a lot!
@@FluxAcademy please teach us about resposive , layouts constraints etc please in detail
Please do you have the link? I can't seem to access it.
@@FluxAcademy please can you put a direct link to the cloneable project below, i am unable to download it through the website
ruclips.net/video/JnwATqjYohI/видео.html@@nnachijoy2441
Extremely beginner friendly, i can not express it how helpful and enjoyable this was for me. Thank you!
its funny how in under 50 minutes i learnt more than my friend learnt in 4 hours of Udemy course. Hahhahaah.
Thank you a lot.
This game is not about competition buddy....your friend might have learnt something that you didn't as well.... it will never be the same for everyone
@@kevinmurithi8418 thanks for saying that. I hate this mindset
How did you measure it?
Been watching so many Figma Tutorial videos in the past but yours (Ran) stands out. Clear and no exaggeration. On top of everything-- the workflow is just so easy to follow. Thank you!
Great to hear!
same here bro
In all the years I've been watching videos on youtube, I think I've never taken the time to post a comment.. But man, you're an absolute legend! Thanks for making this so easy for me.
Currently the best channel in youtube for UI design!
Thank you Ran!
really appreciate the kind words asaf!
Hello, pls what's the link for the part 2 of this tutorial? Thanks@@FluxAcademy
I start bootcamp in April and have never used Figma before. So, I decided to see if I could find a beginner tutorial that is more hands on to familiarize myself. This was perfect!!! Instructions were clear. Speed was great! It wasn't too fast or too slow. I learned so much. I will definitely be watching more videos from this channel. 😁
Great to hear!
Incredibly clear.
Thanks Kayla!!
Figma is 🔥! It is such a huge part of my teams process. Loved this video, thanks Ran!
I use figma & webflow, still I have no clients, any advice you could give me?
@@horikatanifuji5038 did you have any luck with clients ?
@@JK-ws6qr I've had a total of 3 clients, in the past 11 months, I charged about $800.00 for each website and managed to retain one by up charging the hosting by $20. As you can see I'm still not rich, however I'm sure everyone will have different varying results.
@@horikatanifuji5038 I see. Im just starting out learning the basics of both figma and webflow. Are you self taught? Or which courses helped you the most if you dont mind. And id love to see your portfolio / work if thats okay?
@JK-ws6qr how you're doing so far man? I'm also looking to start but have prior knowledge
Thanks man! Crystal clear!
Recommended even if you know Figma's basics but not quite yet confident in your own skills. Excellent video and it is great practice! Thanks Ran and team *thumbs up* indeed
Please do you have the link? I can't seem to access it.
The best figma tutorial for a complete rookie I've seen. I managed to create my first design after watching the video. thank you!
For Ran and the team;; I have three thought to share:
-Thank you for making this video, and part 2 as well. This great background for moving on from the design class. After I finished the class this last spring, but before I was to start on the final project, i felt, for lack of a better word, abandoned. I was taught all these great design skill to start working on a website, and then not offering any tools or recommendations for how to go forward. For those with no experience in "web" work such as html/css, Dreamweaver, etc, the question might arise as to where to go next. When I brought this up to the team after I finished the skills section, I was pretty much told that i was on my own. I appreciate that you all see the need to fill the gap.
-As some of you may remember, I was in the Webflow class. I dropped it because I couldn't keep track of the mouse as it moved across the screen. I am almost blind and spent more time actually looking for the mouse than learning the lesson. What I would suggest in the future is that you consider using a bigger mouse.
-Since I have your attention, I might as well go for number three. I've been watching Ran's videos since last fall and I've noticed that there's a light coming down onto the right side of his face. In viewing the videos, there is a light the hits the right rim of his noes, which can sometimes is distracting until one gets use to it. You may want to defuse the light so it does not hit so sharply. It's the blind photographer in me that notices such oddities.
where is the part 2?
@@HafizMuhammadUsmanNasimlmao🤣🤣🤣 Karen
Please do you have the link? I can't seem to access it.
I decided to learn UI/ UX today while i will be writing my code, I decided to start with figma, and guess what? Today is my day one and this video has helped me do a couple of websites design. Thanks Flux Academy.
Thanks for this awesome tutorial Ran! I'm a graphic designer in Brazil, and even though my English is basic, your explanation and process are very smooth and easy to understand. Keep doing a good job!
Please do you have the link? I can't seem to access it.
Hi this is sabarish
Me to a graphic designer
I'm started a startup company
In india
Did you provide any projects for our company
You have a clear English voice that is easily understandable even for non-native speakers like me. I'm using this video to help with our product design. Thank you for sharing it!
straight to the point lesson, for free! your amazing Ran.
My first time really using Figma and it took me hours to get it right but I got every thing from this tutorial done and I am so happy how detailed you made it. It's the only one that I've really understood so far. Definitely going to the next video! Thank you!!
Thank you, Glad it helped!
Awesome tutorial. I needed a re-fresher on Figma after not using it for a while. Great lesson!
This really sets me to want to start doing web design for real, perhaps one of the best begginer friendly tutorial out there. Great work
This is so great and exactly what I am looking for. As a freshman of figma, this is a must-watch video for someone want to get a quick started.
Hi please how were you able to access the starter resources used in this tutorial?
If I had a blue billion dollars, Id give at least 3/4 of it to RUclips creators! You rock! I really appreciate the content!
Please do a full responsive website design with auto layout and constraints and break points.
That’s a bit easy to learn personally, but yh he should do that and also make a sticky navigation
Sticky navigation and a fixed background
Please I've been able to the starter file
Can we create responsive website with figma?
Thanks!
This is exactly what I was waiting for!!! So pumped to watch this and take notes 💪
yes! thanks for letting me know
@@FluxAcademy pls i could not download the figma file.
How should you decide your grid style? The 12 column grid seems standard, but how do you determine whether you should use center or stretch, or what the offset and gutter should be?
Thank you for your explanations!! Following you was so easy and I just finished my first design succesfully. Keep up the great work
Delightful to be able to peek over the shoulder of someone who obviously has a lot of experience. The workflow advice is incredibly helpful, and like others have said, this is one of the most beginner-friendly tutorials I have ever seen. Well done! Got a new subscriber here :)
Super helpful tutorial. You feel on top of the world when you've followed everything and you see the awesome result!!
Love that!
This is amazing tutorial. Keep doing beginner-friendly videos. Greatly appreciate this, man. :)
Will do Christine
i'm a beginner and whoa this channel is definitely the best finding in recent times gonna explore all videos
Exactly what I've been looking for. Thank you Ran 👍
It may be overwhelming to be exposed to so many features and buttons Figmas offer but this video is such great tutorial to learn the basics. I was able to follow along and replicate the example page design. Thanks so much!
Great to hear, thanks!
Simply spectacular! Clear and detailed! Love it! ❤
Wow, that's really cool! Thanks! I'm a software engineer and trying to learn design, and this is really helpful.
Thank you!! I learned in 45 minutes how to design a webpage!!
Amazing tutorial even for a Figma user. Looking forward to many more tutorials. Keep up the great work! Cheers!
Finally I've learned how to use Figma properly. Thank you very much for your work!
Great tutorial. Super clear, really nice breakdown of all the design elements & techniques.
This presentation is good for beginners like me who don't have any knowledge in Figma. This is a great way to start.
Please can't download the figma resources, no where to button to click on the external link..help bro
Same here
Thanks for making such an amazing video. I did the things along you and it turned out pretty good.
Hello, thanks for this tutorial, How do I download the resource file, I'm Kinda having a hard time doing that. thanks
honestly, this is the one of the best tutorial video I've ever seen.
There is no file to download now when I click the link? How can I follow along? Do I need to sign up on your website?
I open Figma for the first time, and this video was super helpful! Thank you!
The figma resource isn't available. Help!!!!
did you unzip it
Can you pls paste the link here?@@__Green_
Could not find it at all.
Thanks R, I'm a beginner with Figma, I've watched a few other vids but your tutorial is the easiest to understand, thanks for sharing.
Great to hear!
Why did You make a manual button while it could be made with auto layout?
just wanted to make this simple for beginners
I followed through the whole tutorial and managed to recreate your work exactly. Thank you so much for this awesome crash course! I had never used figma or done web design before. Great start
Great to hear!
HI!
Why you arent using auto layout for every section? I started working as UI for a little project for a big agency and the work with a lot of auto layout with massive use of Figma token plugin.
What do you think?
Nice video : )
Hey Matteo, I tried to kind this nice and simple for begginers, but doing a video on auto-layout / responsive design is a good idea!
i gotta say, learning this really helps to visualize alot of the stuff im learning about CSS
I couldn't get the file...
Any help please?...
Great to hear!
@@weishyan9699bro what 💀
Command + Alt + "Up/Down Arrow"
You just saved me hundreds of hours. Thanks!
Much easier and better way to navigate and zoom is to use scroll wheel click for hand instead Space and ctrl + scroll up/down to zoom in/out instead ctrl+ and ctrl-. Those shortcuts you mention on your video are directly copied from Adobe products and really not that useful, convenient and fast as the ones built in Figma.
The scroll wheel click is must! I didn't know about it. Thanks
This is extremely helpful for Figma beginner. Appreciate your effort in telling many different key points. I've tried navigating around in Figma, and extending the frame is one of the pain point when things will move along. Thank you for producing this lovely video (and you have a beautiful voice!)
Incredible breakdown. Hands-down the best Figma tutorial I've seen. An absolute God-send.
Amazing tutorial! I've just watched it, and I'm going to practice. Thanks a lot! I took a 2-week break from my studies because I could not find a good one, and here it is!
Thanks Ran. I have been following you on IG and I must say here is the best channel for Web Designers. These resources are great.
Although, I couldn’t get to download the resource file. I did not see it via the link you shared.
Anyways, thank you.
I dab.
You are the BEST Teacher. You are just fast enough to keep my attention and just assume I have never touched figma before, which helps alot. Most people do this forgetting some people who are follwoing along are new and they talk to them as they hsould just KNOW this shit. So thank you for being a BOSS!!! :)
I love how you explain each step you made in this video, even a beginner like me can easily understand them. Great tutorial video
This tutorial is more informative and my levels of confident is increased. Thanks for sharing knowledge
it's very very helpful, for me who just started learning figma, thksverymuch.. 👍👍👍
Thank God for RUclips bc I started to get discouraged!! Figma is no joke! Adobe had me so confident lol
The point to make every section to the center constraint is the pivotal point. Thanks a lot flux.
Thank you so much for this 👏😁
I understand this completely
You’re welcome 😊
Wow, I really loved your explanation by sharing screen, Your clarity and depth of insight made it easy for me to grasp the concept. Thank you for breaking it down so effectively!
Glad it was helpful!
What a great tutorial! I just jumped into Figma/UI Design I had to compliment you, nice work! Gonna watch the part 2 once I learn more about AL and Constraints. Thanks!
This tutorial video made me love figma such that i feel like practicing right now....i really need more of this tutorial
Actually am a web designer with elementoe page builder but i just wanted to improve my skill more and put myself ahead. i really need more of this tutorial. Thank you so much for this
it's my second tutorial and this one has given me complete understanding of the basics. Amazing!
This is one of the best beginner-friendly Figma tutorial I've seen. Thankyou so much! Please continue to upload this kind of tutorial more. Godbless
This was really helpful to get started with Figma. I would request to make more videos on using figma to design various types of websites like blogs, news site, social media, etc.
Glad this was helpful for you! Check out our Figma playlist for more tutorials ☺️
love the tutorial literally beginners friendly . learn some shortcuts on the go and some tricks overall really helpful if you just started figma
Thanks Evan!
I followed in detail with the downloaded assets. Thanks, it was great!
Great to hear!
That's exactly what I was looking for! Thanks Ran 🖖
First time into Figma. This video gave me a better understanding of the tool. Thank you :)
"Wow, this is hands down the best Figma tutorial I’ve come across! 🎨✨ Your explanations are so clear, and the step-by-step guidance makes even complex designs feel achievable. Thank you for sharing your expertise and making learning such a joy!"
I find myself heading straight to Flux Academy for web design tutorials, super beginner friendly and helpful!
bro is insane! best video I watched this year. I will only use sigma in future
Thanks!
Oh great! As a beginner, I've learn a lot in just a short time. Thank you so much.
You're very welcome!
Thanks for the video! Excited to use this tool more and get better with it!
This is the best video for beginners. Got to learn so many things with much details. Thank you so much.
the resources you provided are indeed useful for those who don't know where to start from not like others, it really helped me alot, covered in depth
Please how can I get it
its a superb beginner friendly tutorial, the way of explaining things are really easy to digest. The usage of grid system is a awesome idea to align things easily. and a lot of new things can learned from this tutorial
where to get these 3d pics
Shoutout to the video editor! I appreciate your work.
the only figma course i have. Keep up the good work!! I am definitely learning more.
Great to hear!
Thank you for this excellent tutorial! I've added this video to my toolbox as a noob web developer! 💯
Great content here. I came to learn a bit more and get used to Figma, but now I also have some more ui design tricks and insights on my bag. Thank you.
Cool, thanks!
I really enjoyed the entire video so far. You are teaching us by having us build something. You're a really great teacher.
I forgot how great of a teacher you are.
Thank you so much for creating this video. I am transitioning into the UX/UI field and this video was so informative, yet easy to follow along. Highly recommend for anyone who is interested in learning Figma. Thanks again!
That was really a helpful starting man!!. Now i can deep dive into more of it. Thanks buddy
Glad it helped!
Learned alot!! Thank you so much for the detailed video ❤️
Glad it was helpful for you!
You did an amazing job, bro keep it up☺
Thank you for this. it's the most easy to understand and most importantly the most applicable way to share this to us beginners.
Thanks! finally i understood how does it work your explanation is simple and brilliant 💜
Glad it helped!
You just cranked up my begineers skils in figma!!