2024 UI/UX Design Crash Course in Figma

bit.ly/3RNS2tW 👈 Design & code like me. Use "UI2024" for 25% Off!
-- Today, I'm going to give you a good ol' fashioned crash course for learning a bit of UI/UX with Figma. We'll use Figma (A UI/UX design and prototyping app) to design a layout for a fictional business. In doing so, you're going to learn a bit about UI/UX, and a bit about Figma itself. Because this is a crash course, it's important to understand that you can only teach so many things within a 70 minute video. If you're genuinely interested in learning UI/UX from scratch, definitely check out my interactive UI/UX design course:
bit.ly/3RNS2tW Use "UI2024" for 25% Off!
Project Files: www.figma.com/community/file/...
0:00 - Intro
1:21 - Project Files
2:02 - Figma UI Overview
4:27 - Header & Navbar Design
14:25 - Components
17:36 - Auto Layout
29:00 - Hero Section
44:05 - Veterinarians Section
54:37 - Testimonials
59:44 - Finishing up
1:08:27 - Final Thoughts
Let's get started!
#uiux #uidesign #figma
- - - - - - - - - - - - - - - - - - - - - -
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!

[@DesignCourse]

Woot! Make sure to subscribe up, loads of new content coming. The type of content that this channel hasn't seen before!

[@JaisonDavis-pt1nl]

Dude, you're awesome! Thanks a ton. Keep em coming!

[@fakhrulhaqqem6270]

You're great tutor UI/UX ever had. Im following you since 2019

[@anianowak8710]

If anyone (just like me) spend too much time on searching and trying out why the circle is visible outside the frame - here is solution. It is because the "Clip content" mark is unmarked. With frame clicked, on the right side in frame properties.

[@_thesoulsjourney]

Thanks for this amazing tutorial. I really enjoyed learning your style of teaching very relaxed and relatable. So good for refreshing up the basic skills. Thank you 💯 for putting this out. Much luv.🙏🏾😁

[@tethron.]

Nice! Studio looking fantastic, excited for this one

[@user-jo6qo7hb5i]

more tutorials like this ! love it

[@ZaibateI]

Just yesterday i started the 2023 design crash course. now I will have to move to 2024 :)

[@seedcamcreationstudio]

😂😂😂😂 Get it up

[@MuratKarakus-to4tr]

amazing sir! thank you for this! waiting for more💯💯💯

[@KiriB]

This was awesome! Followed the entire video and recreated the webpage as you instructed.

[@DS-K2010]

Great stuff there. Subscribed!

[@uxrkhan]

Super excited to learn! 🤩 This crash course is exactly what I need to level up my design skills! 💪🎨

[@dfwkarma]

New year, new tutorial, let's goo 🎉

[@NMYSTH]

Thank you for talking about WCAG! So many of these tutes never do and it blows my mind

[@The_clipp]

Love the new studio 🎙️

[@jameralist]

I've been following you and watching your videos for a while, one of my favorite channel actually. I wanna say thank you for everything you've been putting out, especially this one. What do you think would the next step if one already, let's say, master the things you teach us in this video? Whether it's to become a freelancer or looking for a job.

[@MilanB]

What's the difference between this one and the last year's one, except the layout?

[@Mhldrd]

Thank you so much! More Crash course to come!

[@thannyy]

Im following your course and all your videos. You are simply the best. Im refining my skills and building my portfolio thanks to your content.

[@JaisonDavis-pt1nl]

Dude, you're awesome! Thanks a ton. Keep em coming!

[@galihmukti]

Well, instead of making a line from ruler so that the items well put and aligned on the workspace, can I just use a grid on it?

[@JohnEdeh-wq8lj]

Thanks for this tutorial sir

[@yasirarafat4188]

NIce Work Station.🙂

[@nphoenixcrimefighter]

Fantastic tutorial. Question: Why not add colors, creating a selectable color palette?

[@VincentAudy]

This is a very pro setup! but can't wait for the echo sound to be fixed :)

[@marrieabba3607]

Hi! I seem to be having issues with getting my button to work I tried using the stroke function that you implemented on the “Get Bonkers” button, but I didn’t seem to get the result I needed when hovering as I’ve tried thrice Any advice would really be appreciated. Thanks!

[@heisfreedombeliva2848]

this is a good course if their will be a way of displaying the keyboard while projecting, it will be awesome

[@denispanarin]

Why do you use rectangle wite AL when you make a button? Isn't it enough just AL?

[@NusratJahan-yx2ud]

Great! We want to learn more from you.

[@duyha2454]

Thank you very much

[@JZN666777]

