Figma Tutorial for Beginners (2024): Website Design

Подписаться 805 тыс.

Просмотров 63 тыс.

50% 1

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.com/icons and iconoir.com/
📱 Find us on SOCIAL MEDIA
Maddy’s RU-vid channel 👉 @MaddyBeard
Flux Academy's Instagram 👉 / flux.academy
Flux Academy's Twitter 👉 / fluxacademyhq
#webdesign #figma

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 100

@rameenana 20 дней назад

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 20 дней назад

Thanks for the feedback and kind words 🙏❤️

@jhaakon8137 День назад

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.

@RB-yw1tt 3 месяца назад

WE NEED MORE VIDEOS LIKE THESEEEEE

@Michelle-tx1gc Месяц назад

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 Месяц назад

Thanks Michelle

@salentipy 26 дней назад

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

@breynerjimeneznoy 8 дней назад

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 6 дней назад

Glad it was helpful!

@dunkley7776 2 месяца назад

This was excellent! Thank you all involved!

@FluxAcademy 2 месяца назад

Our pleasure!

@leephom5499 2 месяца назад

Youre so talented wow!

@Royh224 2 месяца назад

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

@justbrandy3047 День назад

This video was extremely helpful for me!

@petrusmiguel776 3 месяца назад

THANKYOU MADDIE! YOUR MY FAVORITE ❣❣❣

@FluxAcademy 3 месяца назад

We like her too! 😊

@cleanpagedesign543 2 месяца назад

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?

@tijana5650 3 месяца назад

By far the best channel for learning 😍

@FluxAcademy 3 месяца назад

Thank you 🙏

@kasper369 3 месяца назад

How much would you charge for such work? curious

@gamadataffa5327 3 месяца назад

Thanks very educative

@FluxAcademy 3 месяца назад

Glad it was helpful!

@1970efrat 3 месяца назад

THANK YOU !!!

@FluxAcademy 3 месяца назад

You're welcome!

@chinedunwafor3793 15 дней назад

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

@lakshmiunnikrishnan3982 2 дня назад

the link for the starter file is not working for me

@DesignGenie-cv1cn 3 месяца назад

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 3 месяца назад

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 3 месяца назад

@@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 3 месяца назад

@@DesignGenie-cv1cn ah, got it. Glad to hear you're enjoying the course!

@tobiaslehning 3 месяца назад

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 3 месяца назад

Hi Tobias 👋, Although we have seen people use both on Desktop, you are correct; the convention is as you describe.

@nocomplyyy 25 дней назад

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

@chinedunwafor3793 15 дней назад

Pls how did you get the starting files i cant find it

@mae2309 3 месяца назад

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 3 месяца назад

yes! you develop the page using Webflow or Framer, we'll have a followup video showing you how to develop this design

@denzel1521 3 месяца назад

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 3 месяца назад

Love to hear! Thanks Denzel

@jozama6848 3 месяца назад

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 3 месяца назад

Thanks for that feedback!

@jozama6848 3 месяца назад

@@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 3 месяца назад

Have a look at our "Learn Web Design For Beginners" video that was published recently.

@justinernest2363 2 месяца назад

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 2 месяца назад

Yes. Figma is used for the "design" phase. Then a website needs to be "developed."

@mattjohnson3058 3 месяца назад

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) 🥴

@nestornnabude 20 дней назад

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 19 дней назад

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.

@jessicaladd85 27 дней назад

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

@ameniderbel3018 Месяц назад

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

@shape-with-me3072 3 месяца назад

Which font?

@kwoerd 2 месяца назад

Inter (extra bold), roboto and roboto mono.

@butterflyeli-toraj 3 месяца назад

😍😍😍😍

@AIBio2023 3 месяца назад

there no link to download the startup file on the website

@FluxAcademy 3 месяца назад

The link is in the description

@2theyea 2 месяца назад

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

@kwoerd 2 месяца назад

The website says Download the Figma file for this tutorial, Let us know the best email address to send the link to the Figma asset. So I guess we email them for it?

@FluxAcademy 2 месяца назад

Yes, please enter your email address and the download link will be sent to you.

@2theyea 2 месяца назад

@@FluxAcademy Ah, I had my VPN on... so the sign up section wasn't uploading

@laurateodora9169 3 месяца назад

where is the course ? can someone give me a link

@FluxAcademy 3 месяца назад

www.flux-academy.com/courses/figma-for-web-designers

@zenu_u 2 месяца назад

she's so pretty

@samueldaniel8230 3 месяца назад

I cant seem to download the starter file. kindly 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.

@eniolahabeeb8624 Месяц назад

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

@FluxAcademy Месяц назад

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.

@CodeCrafte_r 3 месяца назад

Why dev mode in figma is paid, i hate this update as a developer

@Amathylar Месяц назад

Can I hire you guys to design my website?

@pfever 3 месяца назад

why is every text except from header 1 incredibly small? seems hard to read

@innocentprosper4286 2 месяца назад

I dont see any download link in the starter file page

@FluxAcademy 2 месяца назад

Hello! Please enter your email in the field provided on the website and the link will be sent to you.

@YouAlreadyKnowBabi 2 месяца назад

Cool and all, now turn it into a prototype

@meowmads 2 месяца назад

Having the same problem - the assets have not been emailed to 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.

@Dvmian3000 3 месяца назад

there is no download option in the link

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

@ola_dayve 14 дней назад

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

@FluxAcademy 11 дней назад

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.

@zaidumar1174 3 месяца назад

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 3 месяца назад

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 3 месяца назад

@@FluxAcademy Thanks 👍

@bmax1685 3 месяца назад

😘😍

@user-tz3tg1wo7x 2 месяца назад

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 2 месяца назад

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 2 месяца назад

@@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 2 месяца назад

@@risegg Sorry, must be a technical issue. Please email team@flux-academy.com

@codingbox4199 3 месяца назад

yoo that newsletter form has no submit button

@FluxAcademy 3 месяца назад

Don't think they'll get many signups then! 😆 (The emphasis in this video is learning Figma but, yeah, it needs one.)

@blackfoxwebdev4135 3 месяца назад

@muhammadfaseeh1197 3 месяца назад

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!