The UI/UX Crash Course for 2023 - Learn UI/UX Design

bit.ly/3IhZwSx 👈 Learn UI/UX Today. Use "UI2023" for 23% Off!
-- Today, I'm releasing my annual UI/UX crash course. You're going to learn about UI/UX design by creating a landing page for a fictional business called 'Fauxica'. We're going to use Figma (figma.com) so be sure to create an account.
Watch the HTML/CSS process of this design: • The 2023 Frontend Deve...
You're going to a lot about UI/UX design, along with many of the features and workflows of Figma. From UI design fundamentals such as colors, typography, white space, contrast, color, visual hierarchy & more.. To Figma components, component variants, auto-layout, the grid, prototyping & more..
Resource file (just a logo!):
coursetro.s3.amazonaws.com/st... (right click / save as)
0:00 - Intro
1:11 - Figma UI Overview
4:00 - Getting Started
5:55 - Creating a Grid
7:10 - Placing a Logo
10:42 - Navigation & Components
19:13 - Component Variants
31:16 - Heading
36:30 - Subheadline
41:20 - Call to Action Buttons
53:20 - News section
55:15 - Stark Contrast Plugin
1:02:39 - Using the Figma Community
1:05:21 - Gallery Section
1:16:24 - Final Result
Let's get started!
#uiux #webdesign #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]

Watch the 2nd part of this series, where we use HTML and CSS to make it a reality in the browser: kzbin.info/www/bejne/gZ2Wn4KOhs-JpLM

[@sportshome6504]

Will be glad for this

[@pixxellagemedia8145]

I’ve been expecting these tutorials 😊

[@NishalIllustration]

❤️

[@israelamos8896]

Thanks for inspiring us. We are waiting.

[@manggairis]

Kyle got me here. Lol

[@cxrlitosway]

dude, you're a legend. Thank you for your videos, I've looked and looked and came across yours, yours is definitely one of the best.

[@shishazizou6519]

I love your work! And the way you teach. It will be so cool if you could do intermediate to advance courses on Figma, Thank you.

[@emmanuellaarikpo]

Took a paid course for 7 weeks and i've learnt more in the past hour and a half than i learnt in 7 weeks. Thanks Gary!

[@Jim-bh2tb]

Is it really worth it? did you also try his css paid course?

[@naitikbhavsar4195]

stop gimmicking

[@abdullahtayeh1853]

stop lying!!!!!!!

[@morozovanthony]

Thanks for letting know that you took a paid course

[@ahall9839]

Were you comatose?

[@uifry]

I've learned so much from watching this video. Your attention to detail and the way you break down the design steps make it easy to follow along.

[@jasonlantz3808]

love your stuff.... it's nice when someone can bridge the gap between dev and design....

[@sunitaugwuja9367]

I love love this tutorial, leant really a lot. was skeptical at first but grateful I took it. Thanks

[@nasirify]

less than 24 minutes and I can already say that you are such a good teacher! Thanks 😘

[@user-si1do8zg9d]

Thank you , love your content and your teaching style. This is a great crash course for figma.

[@abdisamadkhalif4283]

Congrats on the 1M, Gary! Thanks for the crash course!

[@priceandproduct]

I just fall in love with this class. This is an incredible class indeed. Thanks, Gary!

[@chrisbolson]

Thanks for a great tutorial. I am just starting to learn Figma - this type of step-by-step tutorial is great and easy to follow.

[@mahammujahid5920]

This was incredible, thankyou you for this detailed video. looking forward to more videos like this.

[@brendan1516]

Love your content. I’ve been using XD for a while and have a bunch of existing projects in that workspace and I’m very comfortable using it. I notice you always use Figma and I was wondering if you would recommend I swap my projects over to be more future proof or if it’s not a big deal.

[@cpjordan254]

Great class! I'm learning Figma while I learn full-stack web development. I quickly realized that coding without a design is painful and ineffective for me. This video has helped me fill in many blanks with Figma and UI design in general. Thank you!

[@Dochu00]

Wow...this is the motivation I needed to move forward. I just started learning Web development..but then again I realised exactly the same..and I hope I get enlightenment from this point onward.

[@tonystarkmowa]

Really thanks it took me nearly 2 hours on watching your video and doing things in my figma

[@ComostroTirsoJose]

My favorite part was when you explanin the word "subjetive" for those who are not native in English like me. THANK YOU FOR THAT.

[@sul-dev]

12:37 You can also hold [Shift + Alt then drag] to duplicate and move in 1 action

