Figma Tutorial for Beginners (2024): Website Design

In this beginner-friendly lesson, you will get a crash course in Figma for web designers.

Chapters
0:00 Intro
0:20 Starter File
1:26 Interface
4:11 Setup Page
6:11 Libraries and Styles
9:49 Navigation and Hero section
20:53 About section
23:26 Product section
34:32 Footer

📱 Find us on SOCIAL MEDIA
Maddy’s YouTube channel 👉 @maddybeardUX

#webdesign #figma

[jeffbeaudoin]

I like that she never drifts into self-talk. She's always teaching, speaks directly to her listener, and does a great job of explaining what and why and how.

[Michelle-txgc]

Maddy is such a talented designer and comprehensive teacher. I hope flux academy works with her more often to create cool, modern designs like this rather than standard/less stylish design tutorials. Thanks for this!

[breynerjimeneznoy]

Thanks a lot. This is great for someone who's just getting started with Figma. I loved how you made each element look clean and aligned.

[rameenana]

Thanks for this, sister. You we’re going at a good pace, explained well, and most importantly didn’t waste time by talking irrelevant stuff.

Appreciate your work.

[jhaakon]

This was a solid beginner course. It covered the basics. This was fun and I like how simple Figma is. Thank you for your time of gathering all the resources and putting this together.

[ramoshabagabriel]

This is gold. Best best class I ever attended. Thank you🙌🏼

[fabioguarini]

We need more of this, video is just perfect and the way how your'e teaching it is also just lovely, great job!

[qrizzymania]

wow this vid is so educative and amazing😍
thnks flux academy 🤗
youre always the best🙏

[salentipy]

This is very well-done! I'll definitely be looking into more of her videos.

[taviux]

Very nice Tutorial! thank you so much for sharing! very understandable from start to finish and I will agree she is just on point all the way.

[kasper]

How much would you charge for such work? curious

[dunkley]

This was excellent! Thank you all involved!

[DesignGenie-cvcn]

I really love this tutorial and already planning on buying her web design ecommerce course. Will maddie be doing any UX/UI tutorials? Would love to learn how she lays everything out for a mobile app and hopefully with case studies.

[tijana]

By far the best channel for learning 😍

[hassansyed]

Excellent video. I took alot of detailed notes on proper spacing and grid layout
Just had a quick question in regards to your choice of spacing
I noticed that most figma design practices encourage an 8 point grid system. Your homepage had a spacing of 40px from the device frame to the first block of text. The grid system encourage 32px or multiples of 8 but you used 40px

Any specific reason you chose 40px first and then 100px on the second page?
thanks!

[gdj]

Thank you. Auto-layout practice series...it does take practice.

[denzel]

loved every moment of this! followed every step but instead of using white for the icons I used the orange from the images and removed the hamburger icon

[tobiaslehning]

Hi from Sweden! Just a curious question...
Why do you use a navigation -menu AND a hamburger menu? I thought webpages should use a navbar and when resize to mobile it will turn into the hamburger-menu?

[andreiaaraujo]

Funny how this lovely lady explained way way better in a free youtube video how figma works comparing with the payed version course on flux academy which is expensive 😞 normally i dont do bad reviews but i feel stupid.

[Royh]

Question on timestamp: 10:51, do you recommend using frames instead of sections? Thank you for the great tutorial!