Ahh maaan! Thank you so much! I've been a developer for a little longer than a year now and I'm struggling to create nice looking sites and I prefer to work based on pre-created designs as much as possible. I've started making a few landing pages without a design but they got messy pretty quickly. This crash course just came out at the right time! Thank You!
i followed this step by step and love it. i dabbled a little in web design when i was younger, but now im going to uni for interactive design. i havent started my major classes yet but i wanted to get ahead and your videos have been so helpful. thank you!
This is beautiful, so so beautiful!... I don't know what else to do or say, I know comments alone aren't enough, but man, Thank you, Thanks a whole lot. we'll forever appreciate this.
I actually think is better design from mobile first and then desktop. You have more awareness about space and what's essential with a limited area like a mobile view and progressively expand the positioning of elements to a larger space like desktop.
Hi Gary, I love this crash course. I had been using Adobe XD for some time now and willing to come back to Figma. A lot has changed and thanks to this course, I can get back in no time. I want to ask you why didn't you use the grid column layout to design the pages? like the vertical columns. Any specific reason? and also, can you make a design crash course that has the basic vertical column layout of a website. The basic layout that most of the internet hosts. I want to clearly learn that kind of website design from you. Thanks for your time!
Thank you so much for the video I’m communications designer and I’m new to figma and im so surprised how good it works for me Indesign is dead and much more trouble to work with it. Very good video it helped me a lot to build my portfolio. Greetings from Germany
Hey, great course! thanks for that, there was just a couple of questions I had in some parts which I hope you can answer: 1- When you create a component do you do that within your design page and keep the original component as part of your design? OR can you actually creat a new page for your designs and put all your main components there and reuse across your design pages? If it is possible then how do toy prototype your component to link to different direction? 2- I've tried making an image gallery by hand but is there a good plugin you recommend to creat gallery layout? In sketch there was a Make Grid command which really helped copying rows and columns of one shape, anything similar in Figma? 3- Do I need to create a hove and Click page for each of those images? Or is it something that UI designers only create one sample of and then developers replicate that behaviour to other images when coding? 4- It would be great to get some more advice on creating responsive layouts and breaking points, using the Auto Layout is really tricky! I was trying to creat a hero banner with text in it and a button and the image to cover 3/4 of the banner and it was just so confusing... any videos you can suggest to watch to learn more about responsivness? Many thanks, look forward to your upcoming tutorials. Arianaz
thanks!!!! this is so useful!!! i've learned a lot plus i took your ui design bootcamp on scrimba (already finished it) and man I learned so many things thank you very much
Is there anyone who saw a weird behavior when press shift+a for auto layout? elements that are supposed to be inside of rectangle jumps out of the box? The reason for this weird jump is that your text box frame is larger than your rectangle. shrink the frame size of the text box down then all are fine.
Hello, I have a problem at 36:53, when I select all and do Shift+A, the text go under the rectangle.. Impossible for me to make them one. How can I do?
Ok I went through the tutorial and I have a question. Let's say the prototype I am working on is complex and I have 20 pages like that you have shown. I got a reply from my principal that he wants me to add one more menu option and different background. Do I have to do it 20 times or I can change it in one single place?
How would you do that final transition in js/CSS? Would you have to use high quality thumbnails and 'navigate' to a new div rather than a new page? Looks real nice though! Would love a follow up implementing the design!
I've been using Sketch for so long. I think it's a comfort thing that I've avoided Figma. But after watching this video I'm emotionally ready to make the change. X Thanks Gary.
A simpler way to get the hovering effect he did is by creating an overlay instead of duplicating the frame. You can achieve the same thing, plus it's simpler. Great tutorial, though.
Hi there Mr. Simon, just out of curiosity, what kind of wine do you prefer? Red or white? Also, greetings from South Africa, and thank you so much for your wonderful work. Your tutorials are priceless for me.
i was about to signup and ready to pay later but then i heard monthly subscriptions, damn i hate so much this way of selling things. Do we have to a monthly subscription for everything ?
Thank you for your video! I'm new to ui design and it's been very helpful! But some things just won't work. Like when I change the colour of the button, the other component won't respond. Could it be because I'm using a free version of Figma? thanks
Hi I have a question about the way you connected the prototype lines between the pages. Do you have to drag a line between the third page and the fourth page (clicking on the photo) - is it not enough to connect the second and the fourth? I just did not understand why the third and the fourth should connect.
Do you use figma?
YES!!
#Figma4lyf
Hell yeah
All the time
YES 😍, As a linux user figma is more helpful for me to design.
best thing about your tutorials is that you don't waste time on unnecessary thing and everything is fully practical and project based.
Hands down, one of the best figma tutorials on youtube. This video touches on nearly every aspect of figma. Highly recommended!
About 18 minutes in and the frame within a frame using space-between just blew my mind
Me and my team at the company all thank you for the great effort in putting up these videos for the whole designing community 😌😌😌
Hi i am looking for team to join as Web Developer and Designer
Yeeyy! It's my first experience on working with Figma and I managed to do everything because of your step-by-step explanation :)thank you so much!
literally the best person to learn designing from. thanks man i dont know about others but you're really helping me
Thanks Bro, I am working as UX now and basically this video is my foundation in figma
I can't watch without commenting. Thanks man for this video. It's awesomw
My key learning are:
> Auto layout
< Prototyping
> Components
< Smart animation
> Plugins
Ahh maaan! Thank you so much! I've been a developer for a little longer than a year now and I'm struggling to create nice looking sites and I prefer to work based on pre-created designs as much as possible. I've started making a few landing pages without a design but they got messy pretty quickly. This crash course just came out at the right time! Thank You!
i followed this step by step and love it. i dabbled a little in web design when i was younger, but now im going to uni for interactive design. i havent started my major classes yet but i wanted to get ahead and your videos have been so helpful. thank you!
Gary started the year with a bang
You couldn't stop yourself from giving some UI/UX design tips here and there. Love your work!!!!
This is beautiful, so so beautiful!... I don't know what else to do or say, I know comments alone aren't enough, but man, Thank you, Thanks a whole lot. we'll forever appreciate this.
Man, This was super helpful. As a web-developer the only thing I did was save to drafts and export assets. I had no idea how to use this tool.
Awesome crash course. It took a lot of intimidation out of Figma. Finding the right plugins also helped me out a ton and taking the guess work out.
Gary! Thank you, this was so much fun! I have been scared to dabble in the UI/UX world but this video has help me gain so much confidence. Thank you!
Thank you so much for this video, hands down the best tutorial for beginners in figma!!!
My introduction tutorial to Figma and I have already learned A LOT. Thanks so much!!!
Man, this was a no-BS guide to Figma and UI design, thanks a lot, you really helped me.
Thanks so much for this course I picked up right away. Amazing instructor looking forward to learn more about the design with you. Have a blessed one.
Are you new in designing??
I am too
Reply let's get along and help each other
Dont ever stop creating great content. Hats off!!😃😃
You cannot imagine how this helped me today, thank you!!!!
I actually think is better design from mobile first and then desktop. You have more awareness about space and what's essential with a limited area like a mobile view and progressively expand the positioning of elements to a larger space like desktop.
At 36:55 when I auto layout my 3 objects get disoriented, why?
that's cool. Now made it with HTML and CSS :D
Thank you! Im an intern right now and my company uses Figma very useful tutorial!
Thank you so much Simon. I'm a beginner and your video helped me a lot 👌👍😁 !!
Great video, thank you. I just got a Figma project, so I'm here to learn EVERYTHING.
This was SO helpful! Thank you. You have no idea how happy this made me!
Hi Gary, I love this crash course. I had been using Adobe XD for some time now and willing to come back to Figma. A lot has changed and thanks to this course, I can get back in no time.
I want to ask you why didn't you use the grid column layout to design the pages? like the vertical columns. Any specific reason?
and also, can you make a design crash course that has the basic vertical column layout of a website. The basic layout that most of the internet hosts. I want to clearly learn that kind of website design from you.
Thanks for your time!
Incredibly Useful and brilliant presentation.
This is really excellent! Thank you for giving a easy and clear guidance on Figma.
Great effort by you man. Really its grateful to watch your tutorial.
Wow. Just wow! Very good work. I'll be on your course soon.
Thank you, Gary, I really enjoyed this and was able to follow along in Figma and learn some new stuff. I appreciate that you made this video!
thank you so much for this video! i was waiting for Figma for a while
love your work Gary and appreciate your time teaching-im new to ux/ui so side stepping into a new career and your video's are so helpful
Thank you so much for the video I’m communications designer and I’m new to figma and im so surprised how good it works for me Indesign is dead and much more trouble to work with it. Very good video it helped me a lot to build my portfolio. Greetings from Germany
Ohhhh I just read your name is Gary I have a snail 🐌 his name is Gary 😆
Hey, great course! thanks for that, there was just a couple of questions I had in some parts which I hope you can answer:
1- When you create a component do you do that within your design page and keep the original component as part of your design? OR can you actually creat a new page for your designs and put all your main components there and reuse across your design pages? If it is possible then how do toy prototype your component to link to different direction?
2- I've tried making an image gallery by hand but is there a good plugin you recommend to creat gallery layout? In sketch there was a Make Grid command which really helped copying rows and columns of one shape, anything similar in Figma?
3- Do I need to create a hove and Click page for each of those images? Or is it something that UI designers only create one sample of and then developers replicate that behaviour to other images when coding?
4- It would be great to get some more advice on creating responsive layouts and breaking points, using the Auto Layout is really tricky! I was trying to creat a hero banner with text in it and a button and the image to cover 3/4 of the banner and it was just so confusing... any videos you can suggest to watch to learn more about responsivness?
Many thanks, look forward to your upcoming tutorials.
Arianaz
Great lesson! Thank you so much.. I haven't used the program in a long time, and needed to learn the basics in 10 seconds. You saved me!
oh no... i started watching this in x1.25. can't go back to x0 now... great course btw!! thank you so much!
me too
My best designer stuff channel....
Can someone help me? Whenever I try to auto layout like in 46:53, the whole text justs moves to the bottom. I cant find the fix for this. TIA
Thanks for this tutorial! Helped me complete my first design. :D
this is a fantastic tutorial for improving Figma skills. Thanks very much!
Thank you Simon. Excellent Work. I Really Appreciate It.
Thinking of adding more pages and different dynamics. Thanks for opening the door
That looks great! But should you wire frame it our first and add grids over the design?
Thank you so much. Your explanation is amazing. I could do everything successfully because of ur amazing explanation.
It could be fun to bulid this with html/css/js in 2021 frontend development crash course... I'm just saying :D
Good Idea!! 💡
Good Idea my friend
agree
It is totally possible
Am with ya on this
Simply Superb and Clear Explanation
thanks!!!! this is so useful!!! i've learned a lot
plus i took your ui design bootcamp on scrimba (already finished it) and man I learned so many things thank you very much
Very helpful video. Thank you!
Agree!
Very very detailed and useful video, thank you so much for all the free information!
Thank you Gary for this amazing video. It's made in Jan. and I watched it in Dec. 😀
Thanks. Learned more than the Linkedin learning course.
I hope to see more figma's courses in 2021 here.
LEGEND LEGEND GOD BLESS THE MOTHER WHO GAVE BIRTH TO YOU BRO
Thanks Gary. This tutorial is well done.
Thank you so much for this tut! Concise and useful. I got up to speed in no time!
Thank you soo much for this course , it helped me alot to learn Figma and enhance my Skills!!
Nice result :) watched all. Now need to find part 2 how to 'extract' design
i love you design course thank you this video is old but helped me alot thank you so so much
Yes, I need to learn Figma. Thank you brother
Thank you . Thank you, this was so much fun! And easy to follow
I really love this crash course. So helpful.
The best tutorial and well explained, very nicely done.. big thumps up..
Is there anyone who saw a weird behavior when press shift+a for auto layout? elements that are supposed to be inside of rectangle jumps out of the box? The reason for this weird jump is that your text box frame is larger than your rectangle. shrink the frame size of the text box down then all are fine.
i tried this, it still doesnt work. Any other suggestions? Thanks
Not fixed
How is your background removal for your video is so good? Using green screen? Some special app? Thanks!
Hello, I have a problem at 36:53, when I select all and do Shift+A, the text go under the rectangle.. Impossible for me to make them one. How can I do?
Same here, did you find the fix?
Such a good video
You messed up around the portfolio thumbnail part they were behaving incorrectly
thanks for teaching me some ui/ux principles and figma tips sir :)
Ok I went through the tutorial and I have a question. Let's say the prototype I am working on is complex and I have 20 pages like that you have shown. I got a reply from my principal that he wants me to add one more menu option and different background. Do I have to do it 20 times or I can change it in one single place?
Awesome! Thanks for sharing! And what about next challenge from figma to html? It will be great to learn all workflow.
How would you do that final transition in js/CSS? Would you have to use high quality thumbnails and 'navigate' to a new div rather than a new page?
Looks real nice though! Would love a follow up implementing the design!
You can easily do it in a single page application, eg, react, vue
Nice tutorial. This is very helpful your thoughts are awesome.
I've been using Sketch for so long. I think it's a comfort thing that I've avoided Figma. But after watching this video I'm emotionally ready to make the change. X Thanks Gary.
Do you need to code to post a figma canvas to website?
This tutorial was excellent. Thank you. 🧡
Excellent tutorial I really loved it many thank's 👍👍👍
I felt like a real designer doing this :) 😃
Great tutorial. Would love to see some stuff on working with Team Libraries and such.
Really great overview - thanks
Best tutorial for figma and ui design fundamentals👍
A simpler way to get the hovering effect he did is by creating an overlay instead of duplicating the frame. You can achieve the same thing, plus it's simpler. Great tutorial, though.
This! :)
Can't wait for your course :)
Thanks for explaining how to use Figma!
Hi there Mr. Simon, just out of curiosity, what kind of wine do you prefer? Red or white?
Also, greetings from South Africa, and thank you so much for your wonderful work. Your tutorials are priceless for me.
Very Helpful Tutorial, Thanks.
i was about to signup and ready to pay later but then i heard monthly subscriptions, damn i hate so much this way of selling things. Do we have to a monthly subscription for everything ?
Dayum, from now on I7m using the term LOW CHEAPING!
This is the best lesson on UA-cam, please make the same for mobile app :-)
Thank you for your video! I'm new to ui design and it's been very helpful! But some things just won't work. Like when I change the colour of the button, the other component won't respond. Could it be because I'm using a free version of Figma?
thanks
Great Tutorial and everything went well except for 46:53 where it appears Auto-layout breaks the card . Anyone with a solution?
yeah for me the same, cant get it right
Had the same problem. Figma has a tutorial on UA-cam titled "Figma Tutorial: Card component with auto layout".
Hi
I have a question about the way you connected the prototype lines between the pages. Do you have to drag a line between the third page and the fourth page (clicking on the photo) - is it not enough to connect the second and the fourth? I just did not understand why the third and the fourth should connect.
Great content as always. Keep up the good work!
What a great teacher you are! Thank you!
THANK YOU VERY MUCH .