Figma Tutorial For Beginners 2024 | Web Design of Landing Page

Поділитися
Вставка
  • Опубліковано 9 лют 2025
  • In this video we're going to create a cool landing page in Figma.
    Even a beginner will be able to repeat such a design and, having trained, take orders and make money online, making cool website design.
    I have a video with step by step instructions on how to set up this design on wordpress website.
    If you want to buy access to this instruction for $27, send me an email to steveditor1@gmail.com with the title "Figma website".
    My instagram:
    / steveditor

КОМЕНТАРІ • 128

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

    I started my journey to 100,000 followers on instagram. Every day I record videos, share news, useful tips and tricks, follow my progress here - instagram.com/steveditor.

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

      This video is amazing, but how can I remember the measurements of frames or the lines used? Do I need to memorize them, or is there a general rule for this?

  • @enzodagostini
    @enzodagostini 10 місяців тому +22

    As someone who knows nothing about Figma, this tutorial is exceptional. Thanks.

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

    17 min but i used 4 hours to complete it. i'm an absolute beginner but i learnt so much from this. Thank you so much

    • @ShubhamJha-t2m
      @ShubhamJha-t2m 5 місяців тому

      You used the free version or the paid version

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

    Awesome awesome. Just amazing. Although I am a professional UI/UX designer I have to say your skills are insane. Very good. Keep up the good work bro.

  • @rappolop
    @rappolop Рік тому +8

    this is where i start as web devs, ill learn more.
    btw, thank you for the vids, thats help a lot.

  • @InsightsWithSamTheMan
    @InsightsWithSamTheMan Рік тому +7

    Steve! I looooooooooooooooooooooooooove your model of teaching. It's so easy to follow. Thank you for your efforts.

  • @whosBenne
    @whosBenne Рік тому +17

    This video is amazing, really love the simplicity and the in depth tutorial. Great job.

    • @proera2484
      @proera2484 Рік тому

      I see you made this comment 5 months ago. May I ask how you are doing on your design jouney ?

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

    The BEST clear, useful and quiet video without music or disturbance. THANK YOU .

  • @MrShortcuts
    @MrShortcuts Рік тому +12

    I‘m gaining a ton of value from your videos. I appreciate the work you put into it. Keep it up! 👍

  • @ABDULGZZIWA
    @ABDULGZZIWA 5 місяців тому +2

    the speed was on point. Leading to a good focus while watching just on point no unnecessary explanations. The repetition of the shortcuts every time you use them makes them really easy to remember. i like it. Keep it up and thanks again.👍

  • @insaneroute
    @insaneroute Рік тому +2

    Excellent Presentation with simplicity. Keep it up.

  • @rohithrr7079
    @rohithrr7079 13 днів тому

    DUDE!!! you're an absolute Monster!!!!!!! Loved your Energy buddy!!

  • @henrycolvin8051
    @henrycolvin8051 20 днів тому

    Really appreciate this. Procrastinated this project and first time doing UI design. All the other videos for beginners were far too rushed

  • @sofianguyen4286
    @sofianguyen4286 11 місяців тому +1

    Thank u so much. I followed the video step by step and I’ve finished it. The result looks exactly the same with yours. So happy❤

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

    That is a brilliant tutorial Steve, just the right pace. You are truly gifted. Thank you.

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

    Wow. Perfect at explaining for beginners.

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

    One of the best clear step by step information, although never used Figma but he made it look so easy to use!

  • @vegatables3457
    @vegatables3457 Рік тому +119

    why everybody shows how to design simple landings, but no one shows full projects with prototyping all pages to get clear understanding

    • @justbad9679
      @justbad9679 Рік тому +3

      So from where i can learn

    • @kiranbhalerao811
      @kiranbhalerao811 Рік тому +3

      Yes you are right

    • @dolphintami2302
      @dolphintami2302 Рік тому +3

      if you find someone to design full project please let me know

    • @looksmatteronly
      @looksmatteronly 11 місяців тому +4

      Bcz they ain't real product designers they are figma trolls

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

      "Figma tutorial for beginners" there is your answer.

  • @KnowledgeNook6477
    @KnowledgeNook6477 Рік тому +4

    Clean and smooth but detailed ❤

  • @RenfausiIen
    @RenfausiIen Рік тому +3

    Thanks BTW for your efforts.
    Nice tutorial and straight forward.

  • @EzekielGabriel-d8u
    @EzekielGabriel-d8u Рік тому +6

    you are the best teacher, God bless you with more wisdon

  • @RojinaKhatun-cb2mr
    @RojinaKhatun-cb2mr 3 місяці тому

    Wow...I learned everything about Figma in one video. I love it. Its really helpful for me. Thank you so much Steve.😘

  • @Meena-q6c
    @Meena-q6c Рік тому

    Super clear, I just made my first Figma design. while m developer never did design this made it so easy
    Thank you somuch

  • @SaisshOfficialYt
    @SaisshOfficialYt Рік тому +4

    One of the best videos for beginners in figma. Explanation on point and clear! I would recommend to viewers to watch this until the end.

  • @nataliejabbour4578
    @nataliejabbour4578 Рік тому +1

    Reeeally helpful!!

  • @maicon484
    @maicon484 Рік тому

    nice very nice!

  • @girlchildd
    @girlchildd Рік тому +1

    Thank you.. This was really helpful.. I'm a beginner and I created a fintech landing page.. Thanks

  • @HarikrishnanLoganathan-i6o
    @HarikrishnanLoganathan-i6o 7 місяців тому

    Really Your Videos was Very Straight and Forward to Understand.... All the Best

  • @speakuptv9798
    @speakuptv9798 Рік тому +2

    Great tutorial , appreciated

  • @initial_f1054
    @initial_f1054 Рік тому

    very informative thank you

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

    thank you! great video and tutorial!!

  • @AladeTaiwo-u3t
    @AladeTaiwo-u3t 8 місяців тому

    Thank youuuu so you for this video, very helpful.❤
    Short and detailed.🤗

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

    Great tutorial. Thannk you!!

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

    Magnific! Thank you!!!!

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

    Great teaching ❤😊

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

    Outstanding tutorial

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

    Great bro awesome video 👍

  • @thebook9033
    @thebook9033 Рік тому +2

    Amazing and fast time save❤

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

    First try today with figma, will keep working on it till i get better.

  • @tanverkhan1771
    @tanverkhan1771 Рік тому +1

    please upload more videos in landing page design in figma

  • @jesseberhe9702
    @jesseberhe9702 Рік тому +1

    First!

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

    Really helpful!

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

    Great tutorial.

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

    Great tutorial , appreciated

  • @bharadvaji
    @bharadvaji Рік тому

    lovely

  • @vivizsz
    @vivizsz Рік тому +1

    please do more videos about that, i would learn so soo much i begging you

  • @vibhutiarya2501
    @vibhutiarya2501 Рік тому

    Awesome

  • @ruthoyewusi7033
    @ruthoyewusi7033 Рік тому +1

    thank you so much.. i recreated a nice replica😁😁😁

  • @eraye6955
    @eraye6955 Рік тому +4

    If i understand correctly i have to press command + option + G on Mac or Ctrl + Alt + G on WINDOWS

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

    Very good video 💖💖

  • @TheRedblossom
    @TheRedblossom 8 днів тому

    I wonder why there are two different voices ;) But im happy to get free access this way :D

  • @parsanlata
    @parsanlata 11 місяців тому

    Dear Steve ur video help me alot

  • @ecomking98
    @ecomking98 Рік тому +2

    hi bro, good video. can you show how I can import it to shopify?

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

    Excellent

  • @mbhayes3127
    @mbhayes3127 Рік тому +2

    Hi Steve... first - wonderful wonderful insightful Figma tutorial video!!! Very well done... just like the styling of the video, pace, and content presented.. a complete start to finish look in 17 minutes though it took WAY LONGER lol with me trying to practice and duplicate it for myself in Figma. That said, sorry if I missed this... I noticed throughout heavy usage of Ctrl-Alt-G to group objects into a frame... With all of the emphasis on RESPONSIVE this and that these days... am I correct since there weren't many if any SHIFT-A s used... I'll have to go back to SHIFT A (auto layout) everything in order to make it RESPONSIVE... CORRECT? Just checking before I have to reinvent the wheel. Either way I am immensely grateful and thankful for what you have provided here!!!

  • @vivizsz
    @vivizsz Рік тому

    i realy learn somenthing after searching so many people whot do not teache nothing!

  • @36badass
    @36badass Рік тому +1

    Hi and thanks for the video, but isn't it missing how to make the menu work and how to link between pages?
    Now I'm sitting with a nice layout, but I can't move on?

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

    compliments really

  • @hamissoum.barmou8795
    @hamissoum.barmou8795 9 місяців тому

    This video is precious

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

    All the way I expected for Steve to tell about the Prototype thing, how this landing would look and work in the preview mode because that's particularly what I can't do. Anyway, thanks for the great video!
    P.S. I wonder how do you manage to add and remove your slavic accent? :)

  • @Allcitygraphix-uc9eb
    @Allcitygraphix-uc9eb Рік тому +2

    Amazing video learn alot. Have some confusing does it necessary to create separate section for different part of landing. Like even we can design in one frame instead of creating separate.

  • @MAB015
    @MAB015 Рік тому +2

    Thanks a lot for sharing.
    I have some experience designing most webapps and mobile application, but I want to design great Landing pages.
    Doing a landing page as this one, how much do you think to charge in usd? One of 4 sections.

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

    Amazing what about responsiveness for mobile?

  • @OnyebuchiOfunelo-dl1ve
    @OnyebuchiOfunelo-dl1ve Рік тому

    Super valuable

  • @rohmatsupriyadi3222
    @rohmatsupriyadi3222 Рік тому +1

    can you make for mobile tutorial, ?

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

    hats off

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

    After completed this project can i uploaded it my domain?

  • @HinesEddy
    @HinesEddy 11 місяців тому +2

    How do you apply the finished design onto a website so you can actually have a functioning landing page?

  • @addiseth249
    @addiseth249 Рік тому +3

    How do you create links between the pages?

  • @coachzuby
    @coachzuby Рік тому +2

    Amazing video!!! But as a beginner, what next? How do I upload to your domain?

    • @HinesEddy
      @HinesEddy 11 місяців тому

      Did you ever find out?

  • @profmatheusfranco
    @profmatheusfranco Рік тому +2

    Hi, Can you share the figma project of this video?

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

    thank you

  • @VictoriaLawrence.
    @VictoriaLawrence. Рік тому +1

    At 4:55, the correct command is Cmd+G

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

    How can I remember the measurements of frames or the lines used? Do I need to memorize them, or is there a general rule for this?

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

    more tutorials for figma

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

    dont we need to use auto layout, constrain's while creating a web design ?

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

    Steve can you please give my the info about your USB mic how about your experience with it, I want to buy one for my social media videos, and please let know about the price?

  • @karlc.5943
    @karlc.5943 10 місяців тому

    Hello, A question why do you use layout and not group ? Group is more easier to editing from what I see (beginner question) ?

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

    😄 AWESOME but it would be much better, if it was in auto layout, and figma has changed a lot, it was detail though, i could make an exact replica of it without any hassle, but, there are very tiny details which i feel could be more focused on like the gap between each components, the plates, difference from the heading and the body text etc...

  • @ui-desingerbro
    @ui-desingerbro Рік тому +1

    Better way than bullshit courses from non have the skills to teach
    Congrats Bro

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

    I haven't found any Vectary 3D plugin. Please help me.

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

    This is great but how to take this design and actually convert it into a website?

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

    But how can I use them do i have to build them again is for exampele GHL or Clickfunnels? Is this just the Blueprint?

  • @s-eddgaming2165
    @s-eddgaming2165 10 місяців тому

    can we link it with our domain?

  • @uptotransform2643
    @uptotransform2643 Рік тому

    Can I become a ui designer or ux designer if am only know Figma

  • @gamadataffa5327
    @gamadataffa5327 11 місяців тому

    Great tutorial ... Clear instruction and easy steps to follow

    • @steveditor
      @steveditor  11 місяців тому +1

      Glad it was helpful!

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

    how do u make it as a website?

  • @Praveen_kumar369
    @Praveen_kumar369 Рік тому

    How we get grids after typing steveeditor

  • @doxenbridge
    @doxenbridge Рік тому +5

    You are hot and your videos are very useful. One thing is I would love it if you explained why you do the things you do. Why for instance create a frame why is that good. What are you trying to achieve? I find its really useful for me to copy you but I find it hard to recreate because I don't know why you did what you did. If I understood that, then I could make my own design decisions. Thank you.

  • @marcelriedeman9286
    @marcelriedeman9286 11 місяців тому

    can you share the final result in the description?

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

    great tutorial. but can you help how to turn in into a real website?

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

    how to snuggle each frame to each other ??

  • @a09z111
    @a09z111 Рік тому

    usfull

  • @gelwinaraya4536
    @gelwinaraya4536 Рік тому +1

    how you make it functional?

    • @HinesEddy
      @HinesEddy 11 місяців тому

      did you ever find out?

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

    HOW CAN YOU SAVE

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

    but how can u publish it

  • @sherifatabass8203
    @sherifatabass8203 Рік тому +1

    Please how can I undo an error 😩

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

    How to remove background from a image

  • @Codebyakshay
    @Codebyakshay Рік тому

    but u didnt not tell us how to export it as html and css

  • @Servantofallah-2f
    @Servantofallah-2f Рік тому

    but u didn't make it responsive nor u did prototyping