WP Tutorials

Figma Tutorial for Beginners (2024): Website Design

Figma Tutorial for Beginners (2024): Website Design

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

Get the starter file to follow along with this tutorial 👉 https://bit.ly/3HTf5yR

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

Try Figma 👉 https://bit.ly/flux-figma

Free Icons 👉 https://fonts.google.com/icons and https://iconoir.com/

📱 Find us on SOCIAL MEDIA
Maddy’s YouTube channel 👉 @MaddyBeard
Flux Academy’s Instagram 👉 https://www.instagram.com/flux.academy/
Flux Academy’s Twitter 👉https://twitter.com/FluxAcademyHQ

#webdesign #figma


Comments (34)

  1. where's the link for the other tutorial Maddy mentioned it? she said it what's on the description but it's not.

  2. Amazing tutorial! would like to where you got the images they are soo cool!!

  3. 9:18 What shortcut to align center?

  4. 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.

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

  6. When I turn on the "Auto Layout" at 26:58 it kicks my "$324 USD" up so that it is in line with "INTELLIGENT GLASSES", and I am unable to move it.

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

  8. FIGMA is run by a zionist who has retweeted his support for netanyahu and the genocide in Gaza.

  9. This video was extremely helpful for me!

  10. 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.

  11. the link for the starter file is not working for me

  12. 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.

  13. I can't get your free resources, the form for my mail doesn't exist. Please fix this 🙏🏽

  14. Please how can i get the starting files i really want to follow along
    already clicked on the help, also wrote my email address but have not gotten any feed back

  15. I am really sorry, I went to the link but I cannot access the free resource to start the course. I am just desperate beginner, I would really appreciate any help.

  16. 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.

  17. finished it, finally im ready to become a ui/ux designer

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

  19. Total newb here. How do I make sure I can click on each "layer" in a section, without actually using the layers panel? It must be a setting of some kind and I cannot figure it out.

  20. Can I hire you guys to design my website?

  21. I didn't fine the way to download the starter file.

  22. 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!

  23. https://youtu.be/clSHs94hNNc?t=1105 took me awhile to figure out how you were doing this up to this point…

  24. I couldn't download the starter file pls can u help mw with it

  25. is it responsive?

  26. I dont see any download link in the starter file page

  27. "promo sm" ✌️

  28. Cool and all, now turn it into a prototype

  29. 8:54 *screams*

  30. Having the same problem – the assets have not been emailed to me

  31. This is a great tutorial, especially how you use the frames and the auto layout. One thing I found really frustrating, though, is how you add the image backgrounds to frames. You have them stored on your computer so you can select them in the finder to replace the glasses images in the product cards. I can't get the images that are on the artboard to replace the images in the product cards. Is there a way to do this, or do you need to have the images stored locally so you can get them via your finder?

  32. Hmm the figma file isn't popping up on the website :/
    Otherwise, awesome video flux team~

  33. Youre so talented wow!

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

Leave your thought here

Your email address will not be published. Required fields are marked *

Enable Notifications OK No thanks