Great tutorial, great approach and content explanation, as always. Thank You very much for Your work. By the way I love the names, I will never forget paradisiac Punta Monita (Ocianica tut.), Bonkers and the very famous vet from Ohio - Dr Sasharina.

[@gizzmo54]

thank you!

[@SisiBisi-zh1cj]

Thank you so much.

[@Kahallow]

Thank you sir

[@sepehrui]

Gary my mentor, you're the best

[@nievesdeenero_marcesg]

Sorry if you're not excited (for the component 😂) thank you so much, nice tutorial!

[@thebocksters2756]

yooo that intro is sick maan!

[@nehasalma9083]

why is there a band setup behaind

[@nocomplyyy]

why isn't my rectangle snapping to the guide? whenever i make a new rectangle it spawns above frame

[@CashewDemi]

I really like your channel and the great things you share! Definitely picked up a lot from you! Next time, don't add a moving background in the back. It was too distracting for me. 😅

[@paulab9310]

for me that thing you did with the last nav link doesn't work. I played with it a bit and then realised you meant cmd + D not, Ctr + D. Anyhow, I am fairly new to web design, I'm a full stack developer and the way I would do this is create the first component then duplicate that how many times I need, write the correct name for the nav link, select all of them at the end then set the auto layout. I have great respect for what you are doing and it's helping a freelance developer learn design fundamentals but also love to use Figma. Thank you!

[@avuartistry232]

I accidentally clicked a button on my laptop and the file went on VS CODE mode and I can’t work on it anymore. Every time I open it, it crashes 😢 Anyone please help

[@iRushab]

I had posted this question in your 2023 video as well. Does your paid course put Design Principles into practice? For example, you demonstrated how you "eyeball" the size of the logo. Is there any math around it? What about grids and margins? Typography principles? Etc?

[@DesignCourse]

Yes there's a lot more detail in the full course.

[@ToumaRenshi]

I definitely love this course! I just wanted to ask you, where or how can I get more photos like those (cats)? Is it possible to generate some interesting pictures with AI? Thank you, greeting from Poland

[@stsamiko1142]

He mentioned using Midjourney for the visual assets.

[@sabairemadze2457]

the cat animation doesn't work even though i do exactly like on video, can anyone tell me why?

[@kwazastudio]

same here, tried several times doing exactly the same, but it wont work

[@caca5inP2]

Thank you! I’m switching careers from construction labor to this! 😬 gonna be hard but creativity and excitement is there 😅🦾

[@user-or2io9cf7c]

Same here I wish to transition from construction to design work. Our trade takes a lot of mental and physical energy.... but we can do it 🙏🙏!!

[@dianaazeneth]

Wow. Nice video. Thanks for this. Pd: you look like Rob Halford (Judas priest's singer) lml!!!

[@juantuvieja4110]

breaking the what ??

[@soniaghosh]

please more video

[@soniaghosh]

hello amazing work sir please create a video responsive website in figma 2024

[@sarawilliams5990]

I really wish that instead of "right around here" I could get some actual size numbers.

[@uiuxshariar]

I want to be a great UI Designer, Please suggest me a playlist, so I can practise regularly.

[@peteroguntola8760]

This is super amazing. Can’t believe I got this knowledge for free!!!

[@jellycoding]

Hi! For about a week ago I was complaining about some repeating knocks in the tutorial. Now I'm back complaining (sorry). But I use (as I think most do as minimum today) 1440 screens and the quality of this video is very low. I actually have problems seeing some of the smaller text. However I don't want you to see this as complaining. This should be viewed as feedback. You create videos on design and your content should look crisp clear instead of what I see now. I really like your content and videos but it doesn't look crisp clear and I wonder why doesn't Gary Simon have good quality. I thought your videos would be 4K for a long time now so I was a bit surprised when I couldn't get better quality when I frustrated went to the settings to set the quality right and wondering why KZbin yet again lowered the quality. The quality You deliver deserves at least 1440 now 2024. 🙂

[@sikandarmushtaq48]

Two very important things one watching your video & kissing your video 😅❤❤

[@SmileyJack.]

Audio RIP

[@oartsoares]

Nice A.I

[@crossxer6099]

what is this vampire lair of design :D

[@nehasalma9083]

lovely video i have created as same it is thanks sir even i also post this on Instagram must going to tag you sis

[@platimati]

You remind me of the actor Matthias Hues ;)

[@baazigar5]

He reminds me of jigsaw, tobin bell

[@adictousevenhidictouse6356]

late 90s bru

[@subasreek]

40:10

[@user-ju2vh3gh5u]

shift R

[@AWPologize]

Looks sexyy!!