[@user-sc5kf4mj8q]

yes we can do both

[@karinljunggren22]

You are so easy to listen to! Love your work!

[@ernesto8273]

The video quality is wonderful. 2023 energy

[@robertoerazo6844]

You're excellent teaching, thank you so much for this content!

[@xiaodhruv7693]

This is hands down the best figma and designing course in the entire youtube 🙌

[@NadiaOmer]

Great Content and awesome the way you explain about components ..... I am learning UI UX and new to Figma ...... But from this I really wanna join your complete course of UI UX with coding in CSS . By the way I have an illustrator experience. But the way you explain every thing seems super easy to me. Glad to have your amazing guidelines ..... Would love to join your complete course........Thanks Mate

[@okiroroobrutheanagho8779]

Nice. Please keep doing more of this. Thanks

[@limbo3545]

I always coded in HTML and CSS directly. My first impression in figma was that it looks painfully complicated, especially aligning elements and creating some simple effects. On the other hand it seems more intuitive for responsive layouts and I could detect problems while designing. That's nice. I think I give it a try.

[@DesignCourse]

I've made videos on this topic before, but it's always advisable to start first in a design app like Figma, as opposed to winging it in html/css for a few reasons. First, you can iterate (make changes) a million times faster. "Hm, what would this column look like over there?" -- in code, you'd have to restructure a bunch of CSS and/or HTML. In Figma, you just move it over. It makes the process of designing way easier, and you're almost guaranteed a better design 99.9999% of the time. ;)

[@limbo3545]

@@DesignCourse I'm pretty sure you're right. I started with the built-in editor in netscape navigator back in the days and I loved it as a kid. Just use the correct browser. 😆

[@Shivangi-ry8ly]

Thankyou soo much! This crash course has been really helpful. 😊

[@bostonsamus9466]

Great stuff! I didnt find the link to dl the font at the start, still valuable to watch!

[@Dylanwade_]

I have never done anything like this, this was so much fun!

[@SERAPHINADILUPI]

This hour long video fully convinced me to pursue a career in this. Genuinely informative, interesting and so well explained. Thank you!

[@ZebrazRus]

hows it going ?? would love to follow throught w this as well !

[@abigaillee18]

wooow mehn i'm so thrilled right. Thanks so much, i really learnt a lot within few minutes.

[@ravenalexa]

Amazing. Will be purchasing the course!

[@ruthchernous6087]

Brilliant UI and Figma crash course. I took a ui course and although it was good with the principles. I got more value learning how to use Figma with this course. Also very well explained and easy to follow. Thanks a lot for taking the time to create and share your videos

[@wibbs88]

Good stuff. Moving onto to your next vid before converting to Next.js. One thing though on the button. Why not just Auto Layout the Browse our collection text then fill the background then you can adjust padding etc accordingly.? - rather than text, rectangle, align, group, space etc.

[@amirankusht8286]

Very affordable and practical, thanks!

[@TheTimeCapsule00]

AMAZING CRASH COURSE!!! THANK YOU

[@azure3379]

Most amazing introduction to Figma. Thanks for this valuable contribution.

[@davidkubacka329]

Great course , thanks for uploading !

[@faizanahmed9304]

Thank you brother for this video! congrats for 1M subs

[@malithkanishka8433]

Thank you very much... learnt a lot! 😍

[@indikasandun8997]

Thanks a lot ❤. This is very informative

[@sherazkhalid1975]

A great tutorial. Learnt a lot from your course.

[@Hapixdesign]

The best tutorial video I have seen in the field of design, thank you👌👌

[@aidrivendesigners]

Absolutely Amazing Teacher and clean design!!!

[@LouraBarrand-hi6nr]

thanks i never think that will work so good job!

[@margaret_rejnowska]

Can you create video about your approach when designing a mobile app for different phones (Apple vs Android) and design systems?

[@alexbramwell1870]

I'm certain Adobe will pump this into Figma but the catch being it's fully layered (adjustable) That being an additional sub in a Figma plan no doubt!

[@sachetkk3828]

Thank you sooo much you helped alot with tips and tricks

[@marwaklach1381]

Great job ,Thank You So Much ! 😍

[@updates4043]

This is a brilliant tutorial video. Can you create an updated video as the Auto layout has got some major update?

[@sul-dev]

This is awesome. Great job!

[@iRushab]

White this course was helpful, I am still uncertain if UI principles will be covered in the paid course. The thing that put me off was about random placement of elements, not giving importance to grids and layouts, no typography scales, and the choice of images. I want to learn UI/UX design by the rules first and then decide which rules can be broken and which cannot. Thanks, Gary!

