No video
Figma Tutorial for Beginners (2024): Website Design
Рет қаралды 93,335
Күн бұрын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 👉 bit.ly/3HTf5yR
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
Try Figma 👉 bit.ly/flux-figma
Free Icons 👉 fonts.google.c... and iconoir.com/
📱 Find us on SOCIAL MEDIA
Maddy’s KZfaq channel 👉 @MaddyBeard
Flux Academy's Instagram 👉 / flux.academy
Flux Academy's Twitter 👉 / fluxacademyhq
#webdesign #figma
@jeffbeaudoin4544 24 күн бұрын
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.
@FluxAcademy 24 күн бұрын
Thanks Jeff!
@Michelle-tx1gc 3 ай бұрын
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!
@FluxAcademy 3 ай бұрын
Thanks Michelle
@rameenana 3 ай бұрын
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.
@FluxAcademy 3 ай бұрын
Thanks for the feedback and kind words 🙏❤️
@breynerjimeneznoy 2 ай бұрын
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.
@FluxAcademy 2 ай бұрын
Glad it was helpful!
@RB-yw1tt 5 ай бұрын
WE NEED MORE VIDEOS LIKE THESEEEEE
@jhaakon8137 2 ай бұрын
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.
@FluxAcademy 2 ай бұрын
We love to hear this feedback!
@salentipy 3 ай бұрын
This is very well-done! I'll definitely be looking into more of her videos.
@taviux511 19 күн бұрын
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.
@fabioguarini2591 2 ай бұрын
We need more of this, video is just perfect and the way how your'e teaching it is also just lovely, great job!
@FluxAcademy 2 ай бұрын
Thank you!
@gdj777 2 ай бұрын
Thank you. Auto-layout practice series...it does take practice.
@petrusmiguel776 6 ай бұрын
THANKYOU MADDIE! YOUR MY FAVORITE ❣❣❣
@FluxAcademy 6 ай бұрын
We like her too! 😊
@shawnaleigh9999 10 күн бұрын
You're awesome! Thank you for this!
@Gihasy 15 күн бұрын
Thank you for teaching us ❤
@thisgurlgotrizz 8 күн бұрын
thank you so much gurll
@DesignGenie-cv1cn 6 ай бұрын
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.
@FluxAcademy 6 ай бұрын
Glad you enjoyed! Just a note, Maddy's course focuses on Figma for Web Designers; not e-commerce or UX/UI from a product design perspective.
@DesignGenie-cv1cn 6 ай бұрын
@@FluxAcademy I know i bought the course and loving it. Im doing the certificate for the course now. I was just saying maybe in the future she maybe could make one because i like how she breaks everything down.
@FluxAcademy 6 ай бұрын
@@DesignGenie-cv1cn ah, got it. Glad to hear you're enjoying the course!
@kasper369 6 ай бұрын
How much would you charge for such work? curious
@pavansoni4947 8 күн бұрын
plz make a video on new version on figma
@tijana5650 6 ай бұрын
By far the best channel for learning 😍
@FluxAcademy 6 ай бұрын
Thank you 🙏
@dunkley7776 5 ай бұрын
This was excellent! Thank you all involved!
@FluxAcademy 5 ай бұрын
Our pleasure!
@denzel1521 6 ай бұрын
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
@FluxAcademy 6 ай бұрын
Love to hear! Thanks Denzel
@justbrandy3047 2 ай бұрын
This video was extremely helpful for me!
@FluxAcademy 2 ай бұрын
We love to hear that!
@tobiaslehning 6 ай бұрын
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?
@FluxAcademy 6 ай бұрын
Hi Tobias 👋, Although we have seen people use both on Desktop, you are correct; the convention is as you describe.
@Royh224 5 ай бұрын
Question on timestamp: 10:51, do you recommend using frames instead of sections? Thank you for the great tutorial!
@andreiaaraujo2980 2 ай бұрын
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.
@mimitoo3308 9 күн бұрын
Why the default width and height of the desctop frame is 1440x1024 and not 1920x1080? Is it more useful or easy? I am new to figma and I was just curious.
@deepak8586 Ай бұрын
Amazing tutorial! would like to where you got the images they are soo cool!!
@leephom5499 5 ай бұрын
Youre so talented wow!
@RickyXX22 3 ай бұрын
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
@jozama6848 6 ай бұрын
it would be great if you could export it to webflow and publish/deploy it ... kind of making the "end to end" process more transparent,
@FluxAcademy 6 ай бұрын
Thanks for that feedback!
@jozama6848 6 ай бұрын
@@FluxAcademy oh thank you for answering me :D ! of course once designed, do the process of how to connect a domain and publish the site; in the course you offer, do you have those processes ?
@FluxAcademy 6 ай бұрын
Have a look at our "Learn Web Design For Beginners" video that was published recently.
@cleanpagedesign543 5 ай бұрын
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?
@nocomplyyy 3 ай бұрын
finished it, finally im ready to become a ui/ux designer
@RickyXX22 3 ай бұрын
Pls how did you get the starting files i cant find it
@Yuvaraj-fq1vh 14 күн бұрын
@@RickyXX22 click the follow along link on the description it takes you to their website you give your mail id and they'll send the starter file to your mail id within 10 minutes
@tabish128 9 күн бұрын
I think giving the second picture, the one with the girl wearing glasses, rounded corners wasn't necessary; you could have gone with square corners instead.
@aleyna5601 4 күн бұрын
i dont have frame section
@lesambriz6879 Ай бұрын
where's the link for the other tutorial Maddy mentioned it? she said it what's on the description but it's not.
@FluxAcademy Ай бұрын
Hi, are you referring to the course that she mentions at the end?
@jessicaladd85 3 ай бұрын
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. TIA!!!
@lakshmiunnikrishnan3982 2 ай бұрын
the link for the starter file is not working for me
@FluxAcademy 2 ай бұрын
Sorry you’re having trouble accessing this resource. Please click "Help" on our website (bottom right corner) and a member of our team will assist you.
@gamadataffa5327 6 ай бұрын
Thanks very educative
@FluxAcademy 5 ай бұрын
Glad it was helpful!
@user-yx2if7xo8k Ай бұрын
9:18 What shortcut to align center?
@justinernest2363 5 ай бұрын
So once the design is done do you use this as a blueprint for how you code the html/css? Or is there another way that is done on how the web page is actually made?
@FluxAcademy 5 ай бұрын
Yes. Figma is used for the "design" phase. Then a website needs to be "developed."
@nestornnabude 3 ай бұрын
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.
@FluxAcademy 3 ай бұрын
Sorry you’re having trouble accessing this resource. Please click "Help" on our website (bottom right corner) and a member of our team will assist you.
@1970efrat 5 ай бұрын
THANK YOU !!!
@FluxAcademy 5 ай бұрын
You're welcome!
@2theyea 5 ай бұрын
Hmm the figma file isn't popping up on the website :/ Otherwise, awesome video flux team~
@FluxAcademy 5 ай бұрын
Yes, please enter your email address and the download link will be sent to you.
@2theyea 5 ай бұрын
@@FluxAcademy Ah, I had my VPN on... so the sign up section wasn't uploading
@ameniderbel3018 3 ай бұрын
I didn't fine the way to download the starter file.
@jumanjimedia6324 6 ай бұрын
Looking to start web design would you recommend Photoshop or just stick with figma
@FluxAcademy 6 ай бұрын
Figma for web design. Photoshop (or alternatives) for image editing.
@samduss4193 18 күн бұрын
I study this all and i start to wonder if company really use figma for webbuilding as much
@shockjay 2 ай бұрын
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.
@diaarraaa 25 күн бұрын
she explains it so well , love the content !! thanks🤍
@mattjohnson3058 6 ай бұрын
I made it so far until I hit the auto frame on the card. I can't get it to align the two text items below the product name. Instead it jumps one onto the same line as the product name. (26:27) 🥴
@CodeCrafte_r 6 ай бұрын
Why dev mode in figma is paid, i hate this update as a developer
@mae2309 6 ай бұрын
where do you published your figma work? are you using any of the no code apps such ass webflow, framer or even wix studio? am wondering. thank you in advanced
@FluxAcademy 6 ай бұрын
yes! you develop the page using Webflow or Framer, we'll have a followup video showing you how to develop this design
@shape-with-me3072 6 ай бұрын
Which font?
@jvss_2306 20 күн бұрын
This video made me realize i 'm disorganized as fudge heellp
@codingbox4199 6 ай бұрын
yoo that newsletter form has no submit button
@FluxAcademy 6 ай бұрын
Don't think they'll get many signups then! 😆 (The emphasis in this video is learning Figma but, yeah, it needs one.)
@pfever 5 ай бұрын
why is every text except from header 1 incredibly small? seems hard to read
@eniolahabeeb8624 4 ай бұрын
I couldn't download the starter file pls can u help mw with it
@FluxAcademy 4 ай бұрын
Sorry you’re having trouble accessing this resource. Please click "Help" on our website (bottom right corner) and a member of our team will assist you.
@Innopro_tech 4 ай бұрын
I dont see any download link in the starter file page
@FluxAcademy 4 ай бұрын
Hello! Please enter your email in the field provided on the website and the link will be sent to you.
@meowmads 5 ай бұрын
Having the same problem - the assets have not been emailed to me
@FluxAcademy 5 ай бұрын
Sorry you’re having trouble accessing this resource. Please click "Help" on our website (bottom right corner) and a member of our team will assist you.
@YouAlreadyKnowBabi 5 ай бұрын
Cool and all, now turn it into a prototype
@zenu_u 5 ай бұрын
she's so pretty
@AIBio2023 6 ай бұрын
there no link to download the startup file on the website
@FluxAcademy 6 ай бұрын
The link is in the description
@samueldaniel8230 6 ай бұрын
I cant seem to download the starter file. kindly help
@FluxAcademy 6 ай бұрын
Sorry you’re having trouble accessing this resource. Please click "Help" on our website (bottom right corner) and a member of our team will assist you.
@Dvmian3000 6 ай бұрын
there is no download option in the link
@FluxAcademy 6 ай бұрын
Sorry you’re having trouble accessing this resource. Please click "Help" on our website (bottom right corner) and a member of our team will assist you.
@ola_dayve 3 ай бұрын
I can't get your free resources, the form for my mail doesn't exist. Please fix this 🙏🏽
@FluxAcademy 2 ай бұрын
Sorry you’re having trouble accessing this resource. Please click "Help" on our website (bottom right corner) and a member of our team will assist you.
@laurateodora9169 6 ай бұрын
where is the course ? can someone give me a link
@FluxAcademy 6 ай бұрын
www.flux-academy.com/courses/figma-for-web-designers
@user-tz3tg1wo7x 5 ай бұрын
your website is confusing , cant find where to download the resources to follow along with this tutorial , no input on where to write our emails
@FluxAcademy 5 ай бұрын
Sorry you’re having trouble accessing the resources. Please click "Help" on our website (bottom right corner) and a member of our team will assist you.
@risegg 5 ай бұрын
@@FluxAcademy Same issue as others. No download link just "Let us know the best email address to send the link to the Figma asset:" with no field. Also there is no help button on the site
@FluxAcademy 5 ай бұрын
@@risegg Sorry, must be a technical issue. Please email team@flux-academy.com
@Amathylar 3 ай бұрын
Can I hire you guys to design my website?
@Homesteadhappyhour 19 күн бұрын
What’s a Hero?
@FluxAcademy 15 күн бұрын
"Above the fold"; the part of the website you see when it loads.
@Homesteadhappyhour 15 күн бұрын
@@FluxAcademy perfect! 👌👌👌
@zaidumar1174 6 ай бұрын
I'm totally confused about figjam and figma, please help me out and also the paid version of figma how can we crack it for free..
@FluxAcademy 6 ай бұрын
Figma is a design tool. Figjam is an online whiteboard. Figma offers a free plan, and professionals pay for their tools like any other job!
@zaidumar1174 6 ай бұрын
@@FluxAcademy Thanks 👍
@butterflyeli-toraj 6 ай бұрын
😍😍😍😍
@muhammadfaseeh1197 6 ай бұрын
Hello Everyone, I'm seeking your valuable insights for my upcoming digital product affiliate marketing website. My main priority is to create a visually stunning design that captivates visitors and enhances their user experience. I'd greatly appreciate any recommendations for website themes or builders that excel in aesthetics and usability, specifically catering to affiliate marketing goals. Thank you in advance for your kind support and expertise!
@viraldigitalmarketing8928 Ай бұрын
designer was developer
@blackfoxwebdev4135 6 ай бұрын
btw your website still says ©2023 instead of 2024.
@qzynn79 6 ай бұрын
so now maybe you can make it a working html page and not just a project
@FluxAcademy 6 ай бұрын
on the next video we'll do that!
@bmax1685 6 ай бұрын
😘😍
@JohnPaoloSimangan 4 ай бұрын
is it responsive?
@justinernest2363 5 ай бұрын
How is she zooming in and out like that?
@senyodzantor4037 4 ай бұрын
ctrl + scroll😂👍🏿
@georgetriadafillou6958 5 ай бұрын
8:54 **screams**
@madisonrodgers6870 4 ай бұрын
"promo sm" ✌️
@jeremytodd77 19 күн бұрын
Your tutorials are great but you move too fast on some steps and you don't explain some things, seemingly assuming we have some basic knowledge of Figma (not a beginner like you say) which requires me to go back again and again to see the moves you made to make the frames for the icons, for example. This ends up being frustrating to follow along with.
@FluxAcademy 15 күн бұрын
Thanks for the feedback
@fiercepandaz 4 ай бұрын
kzfaq.info/get/bejne/mdKDe9Zqmc6yfpc.html took me awhile to figure out how you were doing this up to this point...
@paulwohlstetter4965 5 ай бұрын
too fast.
@FaizanMarwat-gc6hr 5 күн бұрын
why are you talking like thaaaaaaaaaat ? lmao