Ultimate Figma Crash Course 2023 - Full Layout by Example
Вставка
- Опубліковано 28 лип 2024
- hostinger.com/design (Use code: DESIGNCOURSE for 10% off!)
bit.ly/3ECKzr1 👈 Learn UI/UX Today. Use "BF40" for 40% Off!
-- Today, I'm releasing my annual Figma Crash Course, which will teach you Figma through the process of designing a full layout for desktop, tablet and mobile. There's a lot of stuff packed in here, so take it nice and easy! ;)
Project logo:
coursetro.s3.amazonaws.com/st...
0:00 - Introduction
0:51 - An Awesome Offer
1:48 - UI Overview
4:01 - Navigation Design
22:30 - Hero Section
39:40 - Logo Section
43:00 - Product Gallery
53:00 - Footer Design
54:45 - Responsive Tablet Design
1:01:19 - Responsive Mobile Design
1:08:26 - Mobile Navigation Prototyping
1:11:00 - Website Deployment
Let's get started!
#figma #uiux #uidesign
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi! - Навчання та стиль
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.
Just finished this and mind blown, thank you!
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 . 🙏
Thank you so much, Gary!! Really cool tutorial!
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!
I'm a mentor for UX and UI and I always recommend your courses to my mentees. Lots of love from Germany
Very useful tutorial. Thanks for your efforts!
One of the best tutorials on Figma ever! Why? You don't pad the content out and go directly to the point. Thanks!
This class help me soo much. Thank you!
Perfect timing ❤
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 ?
Exactly when I needed it 😭
Pretty sweet end result. Thank you.
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.
Love you from the core of the heart Sir ❤❤❤ Great video
If you keep doin this type of content I might fall for you bro
thank you so much for this video its really needed 🤩🤩🤩
Very useful, tank you so much for the video!
Thank you brother!
Loved it!
awesome bro, thank you very much for this
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!
best tutorial. I keep coming back to this video to build mine
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
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?
that was awesome 🔥
Nice one Gaz.
Thank you!
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 👍
Thanks a lot))!
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!🥂
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.
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
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
Perfect
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?
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 ?
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.
Hey Gary!
During the time of putting amazon logo from brandfetch it's replacing background rectangle idk why, can you pls help
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
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
nice
Can you pls do video on design systems in figma
Hey. Do you have a full Figma course as well?
You have the best greenscreen i've ever seen
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.
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
At 16.41 I dont have the options to center. Its blocked. Anyone have any idea if im missing something?
my component for start saving doesn't show up in my assets after the prototype of hovering is added. I'm lost...
Can I use BrandFetch for Commercial purpose.
Does anyone know what type of morphism design this website created in figma is?
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?
Do we have an advanced Figma course as well?
any idea which software they use to edit this video ?
how to host the created figma file for couply ? Don't know to convert to html css file.
Oh yea! quality bro thanks!
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?
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.
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.
Why not using auto-layout for the entire layout?
How did you copy couply to figma
APPLAUSE!
I don't know how to get the logo
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.
Great course! My favorite part though was... "Let's go ahead and go back". Uhm...whaaaa? :)
thank you, cool hair btw, same as mine lol.
can anyone help me with what he he did with the logo 8:00
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.
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?
how to download couply svg file
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?
It is my wish to see Brad Traversy with this hairstyle. 😊
@TraversyMedia hopefully this tags him to see the comment
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.
Nice tutorials but i thought you were going to host the one you just did on figma
32:20 This guy saved $500😂
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
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???🤣
am i the only one having issues, the svg is not working
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.
You look like Kurt Cobain!!
Jesus teaching Figma
TIP: select frame -> right-click -> click "remove auto-layout"... This will place elements where you create them (thank me later) :P
Could you please add Turkish language option? Thank you😊
first
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.
🫂
@designcourse Can you make a course on #Lunacy Many people are flocking away from Figma.
Omagaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
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!
first
first