[@UsmanJamil000]

Learned a lot! Thank you so much

[@ahmadradman2006]

I really enjoyed it, thank you so much .

[@BetaBilim]

it would be great if you publish a book or a course about ui design for developers.

[@kareem2928]

Thank you, You are really awesome!

[@michalbasar]

great course, thanks a lot!

[@roninspect4357]

Thanks a lot for the crash course

[@carromgoalspocket2147]

it reaally cover most of the web design thank you

[@oscarcuban1319]

Most EXCELLENT course thanks !!!!!!!

[@marnix1]

Amazing session sir as always you're great sir, thank you so much for this session ❤❤

[@matchettxyz]

ur a legend gary, lots of love from ireland

[@saadowain3511]

Through the years. Still amazing as we know you

[@Yayesew]

በጣም አመስግናለው

[@Younes07770]

What makes this different from the Ultimate Figma Crash Course 2023 - Full Layout by Example Video? Trying to figure out which one to watch. Thank you.

[@HariharanJayagobi]

42:24 shift+A makes it into a auto layout and also a frame. Why can't we use that.

[@harishnegi316]

Please make full video on Design System for Web project from scratch to medium level

[@user-hm2oi6qc1c]

Thank you very much. Please which online business can I embark on?

[@user-iv9mj4oz6p]

Thank you very much, Gary

[@nilalias8897]

This was awesome. I'm so glad I watched it, I learned tons of stuff and had a lot of fun discovering Figma. Thanks!

[@hassaneoutouaya]

Thank you so much !

[@muqaddaswahid2069]

Awesome, what a detailed video ✌✌✌✌

[@user-tm5dg2uv4u]

thank you very much i learn your video alot

[@spaula1114]

thank you so much for that

[@ClayENMusic]

Thank you man, you saved me my career.

[@vathclass]

Appreciate that!

[@toanbui1256]

Hi, I want to ask you about Design system. Do we need a Design system first? or when we do design we will just design component look like you do it?

[@burugdoy9032]

Thank you!

[@TheStrategist314]

This course was fuckin dope. Just subbed, here's your comment, and I just signed up for your course. The trifecta.

[@Beasts679]

Sir thanks for course i learn so much from you

[@sjoodsjood]

Thank u 💖 more videos

[@a_pifagor]

Thanks a lot!

[@abdullahansari9409]

Hey! So im having a weird issue. When I try to group select the "browse our collection" text with the button, it doesn't show the autolayout option for some reason. any tips? thanks in advance!

[@adityaverma1090]

can someone please HELP! I am not able to double click and rename at 26:39 I also do not have "text" section in "design" at 27:23 to change to auto width.

[@fvandrade]

Aí fazia tempo que não usava css... mas com seu vídeo 📹 retornei mas não 👎 tenho muito como aplicar por aqui

[@laterlivingbetter]

I’m a complete newbie to this. Would you recommend just following what you’re doing? Practise makes perfect?

[@iseemtobelost8265]

Thanks!

[@muhammadtaif6592]

very helpful just amazing

[@PoseidonodiesoP]

Any idea why when I drag the components to my design they refuse to take on the size of the new word? It keeps trying to stay the same size as the original "Home"

[@AmaanKhan-od7ts]

Hey Gary! I'm facing the issue while hovering on to image it takes a delay to adjust the image.

[@althaf2167]

Need video on how to deliver ui design to client..

[@Beginnings.Unfold]

i love this and i made it too sir Thankyou

[@drkl9066]

Amazing!

[@gambomaster]

Thanks 🙏

[@bithagrop2539]

Tysm

[@jeannoelhonisch7037]

If you get the same Problem with the presentation mode, only getting the presentation view, 1. Select the “Prototype” tab in Figma. 2. In the “Device” section, select “None” or any other suitable device. These settings determine how your design is displayed in the presentation view. If you select “None”, the design will be displayed without a device frame, which can be helpful if you have a desktop design and don’t want it to be displayed in a mobile frame.

[@hakimmaghnem6288]

This deserves a million views

[@darko8585]

Hey, I have a problem with Figma I hope you can help me. When I click present project, the project/desktop is very small. It has black bars on the sides, top and bottom. To look through the project I have to drag with my mouse. I even tried opening the project through a link, and it's the same. Any solutions?

[@apenino]

great work sir

[@girlpnclyrics6371]

Really thanks man

[@user-hk3te3ql5p]

why don't use RTL (right to left) design