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!
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). :)
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 :))
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
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.
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.
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!
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.
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 . 🙏
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!
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
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?
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 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
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
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
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.
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
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.
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'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.
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?
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. 😉
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 🧡🧡
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!🥂
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 👍
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!
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.
22:58 Hero section.
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?
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.
Jesus teaching Figma
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.
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 ?
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!
I'm a mentor for UX and UI and I always recommend your courses to my mentees. Lots of love from Germany
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.
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
It is my wish to see Brad Traversy with this hairstyle. 😊
@TraversyMedia hopefully this tags him to see the comment
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 . 🙏
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!
to get the svg logo, go to the provided link, right click on the page and click on save as, it will automatically be downloaded as svg
Exactly when I needed it 😭
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
You look like Kurt Cobain!!
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!
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?
At 16.41 I dont have the options to center. Its blocked. Anyone have any idea if im missing something?
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?
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?
Can I use BrandFetch for Commercial purpose.
Perfect timing ❤
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
Just finished this and mind blown, thank you!
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.
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.
I don't know how to get the logo
Why not using auto-layout for the entire layout?
best tutorial. I keep coming back to this video to build mine
Thank you brother!
can anyone help me with what he he did with the logo 8:00
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.
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 ?
Great course! My favorite part though was... "Let's go ahead and go back". Uhm...whaaaa? :)
how to download couply svg 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
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
TIP: select frame -> right-click -> click "remove auto-layout"... This will place elements where you create them (thank me later) :P
Hey Gary!
During the time of putting amazon logo from brandfetch it's replacing background rectangle idk why, can you pls help
my component for start saving doesn't show up in my assets after the prototype of hovering is added. I'm lost...
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???🤣
how to host the created figma file for couply ? Don't know to convert to html css file.
Could you please add Turkish language option? Thank you😊
🫂
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 so much for this video its really needed 🤩🤩🤩
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
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?
If you keep doin this type of content I might fall for you bro
Does anyone know what type of morphism design this website created in figma is?
first
first
Nice tutorials but i thought you were going to host the one you just did on figma
Nice one Gaz.
Very useful, tank you so much for the video!
awesome bro, thank you very much for this
Thank you so much, Gary!! Really cool tutorial!
first
Oh yea! quality bro thanks!
am i the only one having issues, the svg is not working
to get the svg logo, go to the provided link, right click on the page and click on save as, it will automatically be downloaded as svg
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.
thank you, cool hair btw, same as mine lol.
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.
any idea which software they use to edit this video ?
Do we have an advanced Figma course as well?
You have the best greenscreen i've ever seen
Can you pls do video on design systems in figma
One of the best tutorials on Figma ever! Why? You don't pad the content out and go directly to the point. Thanks!
Hey. Do you have a full Figma course as well?
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.
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?
Love you from the core of the heart Sir ❤❤❤ Great video
How did you copy couply to figma
to get the svg logo, go to the provided link, right click on the page and click on save as, it will automatically be downloaded as svg
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
Very useful tutorial. Thanks for your efforts!
@designcourse Can you make a course on #Lunacy Many people are flocking away from Figma.
This class help me soo much. Thank you!
Omagaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Pretty sweet end result. Thank you.
that was awesome 🔥
Thanks a lot))!
Thank you!
Loved it!
APPLAUSE!
Perfect
nice