Hey all, 2 big deals here for Black Friday and beyond.. hostinger.com/design (Use code: DESIGNCOURSE for 10% off!) bit.ly/3ECKzr1 👈 Learn UI/UX Today. Use "BF40" for 40% off during black friday!
I am not that new to Figma but I still find your stepwise explanation very useful. I particularly like how you introduce complex techniques without complicating them.
When creating component variants, as in 13:30, you can use "true" and "false" as a property value. This way Figma creates an easy to use toggle in your component properties (instead of a dropdown select). :)
I'm already 20 minutes in, but need to make breakfast. Pancakes 🥞, but then I'll have pancakes, Figma, and this new video. 😆 Thank you 🙏 your content is very much appreciated!
Extrêmenent intéressant et instructif. J'ai Appris en 1h et quart ce que j'ai pas pu apprendre depuis des mois. L'approche pédagogique est assez déterminante dans la stratégie d'apprentissage conçue au départ. Thank you . 🙏
im a CS student really trying to get into UX/UI design to make me more qualified to apply to IT positions in clubs and organizations and whatnot. website design is a big factor. they dont typically hire designers. i lucked out with getting an IT role for something big at my school, but really want to extend and work with some more provincial-level student entities. i also am developing products from the ground up and see a real need for UX. thinking of taking the google coursera course
Yeah, I had to search for that, it's actually easier for me. I didn't managed to center the text with the Auto Layout when I was moving the whole thing. Thank you for the confirmation :))
I'm a developer that works at a non-profit and takes on side gigs. The work demands that I have some decent design skills so I pull away from the hardcore nerdy coding side to do some ux/ui in figma and surprisingly I'm enjoying it. Vids like this make me enjoy it because now I understand how to make things look the way I see other designers do when it comes to layout of nav and also how they think about their design helps me to translate it into code while translating components to things like react or webflow.
So, I copied the design totally identical but except one thing ; I placed Weed in place of alcohol. Bcz '''something that I like a lot of''. Great video! Thank you, sir.
thank you for making this tutorial by following long step by step it is a lot of work and it's a great journey for beginners who want to get their hands dirty to start with fingma UI design. This tutorial deserves more love!
You've got to be kidding me. I just busted my 🍑 playing and pausing 100 times over to get through your last crash course, and now you update it 😆 But yeah I'll definitely end up watching this one too if we're being honest
Hi i have purchased your UI UX course and wanted to know if it will be also updated with new figma features because I see old figma version only in the course videos
Check the updated chapter at the end of the course. In time, I will eventually re-record the videos, but the changes they made so far aren't that significant to justify re-recording everything.
Just a suggestion to have style like font size, weight etc, given to elements like navigation items before auto layout or converting them to components
I am loving (and really needing!) this video, but I can't seem to get much past 15 minutes in. At 15:10 you have two frames and I only have one. I am completely new to this program and must be missing a step, but I keep rewatching and can't figure it out. Please help!
13:09 I don't know if you're doing this on purpose to demonstrate the frame feature but one can simply apply auto-layout on an element and it will be framed automatically.
when I copied the footer to the second screen, and resized the bigger frame, the social icons got stretched, I had to ungroup them. Any idea why this happened?
Hi I'm a Junior Front end developer and really enjoyed your videos just wanna ask as someone who don't know anything about figma is this a good course for me or i need to learn more before watching this. i want to learn figma cause i wanna design something like loader and so on animation for my websites or even some svg
Hello. It's been a long time but I hope you reply. I'm trying to become a frontend dev. I graduated from university two months ago, I finished Html and CSS. I'm currently studying on JavaScript. But I'm really having a hard time. Do you think I should continue? Or would ui/ux design be better for me? Can I learn in a short time?
Hi I need to convert my html&css animation to mp4 video with 60 fps 1080 p and transparent video and I don't know anything about javascript, node.js , javascript libraries please could you make a detailed video on this topic? Your help will be highly appreciated. Because I don't know anything about coding, please make step by step guide. I only know css and html and I already created animation I just need to convert it to video.
I always enjoy your videos. You always take the time to explain your steps. However, I'm still waiting for you to make better use of Figma's Auto Layout (Framing) tool, and stop creating round and rectangular containers with the shapes tools. The Auto Layout (Framing) tool is one of the best features Figma has to offer, and in my opinion, one of the main benefits over Xd. I have learned that whenever I am creating a shape that may ultimately contain other elements, text, images, shapes, etc. to wrap those elements in an Auto Layout, and then adjust the AL container's attributes accordingly. This will ultimately save time and allow for easier responsive design. 😉
Hi! I just wanted to say thank you for this class! It's really helpful. However, I have a question: why do we need to create a frame out of a Home button before we turn it into an auto layout? Thanks in advance)
No, you don't need to, you can create an auto layout with a frame automatically by selecting the items then using the shortcut `SHIFT + A` to create the auto layout with a frame that fits the content
Hey Gary. Thank you so much for this informative - and generous - course!! One question ... why do you use a rectangle behind text for a button, and not auto layout/frame?
hello, thanks for a great course, i have a question, i can't find "creating the new component" sign at the topp. Even if i go to quick actions, it is disabled, cansoomeone guide mewhat's the prroblem? Thank and again thanks for the great video
Hi, what is the average height of above the fold on a Phone, please ? I tried to look it up on Google and found 600px. Is that true even for smaller phones such as the iPhone SE ?
I agree that it would be nice if Figma would incorporate the dashed fold line, like in Xd. I'm hoping that once Adobe begins to implement Figma, they will maintain the nicer features from Xd. Incidentally, each phone will have it's own fold as the sizes vary from device to device.
Very good material. But please turn the mic down a bit next time. I feel like it's running noticeably hot and your voice is a bit distorted. That's a little unpleasant. Keep up the good work
Is it just me or he did actually uploaded a different file, not the file he showed in the video he created in figma. There is no violet in the tutorial what is that violet shape? Or the hosting error or github maybe have altered the file? Which I doubt.
I'm 16 minutes in. Trying to simply change the text Home to Coupons. It will not auto-resize the text box, putting "ons" on a second line. Figma also will not allow me to resize the text box unless I create a new asset from scratch, instead of just duplicating the Home asset. I am on Windows, which might have different bugs than Mac.
Hey all, 2 big deals here for Black Friday and beyond..
hostinger.com/design (Use code: DESIGNCOURSE for 10% off!)
bit.ly/3ECKzr1 👈 Learn UI/UX Today. Use "BF40" for 40% off during black friday!
You are really a good teacher 🧡🧡
I am not that new to Figma but I still find your stepwise explanation very useful. I particularly like how you introduce complex techniques without complicating them.
This lady is a great teacher!!!!
Don't be jelly of the beautiful locks bro.
@@DesignCourse Just messin'. I love your courses!!!!!
🤣👀
🤣🤣🤣🤣🤣🤣
Goldie locks is trans….wow!
I'm a mentor for UX and UI and I always recommend your courses to my mentees. Lots of love from Germany
Just when I want to discover Figma (using Adobe XD until now), you make this perfect video. I can't thank you enough for your work !!!
any idea which software they use to edit this video ?
When creating component variants, as in 13:30, you can use "true" and "false" as a property value. This way Figma creates an easy to use toggle in your component properties (instead of a dropdown select). :)
Thanks a bunch, it worked!🥂
I'm already 20 minutes in, but need to make breakfast. Pancakes 🥞, but then I'll have pancakes, Figma, and this new video. 😆 Thank you 🙏 your content is very much appreciated!
Extrêmenent intéressant et instructif. J'ai Appris en 1h et quart ce que j'ai pas pu apprendre depuis des mois. L'approche pédagogique est assez déterminante dans la stratégie d'apprentissage conçue au départ. Thank you . 🙏
im a CS student really trying to get into UX/UI design to make me more qualified to apply to IT positions in clubs and organizations and whatnot. website design is a big factor. they dont typically hire designers. i lucked out with getting an IT role for something big at my school, but really want to extend and work with some more provincial-level student entities. i also am developing products from the ground up and see a real need for UX. thinking of taking the google coursera course
17:38 Or you can use auto-layout on the text element. Then tweak the auto-layout if needed (border-radius, etc) and give it a background color.
Yeah, I had to search for that, it's actually easier for me. I didn't managed to center the text with the Auto Layout when I was moving the whole thing. Thank you for the confirmation :))
@@alexandruplop8296 You're welcome. Glad to be of service 👍
All my design and UI skills are god's blessing and your teachings and little bit of my effort ❤️
Thanks for everything
any idea which software they use to edit this video ?
@@inderjotsingh5868 prolly premiere pro
One of the best tutorials on Figma ever! Why? You don't pad the content out and go directly to the point. Thanks!
Exactly when I needed it 😭
Just finished this and mind blown, thank you!
best tutorial. I keep coming back to this video to build mine
I'm a developer that works at a non-profit and takes on side gigs. The work demands that I have some decent design skills so I pull away from the hardcore nerdy coding side to do some ux/ui in figma and surprisingly I'm enjoying it. Vids like this make me enjoy it because now I understand how to make things look the way I see other designers do when it comes to layout of nav and also how they think about their design helps me to translate it into code while translating components to things like react or webflow.
So, I copied the design totally identical but except one thing ; I placed Weed in place of alcohol. Bcz '''something that I like a lot of''.
Great video! Thank you, sir.
HOw can I paste/ place the "couply" logo? Im totally a newbie here. Im trying to just copy/ paste it but nothing is happening... Im crying. Help.
Perfect timing ❤
thank you for making this tutorial by following long step by step it is a lot of work and it's a great journey for beginners who want to get their hands dirty to start with fingma UI design. This tutorial deserves more love!
If you keep doin this type of content I might fall for you bro
thank you so much for this video its really needed 🤩🤩🤩
Thank you brother!
Love you from the core of the heart Sir ❤❤❤ Great video
Very useful, tank you so much for the video!
awesome bro, thank you very much for this
This class help me soo much. Thank you!
Thank you so much, Gary!! Really cool tutorial!
You've got to be kidding me. I just busted my 🍑 playing and pausing 100 times over to get through your last crash course, and now you update it 😆
But yeah I'll definitely end up watching this one too if we're being honest
Same
Which course were you referring to?
Pretty sweet end result. Thank you.
Hi i have purchased your UI UX course and wanted to know if it will be also updated with new figma features because I see old figma version only in the course videos
Check the updated chapter at the end of the course. In time, I will eventually re-record the videos, but the changes they made so far aren't that significant to justify re-recording everything.
@@DesignCourse Thank you I found it.
Loved it!
Nice one Gaz.
that was awesome 🔥
Just a suggestion to have style like font size, weight etc, given to elements like navigation items before auto layout or converting them to components
Very useful tutorial. Thanks for your efforts!
As a developer want to learn UI/UX Design and Figma I really found your tutorial very useful. Thanks. What is your VS Code theme? It looks good.
Thank you!
I am loving (and really needing!) this video, but I can't seem to get much past 15 minutes in. At 15:10 you have two frames and I only have one. I am completely new to this program and must be missing a step, but I keep rewatching and can't figure it out. Please help!
It is my wish to see Brad Traversy with this hairstyle. 😊
@TraversyMedia hopefully this tags him to see the comment
13:09 I don't know if you're doing this on purpose to demonstrate the frame feature but one can simply apply auto-layout on an element and it will be framed automatically.
You have the best greenscreen i've ever seen
At 16.41 I dont have the options to center. Its blocked. Anyone have any idea if im missing something?
Oh yea! quality bro thanks!
when I copied the footer to the second screen, and resized the bigger frame, the social icons got stretched, I had to ungroup them. Any idea why this happened?
Thanks a lot))!
Great course! My favorite part though was... "Let's go ahead and go back". Uhm...whaaaa? :)
Hi I'm a Junior Front end developer and really enjoyed your videos just wanna ask as someone who don't know anything about figma is this a good course for me or i need to learn more before watching this.
i want to learn figma cause i wanna design something like loader and so on animation for my websites or even some svg
Hello. It's been a long time but I hope you reply. I'm trying to become a frontend dev. I graduated from university two months ago, I finished Html and CSS. I'm currently studying on JavaScript. But I'm really having a hard time. Do you think I should continue? Or would ui/ux design be better for me? Can I learn in a short time?
Sorry to be a dumbo but when adding the first url logo image, i don’t see the image but just a text url in a box? Any ideas why that might be?
Perfect
32:20 This guy saved $500😂
Hi I need to convert my html&css animation to mp4 video with 60 fps 1080 p and transparent video and I don't know anything about javascript, node.js , javascript libraries please could you make a detailed video on this topic? Your help will be highly appreciated. Because I don't know anything about coding, please make step by step guide. I only know css and html and I already created animation I just need to convert it to video.
I always enjoy your videos. You always take the time to explain your steps. However, I'm still waiting for you to make better use of Figma's Auto Layout (Framing) tool, and stop creating round and rectangular containers with the shapes tools. The Auto Layout (Framing) tool is one of the best features Figma has to offer, and in my opinion, one of the main benefits over Xd. I have learned that whenever I am creating a shape that may ultimately contain other elements, text, images, shapes, etc. to wrap those elements in an Auto Layout, and then adjust the AL container's attributes accordingly. This will ultimately save time and allow for easier responsive design. 😉
yes and it is so much easier, wondering why he does apply that technique
22:58 Hero section.
Jesus teaching Figma
my component for start saving doesn't show up in my assets after the prototype of hovering is added. I'm lost...
I don't know how to get the logo
Hi! I just wanted to say thank you for this class! It's really helpful. However, I have a question: why do we need to create a frame out of a Home button before we turn it into an auto layout? Thanks in advance)
No, you don't need to, you can create an auto layout with a frame automatically by selecting the items then using the shortcut `SHIFT + A` to create the auto layout with a frame that fits the content
Hey Gary. Thank you so much for this informative - and generous - course!! One question ... why do you use a rectangle behind text for a button, and not auto layout/frame?
Deploy made by the Figma file or you need to make the site in Webflow/CSS etc? u didn't mentioned, but actually liked the video.
You would have to convert it to HTML/CSS either manually, or by using a low/no code solution as you've mentioned.
Hey Gary!
During the time of putting amazon logo from brandfetch it's replacing background rectangle idk why, can you pls help
APPLAUSE!
hello, thanks for a great course, i have a question, i can't find "creating the new component" sign at the topp. Even if i go to quick actions, it is disabled, cansoomeone guide mewhat's the prroblem? Thank and again thanks for the great video
Hi, what is the average height of above the fold on a Phone, please ? I tried to look it up on Google and found 600px. Is that true even for smaller phones such as the iPhone SE ?
I agree that it would be nice if Figma would incorporate the dashed fold line, like in Xd. I'm hoping that once Adobe begins to implement Figma, they will maintain the nicer features from Xd. Incidentally, each phone will have it's own fold as the sizes vary from device to device.
Why not using auto-layout for the entire layout?
Can I use BrandFetch for Commercial purpose.
with this new figma to webflow plugin, would that mean that once we paste it over to webflow, all the prototyping will be become functional ?
how to host the created figma file for couply ? Don't know to convert to html css file.
Very good material. But please turn the mic down a bit next time. I feel like it's running noticeably hot and your voice is a bit distorted. That's a little unpleasant. Keep up the good work
Can you pls do video on design systems in figma
You look like Kurt Cobain!!
nice
Is it just me or he did actually uploaded a different file, not the file he showed in the video he created in figma. There is no violet in the tutorial what is that violet shape? Or the hosting error or github maybe have altered the file? Which I doubt.
thanks for this course :)
why does the navbar in the iphone version need to have the same height as our page? cant it be smaller?
TIP: select frame -> right-click -> click "remove auto-layout"... This will place elements where you create them (thank me later) :P
thank you, cool hair btw, same as mine lol.
can anyone help me with what he he did with the logo 8:00
How did you copy couply to figma
am i the only one having issues, the svg is not working
Does anyone know what type of morphism design this website created in figma is?
Hey. Do you have a full Figma course as well?
any idea which software they use to edit this video ?
how to download couply svg file
Do we have an advanced Figma course as well?
Nice tutorials but i thought you were going to host the one you just did on figma
I'm 16 minutes in. Trying to simply change the text Home to Coupons. It will not auto-resize the text box, putting "ons" on a second line. Figma also will not allow me to resize the text box unless I create a new asset from scratch, instead of just duplicating the Home asset. I am on Windows, which might have different bugs than Mac.
I fixed it. I had to double click on it 3 times to activate the second purple frame. Then change the Horizontal resizing to Hug from fixed.
Ummm...am I the only one that noticed that the component/constraints
lesson skipped in the video (48:08) or is it just missing on my computer???🤣
Could you please add Turkish language option? Thank you😊
first
@designcourse Can you make a course on #Lunacy Many people are flocking away from Figma.
🫂
Omagaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
first
first