Figma Tutorial for Beginners (2024): Website Design

Поділитися
Вставка
  • Опубліковано 19 гру 2024

КОМЕНТАРІ • 151

  • @jeffbeaudoin4544
    @jeffbeaudoin4544 4 місяці тому +32

    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.

  • @preetamsthings4189
    @preetamsthings4189 5 днів тому

    Maddy is an incredibly skilled designer and an exceptional teacher. I hope Flux Academy collaborates with her more frequently to produce sleek, modern designs like this, instead of focusing on more conventional or less stylish design tutorials. Thanks for sharing this!

  • @RB-yw1tt
    @RB-yw1tt 10 місяців тому +24

    WE NEED MORE VIDEOS LIKE THESEEEEE

  • @Michelle-tx1gc
    @Michelle-tx1gc 7 місяців тому +11

    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!

  • @rameenana
    @rameenana 7 місяців тому +14

    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
      @FluxAcademy  7 місяців тому

      Thanks for the feedback and kind words 🙏❤️

  • @breynerjimeneznoy
    @breynerjimeneznoy 6 місяців тому +6

    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.

  • @jhaakon8137
    @jhaakon8137 6 місяців тому +3

    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
      @FluxAcademy  6 місяців тому

      We love to hear this feedback!

  • @salentipy
    @salentipy 7 місяців тому +3

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

  • @ramoshabagabriel9427
    @ramoshabagabriel9427 27 днів тому

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

    • @FluxAcademy
      @FluxAcademy  24 дні тому

      Glad to hear it was helpful for you! 🙏

  • @fabioguarini2591
    @fabioguarini2591 6 місяців тому +1

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

  • @Royh224
    @Royh224 9 місяців тому

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

  • @kasper369
    @kasper369 10 місяців тому +27

    How much would you charge for such work? curious

  • @taviux511
    @taviux511 4 місяці тому +1

    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.

  • @petrusmiguel776
    @petrusmiguel776 10 місяців тому +7

    THANKYOU MADDIE! YOUR MY FAVORITE ❣❣❣

  • @dunkley7776
    @dunkley7776 9 місяців тому +1

    This was excellent! Thank you all involved!

  • @qrizzymania74
    @qrizzymania74 Місяць тому +1

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

    • @FluxAcademy
      @FluxAcademy  Місяць тому

      Thanks! Glad you found it helpful.

  • @tijana5650
    @tijana5650 10 місяців тому +9

    By far the best channel for learning 😍

  • @DesignGenie-cv1cn
    @DesignGenie-cv1cn 10 місяців тому +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
      @FluxAcademy  10 місяців тому

      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
      @DesignGenie-cv1cn 10 місяців тому

      @@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
      @FluxAcademy  10 місяців тому

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

  • @hassansyed6087
    @hassansyed6087 27 днів тому

    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!

  • @gdj777
    @gdj777 6 місяців тому

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

  • @Thebboyy
    @Thebboyy 11 днів тому

    great video , can I use these basics for email design ?

  • @leephom5499
    @leephom5499 9 місяців тому +1

    Youre so talented wow!

  • @MeezanTheFairBloke
    @MeezanTheFairBloke 4 місяці тому

    Really cool tutorial, thanks for that!

  • @tobiaslehning
    @tobiaslehning 10 місяців тому +5

    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
      @FluxAcademy  10 місяців тому +1

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

  • @hellofrostbite
    @hellofrostbite 2 місяці тому

    This really helped me sharpen up!

    • @FluxAcademy
      @FluxAcademy  2 місяці тому

      That's great, glad it helped!

  • @shawnaleigh9999
    @shawnaleigh9999 4 місяці тому

    You're awesome! Thank you for this!

  • @RevelynMaeOnrejas
    @RevelynMaeOnrejas 3 місяці тому

    Nice video! I would like to know the name of the fonts used for paragraph? Thanks!

  • @denny001-01
    @denny001-01 10 місяців тому +1

    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
      @FluxAcademy  10 місяців тому

      Love to hear! Thanks Denzel

  • @justbrandy3047
    @justbrandy3047 6 місяців тому

    This video was extremely helpful for me!

  • @geishagrrrl1
    @geishagrrrl1 4 місяці тому

    Frikkin love how Maddie just does the damn thing! 💖✨🙏🏾

  • @TâmNgô-b6r
    @TâmNgô-b6r 6 місяців тому

    9:18 What shortcut to align center?

  • @Gihasy
    @Gihasy 4 місяці тому

    Thank you for teaching us ❤

  • @deepak8586
    @deepak8586 5 місяців тому

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

  • @jonathanezl
    @jonathanezl 10 місяців тому +1

    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
      @FluxAcademy  10 місяців тому

      Thanks for that feedback!

    • @jonathanezl
      @jonathanezl 10 місяців тому

      @@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
      @FluxAcademy  10 місяців тому

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

  • @nocomplyyy
    @nocomplyyy 7 місяців тому

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

    • @RickyXX22
      @RickyXX22 7 місяців тому

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

    • @Yuvaraj-fq1vh
      @Yuvaraj-fq1vh 4 місяці тому

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

  • @andreiaaraujo2980
    @andreiaaraujo2980 6 місяців тому +1

    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.

  • @RickyXX22
    @RickyXX22 7 місяців тому +1

    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

  • @AmirAkbari-w4c
    @AmirAkbari-w4c 29 днів тому

    Tanx alot❤

  • @Brandonbraun
    @Brandonbraun 2 місяці тому

    amazing video ty!

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

  • @cleanpagedesign543
    @cleanpagedesign543 9 місяців тому

    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?

  • @rowaiyeayomide5911
    @rowaiyeayomide5911 Місяць тому

    You mentioned something about a course being linked in the description below

    • @FluxAcademy
      @FluxAcademy  Місяць тому

      Added the link now, thank you! 🙏 Here it is for you: bit.ly/3C14DWl

  • @justinernest2363
    @justinernest2363 9 місяців тому

    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
      @FluxAcademy  9 місяців тому +1

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

  • @lesambriz6879
    @lesambriz6879 5 місяців тому

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

    • @FluxAcademy
      @FluxAcademy  5 місяців тому

      Hi, are you referring to the course that she mentions at the end?

  • @mattjohnson3058
    @mattjohnson3058 10 місяців тому

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

  • @jumanjimedia6324
    @jumanjimedia6324 10 місяців тому

    Looking to start web design would you recommend Photoshop or just stick with figma

    • @FluxAcademy
      @FluxAcademy  10 місяців тому +1

      Figma for web design. Photoshop (or alternatives) for image editing.

  • @pavansoni4947
    @pavansoni4947 4 місяці тому +1

    plz make a video on new version on figma

  • @thisgurlgotrizz
    @thisgurlgotrizz 4 місяці тому

    thank you so much gurll

  • @mimitoo3308
    @mimitoo3308 4 місяці тому

    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.

  • @2theyea
    @2theyea 9 місяців тому +1

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

    • @FluxAcademy
      @FluxAcademy  9 місяців тому +1

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

    • @2theyea
      @2theyea 9 місяців тому

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

  • @nestornnabude
    @nestornnabude 7 місяців тому +1

    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
      @FluxAcademy  7 місяців тому

      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
    @gamadataffa5327 10 місяців тому

    Thanks very educative

  • @mae2309
    @mae2309 10 місяців тому

    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
      @FluxAcademy  10 місяців тому +3

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

  • @lakshmiunnikrishnan3982
    @lakshmiunnikrishnan3982 6 місяців тому +1

    the link for the starter file is not working for me

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

  • @diaarraaa
    @diaarraaa 4 місяці тому

    she explains it so well , love the content !! thanks🤍

  • @Amathylar
    @Amathylar 7 місяців тому +1

    Can I hire you guys to design my website?

  • @jessicaladd85
    @jessicaladd85 7 місяців тому

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

  • @1970efrat
    @1970efrat 9 місяців тому

    THANK YOU !!!

  • @eniolahabeeb8624
    @eniolahabeeb8624 8 місяців тому

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

    • @FluxAcademy
      @FluxAcademy  8 місяців тому

      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.

  • @jilsonjoseph-m6w
    @jilsonjoseph-m6w Місяць тому

    its a landing page right

  • @laurateodora9169
    @laurateodora9169 10 місяців тому

    where is the course ? can someone give me a link

    • @FluxAcademy
      @FluxAcademy  10 місяців тому

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

  • @ameniderbel3018
    @ameniderbel3018 7 місяців тому

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

  • @ola_dayve
    @ola_dayve 7 місяців тому

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

    • @FluxAcademy
      @FluxAcademy  7 місяців тому +1

      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
    @Innopro_tech 8 місяців тому

    I dont see any download link in the starter file page

    • @FluxAcademy
      @FluxAcademy  8 місяців тому

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

  • @AIBio2023
    @AIBio2023 10 місяців тому

    there no link to download the startup file on the website

    • @FluxAcademy
      @FluxAcademy  10 місяців тому

      The link is in the description

  • @codingbox4199
    @codingbox4199 10 місяців тому +1

    yoo that newsletter form has no submit button

    • @FluxAcademy
      @FluxAcademy  10 місяців тому

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

  • @samueldaniel8230
    @samueldaniel8230 10 місяців тому

    I cant seem to download the starter file. kindly help

    • @FluxAcademy
      @FluxAcademy  10 місяців тому

      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.

  • @meowmads
    @meowmads 9 місяців тому

    Having the same problem - the assets have not been emailed to me

    • @FluxAcademy
      @FluxAcademy  9 місяців тому

      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
    @CodeCrafte_r 10 місяців тому +4

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

  • @ARINZESYLVANUS
    @ARINZESYLVANUS 9 місяців тому

    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
      @FluxAcademy  9 місяців тому

      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
      @risegg 9 місяців тому

      @@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
      @FluxAcademy  9 місяців тому

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

  • @Dvmian3000
    @Dvmian3000 10 місяців тому

    there is no download option in the link

    • @FluxAcademy
      @FluxAcademy  10 місяців тому

      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.

  • @T-Wali
    @T-Wali 4 місяці тому

    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.

  • @zenu_u
    @zenu_u 9 місяців тому

    she's so pretty

  • @zaidumar1174
    @zaidumar1174 10 місяців тому

    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
      @FluxAcademy  10 місяців тому +1

      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
      @zaidumar1174 10 місяців тому

      @@FluxAcademy Thanks 👍

  • @Homesteadhappyhour
    @Homesteadhappyhour 4 місяці тому

    What’s a Hero?

    • @FluxAcademy
      @FluxAcademy  4 місяці тому +1

      "Above the fold"; the part of the website you see when it loads.

    • @Homesteadhappyhour
      @Homesteadhappyhour 4 місяці тому

      @@FluxAcademy perfect! 👌👌👌

  • @pfever
    @pfever 10 місяців тому

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

  • @YouAlreadyKnowBabi
    @YouAlreadyKnowBabi 9 місяців тому

    Cool and all, now turn it into a prototype

  • @jvss_2306
    @jvss_2306 4 місяці тому

    This video made me realize i 'm disorganized as fudge heellp

  • @samduss4193
    @samduss4193 4 місяці тому

    I study this all and i start to wonder if company really use figma for webbuilding as much

  • @muhammadfaseeh1197
    @muhammadfaseeh1197 10 місяців тому

    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!

  • @butterflyeli-toraj
    @butterflyeli-toraj 10 місяців тому +1

    😍😍😍😍

  • @blackfoxwebdev4135
    @blackfoxwebdev4135 10 місяців тому

    btw your website still says ©2023 instead of 2024.

  • @qzynn79
    @qzynn79 10 місяців тому

    so now maybe you can make it a working html page and not just a project

    • @FluxAcademy
      @FluxAcademy  10 місяців тому +1

      on the next video we'll do that!

  • @jeremytodd77
    @jeremytodd77 4 місяці тому

    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.

  • @justinernest2363
    @justinernest2363 9 місяців тому

    How is she zooming in and out like that?

  • @georgetriadafillou6958
    @georgetriadafillou6958 9 місяців тому

    8:54 **screams**

  • @JohnPaoloSimangan
    @JohnPaoloSimangan 8 місяців тому

    is it responsive?

  • @viraldigitalmarketing8928
    @viraldigitalmarketing8928 5 місяців тому

    designer was developer

  • @bmax1685
    @bmax1685 10 місяців тому

    😘😍

  • @fiercepandaz
    @fiercepandaz 8 місяців тому

    ua-cam.com/video/clSHs94hNNc/v-deo.html took me awhile to figure out how you were doing this up to this point...

  • @madisonrodgers6870
    @madisonrodgers6870 9 місяців тому

    "promo sm" ✌️

  • @FaizanMarwat-gc6hr
    @FaizanMarwat-gc6hr 4 місяці тому +1

    why are you talking like thaaaaaaaaaat ? lmao

  • @paulwohlstetter4965
    @paulwohlstetter4965 10 місяців тому

    too fast.