Introducing Figma: A Beginners Tutorial (2023 UI UX Design)

Поделиться
HTML-код
  • Опубликовано: 25 ноя 2024

Комментарии • 620

  • @bananaberry3427
    @bananaberry3427 Год назад +138

    step 1: The Structure of The Layout (1:05)
    step 2: Images & Social Media Icons (7:32)
    step 3: Working With Text Layers (11:23)
    step 4: Advanced Auto Layout (18:51)
    step 5: Floating Icon Row (25:16)

    • @PlayzPhenix
      @PlayzPhenix Год назад +5

      The hero we didn't want but didn't know we needed. Thanks :D

    • @kendrick_ukc
      @kendrick_ukc Год назад +1

      U are a life saver❤❤❤

    • @felixotieno5277
      @felixotieno5277 Год назад

      7:43 I have a challenge adding the images. What sizes are recommended

    • @doc4153
      @doc4153 4 месяца назад

      Pin it please

  • @georgikanev6745
    @georgikanev6745 Год назад +59

    I just downloaded Figma and with your guidance I recreated your design as my very first work. It turned out EXACTLY the same. Kudos to you for your great ability to explain with clarity and in such detail so that even beginners like me could understand. Thank you.

    • @rinodeboer
      @rinodeboer  Год назад +7

      That is awesome to hear. Thanks for sharing 🙏🏻

  • @chrisyay2024
    @chrisyay2024 Год назад +13

    The best figma tutorial for a beginner like me. It's straightforward, clear, easy.

  • @rizkydharma8373
    @rizkydharma8373 Год назад +156

    This is amazing. Not only that you strategically make us train our mind and flow with each and every possible beginner buttons and functions and everything. Your delivery is crazy good, it fits a beginner like me! You're amazing man, love this 🔥

  • @mikee2765
    @mikee2765 Год назад +52

    One of the best tutorials I have seen. Walking through some development with clear,concise explanations. Very helpful!

  • @elifsimsek17
    @elifsimsek17 8 месяцев назад +5

    Thanks for this beginner friendly tutorial! After felt like confused with so many tutorials, this one is very clear and contains everything that i need! Keep up with good work!

  • @forgeeky
    @forgeeky Год назад +81

    No one on RUclips does a job like you. Creating a design on a design tool and transferring a design into a website which is the professional way of doing the job. Hats off to you brother 😊🙏

    • @MMOLEARN
      @MMOLEARN Год назад +1

      I liked how good his videos are, the quality is A+.

  • @shachaha
    @shachaha Год назад +9

    I was fiddeling around with Figma for around 2 years now. But I never had a tutorial where I learned sooo useful stuff that keeps me doing stuff without having to google them 1 one week later because, the tutorial was so all over the place that I forgot everything! You just showed the important stuff for beginners to create a decent design. From here I can move forward. Thanks for your work! 😘

  • @adelakunoluwatobi8930
    @adelakunoluwatobi8930 Год назад +13

    This is unbelievable. I've been struggling to get better with auto layout and components and after watching tons of RUclips tutorials. I'm like where have u beeeeeeeeen. Like I wish u made more of such videos. I am so pumped, the video was so straight to the point clear and advanced at the same time. By the way, the design is dope. I'm going to finish all my unfinished projects thanks to uuuuuu. Awesomeeeeeee!!!

  • @alxandrws
    @alxandrws Год назад +36

    I literally just came on RUclips to watch your other video on Figma! That was good timing.

    • @rinodeboer
      @rinodeboer  Год назад +2

      Haha awesome!

    • @ILY.RY.
      @ILY.RY. Год назад +1

      @@rinodeboer what was the little text that you inserted under fight like a champion? I heard you say the name but I don’t know what it is😅

    • @bernadettewilson6469
      @bernadettewilson6469 Год назад

      Lorem Ipsum

  • @luisalonsogironblanco7578
    @luisalonsogironblanco7578 Год назад +13

    Believe me when I say that I have watched a lot of youtube videos, even bought a course in a recognized website that I won't mention. And this is the first time that I understood everything, and I can see myself doing this now. I have tried to learn figma by myself but it's very difficult. I almost gave up. But now I will rewatch this again to do it and creat my website for my future services.
    Thank you RIno!.
    I can't wait to see how you finish a design in figma to create it later on elementor.

    • @rinodeboer
      @rinodeboer  Год назад +3

      That's the biggest compliment I can get. Thanks so much for sharing this! Makes me really proud!

    • @xenicmark
      @xenicmark Год назад

      I feel this right here. I know my way around most design apps but switching from xd to fiigma I wanted a really detailed guide. Almost every tutorial I've seen is someone starting by pulling in a bunch of already-made assets. Now I get that that's how most people use Figma. But I think that doesn't really help much. I just wanted someone to show you how to get to the assets part from scratch and I think this might be it.

  • @Iyajifavour
    @Iyajifavour Год назад +2

    I'm a Nigerian, your tutorial helped me a lot... I can now design on Figma GOD bless you

    • @Sammyoko
      @Sammyoko Год назад

      Hey WhatsApp can we both get connected ??? Just finished going through the basics of designing wondering how to get prospective clients or others

  • @deborah8607
    @deborah8607 Год назад +6

    This was perfect! Thank you! I looked at so many videos before that didn't explain how to actually begin, even a lot of the "beginners" videos started like I already knew Figma. Again, thanks! Great tutorial!

  • @HiPnautique
    @HiPnautique Год назад +6

    You were the first that really showed why figma is so well liked and powerful.
    the others only barely scratched the surface by moving stuff around and changing basic properties.

  • @rhaevan.maniyara
    @rhaevan.maniyara Год назад +6

    What a timing, brother!!🤠
    I just started a course and wanted to learn Figma and here you are!!!

  • @naseef90
    @naseef90 2 месяца назад +3

    Tutorials should be like this❤
    I enjoy while learning anyway
    thank you man 👏

  • @Ronobuildstech
    @Ronobuildstech Год назад

    Thanks ... i'm a programmer but got a side gig to design a webpage used this tutorial to learn while on the job

  • @mimirogers4568
    @mimirogers4568 Год назад +1

    Thanks a lot! I just started to learn UX/UI. Your lesson is very helpful.

  • @ArseyTech
    @ArseyTech 2 месяца назад

    Your content is food for mind, now i'm good in creating websites and book covers, thanks for the basic this is a game changer for me

  • @alexandersimmo7033
    @alexandersimmo7033 Год назад

    Layers inside of individual shapes is in all it's simplicity actual pure genius.

  • @ronygrafo
    @ronygrafo Год назад +1

    This video is PURE GOLD, what a nice and simple way to teach, Thank You!

  • @tailsupdogtraining2950
    @tailsupdogtraining2950 Год назад +10

    Once again, a detailed step by step tutorial delivered with great clarity so is very easy to follow. Thank you, Rino.

    • @MMOLEARN
      @MMOLEARN Год назад

      I loved the tutorial too!

  • @NehaKhan996YT
    @NehaKhan996YT Год назад +1

    This is a very thorough tutorial. I barely leave comments but for you I'll do. 🎉

    • @rinodeboer
      @rinodeboer  Год назад

      Awesome, thank you so much. I appreciate it 🙏🏻

  • @nameerah7588
    @nameerah7588 Месяц назад

    I was watching another tutorial that was the shittiest one, had 2M+ views on it.
    But then i got frustrated and searched for another tutorial and this came up. Explaining so easy. Thanks a lot!

  • @betulterzioglu7311
    @betulterzioglu7311 Год назад

    This is the best figma tutorial video ever in RUclips . Thank you for this video

  • @Ylldrit.Miftari
    @Ylldrit.Miftari 11 месяцев назад +2

    I had a go at creating a template on Figma following your steps. At the end of this video, the final result turned out really well. I hope you make more videos related to this in the future because I find them really helpful and engaging. Keep up the good work!

  • @MiracleAdigo
    @MiracleAdigo 2 месяца назад

    Starting my Figma journey this month. It’s my first Figma tutorial ever. I hope it goes well.

  • @junaidawan434
    @junaidawan434 Год назад +1

    Hi! I'm a visual designer and after watching this video. I got really interested in UI design and I must say, I'm in love with Figma! It's so user-friendly and cool to work with.

    • @rinodeboer
      @rinodeboer  Год назад

      Awesome to hear! Welcome to the Figma family

  • @brianshamaya7405
    @brianshamaya7405 3 месяца назад

    Thank you!! Now I made my first ever project in Figma by following through while learning how to do specific thing😊

  • @iherogames95
    @iherogames95 Год назад

    this is like the first tutorial that acutally works with me very helpful i have a competition coming up so this was very helpful i recreated your design as well but what i am looking for right now is how to develop it like if u press the sign up button it actually takes you to sign up page thats what i am looking for to design right now but overall very helpful thanks mate!

  • @EvelyneVervloesem
    @EvelyneVervloesem Год назад +10

    Thank you so much for this video! It was perfect for me, i followed a deep training 3 years ago but did not use figma any more since then and it was just perfect. Excited to see the full course!

  • @nataliel7601
    @nataliel7601 Год назад

    so far the best figma tutorial I've ever seen! Thanks Rino

  • @irenedushimeuwineza2295
    @irenedushimeuwineza2295 10 месяцев назад

    Watching this right now in 2024. This is amazing and it is very helpful. Thanks a lot

  • @annak7905
    @annak7905 9 месяцев назад +1

    Way!! You have a talent for explaining. Thank you!!

  • @adebisiabass3285
    @adebisiabass3285 10 месяцев назад +26

    am starting my journey 2024 Allah Help me with my focus and dedication

  • @Bessnebess
    @Bessnebess 10 месяцев назад +1

    Man this is just beautiful! you are a great teacher!

  • @fataikrystanah9421
    @fataikrystanah9421 Год назад +1

    This is my first interface in product design and I can say boastfully. You are a great and impactful instructor. Would love to sign up for the course

    • @rinodeboer
      @rinodeboer  Год назад

      That's so cool, thank you 🙏🏼

  • @renealbrechtsen9743
    @renealbrechtsen9743 Год назад +3

    Been struggling for a while with figma, so this is super helpful. Thanks :)

  • @jaypeepiquero7800
    @jaypeepiquero7800 9 месяцев назад

    You're so great about every details. As a beginner, I learned
    a lot. More content like this God bless ♥

  • @Unaerel
    @Unaerel Год назад +3

    I learned a lot with you! All explained in very simple way. Such a motivating video to keep practicing. Thank you so much!

  • @JakeRichardsong
    @JakeRichardsong Год назад

    Your explanations are more clear than other YT videos.

  • @olisakinokechukwu5700
    @olisakinokechukwu5700 2 месяца назад

    This was so helpful. I followed along with the steps and had a finished version myself. Thank you.

  • @agatatretkowska8280
    @agatatretkowska8280 Год назад +2

    OMFG I love you, I would never start from "base" to "details"... but thanks to you, I did... and it changes everything. Work is so much smoother. Love this video! Thanks for explaining Figma to newbies like me.

  • @specialkev
    @specialkev 6 месяцев назад

    Outstanding tutorial. Easy to follow along, covered so many features without confusion. Really enjoyed. Thank you.

  • @tpc3
    @tpc3 Год назад +1

    I'm totally a newbie to UI UX design and he makes it very easy to follow. Thanks for the great vid!

  • @herrsiim
    @herrsiim 9 месяцев назад

    Super tutorial, thank you! Amazing how fast you can pick up Figma with this tutorial.

  • @bfjrd
    @bfjrd Год назад

    1 template but packed with important functions/techniques and explanations.. amazing tutorial!

  • @seekknowledge1928
    @seekknowledge1928 Год назад

    The best tutorial I have ever seen. His explanation level is 🔥🔥🔥🔥

  • @jeshero11
    @jeshero11 Год назад +1

    Thank you! I learned a lot. The presentation is very clear and have a strategic approach. You are amazing!!!

  • @nolkiv
    @nolkiv Год назад +1

    Best tutorial i ever saw. Thank you!

  • @rijkwillems8058
    @rijkwillems8058 Месяц назад

    Dit heeft me ongelofelijk veel geholpen. Dankjewel!

  • @SBEtherwave
    @SBEtherwave Год назад +1

    Nice video! I like how when you showcased features they would often be under your self facing camera box! I find it helps with paying attention as if you were here in person. Keep up the good work!

  • @LordJHouse
    @LordJHouse Год назад +5

    Rino, I'm really impressed with your teaching skills, from start to finish. I'm coming from XD and PhotoShop too, so I had different ways of approaching design tasks. I've watched several Figma videos by some legends, but felt like I was missing key components and clarity to make nice UIs quickly and efficiently. In 30 minutes, you gave me a very solid foundation, which is incredibly timely because I'm starting on a new site design, using Figma for the first time. I'm absolutely confident it's going to look awesome, especially with the help of your video. Thanks!
    Oh yeah, you not only understand Figma very well, but also design. PS - I'm going to join your Figma waiting list right meow!

    • @rinodeboer
      @rinodeboer  Год назад +2

      This is great to hear! Thank you 🙏🏻

  • @mjacksonjones
    @mjacksonjones Год назад

    Thank you!! I was looking for this basic intro that I haven't found looking at a ton of vids. Thank u much!!

  • @HarunaMaimunat
    @HarunaMaimunat Год назад

    Rino I am really impressed with your teachings on figma thou am new here hoping to try it myself so I could see my out come ❤

  • @azuur1435
    @azuur1435 Год назад

    i just can't thank you enough you helped me a lot to understand figma in the easiest way thanks buddy ☺

  • @aaana3
    @aaana3 Год назад +19

    You have a great teaching skills - in the sea of so many figma tutorials this one really stands out :) Will you please do the full course?

    • @laurabarriuso1013
      @laurabarriuso1013 Год назад +2

      I'm in with @aaana3 if you do it, I will behind that video.

  • @Emz3D
    @Emz3D Год назад +1

    First thank for this tutorial . its really helpful haha its my firstime to use and design using figma and its very easy to follow..

  • @alvarojflores
    @alvarojflores Год назад

    Thank you, Rino! For sharing your resources and knowledge. Be healthy and successful! 👍🏻💪🏻

  • @malillomokone
    @malillomokone 8 месяцев назад +1

    This is useful, thank you man❤

  • @oliviademetriou8397
    @oliviademetriou8397 Год назад

    Thankyou!! Created this my very first time trying figma, super easy to follow :)

  • @BARUKII
    @BARUKII Год назад

    Watch out, world. FIGMA Master coming through... 🔥🔥🔥

  • @nate.valentine-85
    @nate.valentine-85 8 месяцев назад +1

    Its like coding with friends! subbed.

  • @orientmedltd.1920
    @orientmedltd.1920 Год назад

    The best tutorial ever for figma beginners. i've got a lot from this video, thank you sir!

  • @PioneerWhoDreams
    @PioneerWhoDreams Год назад

    Learned so much from this video. I really liked working with figma !

  • @LogicalFinance
    @LogicalFinance Год назад

    I watch tutorials all the time on youtube. This was one of the best I've seen. Great job!

  • @danivicario
    @danivicario Год назад

    Thank you very much. You are a great communicator and learned a lot watching this video.

  • @mughalkhan5031
    @mughalkhan5031 Год назад

    Bro thankyou so much for helping me to take my first step in figma,u really helped

  • @codenathan
    @codenathan Год назад +1

    You just earned a subscriber! I opened up Figma and I was struggling to get my head around it, this was super useful! keep up the good work!

  • @yasin_mhd_
    @yasin_mhd_ Год назад

    Man you just made it easier. Thanks a lot. Love from India

  • @yipmong
    @yipmong 16 дней назад +1

    best figma tutorial 👏 👏

  • @arungicahaya3908
    @arungicahaya3908 Год назад

    great video, this is not just how to use Figma, also gives us how to create good design

  • @ronfairfieldmirrorartist4541
    @ronfairfieldmirrorartist4541 Год назад

    Wow .... For the first time I started to build a website for a client in figma first before approaching wordpress and elementor and the client loved it straight away - now to make it work in elementor :)

    • @rinodeboer
      @rinodeboer  Год назад +1

      Awesome to hear! Welcome to the design-first club 🙏🏻

  • @El3iram
    @El3iram Год назад +3

    Love your tutorial! It's very easy to follow and I can't wait to watch more of your videos

  • @PaulDewseth
    @PaulDewseth Год назад +1

    this is super helpfull, I'd recently moved to figma fom adobe XD. Thank you rino.

  • @akhenatontubba9950
    @akhenatontubba9950 Год назад

    Teşekkürler harika bir videoydu... otomatik çeviri de Türkçe dil desteği bulundurdugunuz için de ayrıca teşekkür ederim 🎉

  • @rachelnelson5122
    @rachelnelson5122 10 месяцев назад

    Love this!! I'm already in your Elementor course and can't wait to bin in the Figma course when you create it. Your videos are easy to follow. Thank you for your videos they are changing the way I make websites.

    • @rinodeboer
      @rinodeboer  10 месяцев назад

      Awesome to hear 💪🏼

  • @jilliannamessina
    @jilliannamessina Год назад

    this was amazing first time using figma and i got it! thank you!

  • @jessundae
    @jessundae Год назад

    Worth to subscribe, I am a Graphic Designer and new to UI/UX. You made this easy to understand and follow as a beginner. Looking forward to your future tutorials about Figma.

  • @RoxaneLapa
    @RoxaneLapa Год назад +4

    Thanks, that was a perfect intro tutorial. You showed us what it can do and some problem solving without being long winded. I also found your enjoyment of the small handy things very endearing. I’m sure I’ll be watching this again because there’s so much packed in here.

  • @galiarimon3689
    @galiarimon3689 Год назад +1

    excellent tutorial, I learned a lot and really enjoyed it, you are a great teacher! thank you

  • @BigSupercast
    @BigSupercast Год назад

    this is a fantastic tutroial, taught me more about figma then any other youtuber

  • @christabelleezeani8362
    @christabelleezeani8362 Год назад

    This is so beginner-friendly. Thank you.

  • @abdullahowolabi1351
    @abdullahowolabi1351 Год назад +1

    Thanks for this I really need the elementor tutorial 😊

  • @mrsdacaps
    @mrsdacaps Год назад

    Thank you, this was so helpful. I don't usually leave comments, but this was such a thorough tutorial. I feel so much less intimidated to learn this now!

  • @beanerb822
    @beanerb822 Год назад

    Ive been designing my parents website for a year now... (took me longer than it should) but its all thanks to you! and now im going to start selling websites!! and ive been sad because i wanted to use adobe so bad(i use a chromebook and im not sure it would work). IM SO THRILLED there is a web operating platform for me to learn on chromebook :'D Thank you for everything!!! best channel ever

    • @rinodeboer
      @rinodeboer  Год назад

      Oh that’s awesome to hear! Never thought of Chromebook users. But makes so much sense now

  • @lauradagro622
    @lauradagro622 Год назад

    Thank you for this tutorial! I am a beginner and succeed to follow everything!! Please do another video about Figma 🥰

  • @droy589
    @droy589 Год назад

    That was some nice cool tips and tricks on Figma. Some nice features that I just did not know until now.

  • @doc4153
    @doc4153 8 месяцев назад

    At 8:52 after you adjusted the image inside the rectangle, you created empty space on the left. That space was transparent. When you created the black fill layer, all you need to do is drag that layer UNDER the image. No need to do the gradient trick, just pointing that out. Anyway, as you can tell by my comment history this is like my third time watching this video, it's fantastic!

  • @isabelroosmarijke
    @isabelroosmarijke 4 месяца назад

    Zo'n goede video Rino! Dank voor de fijne, heldere uitleg!

  • @JustAn0therSoul
    @JustAn0therSoul Год назад +1

    Good timing was just abouut to watch a tutorial on figma today or tomorow :)

  • @bahrainhasnan
    @bahrainhasnan Год назад

    Thanks for the video. A great tutorial for me to start my Figma journey!

  • @FuriCut
    @FuriCut Год назад

    learned my first design from you in easiest way, thanks. Cheers

    • @rinodeboer
      @rinodeboer  Год назад

      Awesome to hear and congratulations!

  • @AshantiChristal
    @AshantiChristal 8 месяцев назад

    So packed with information! Loved it!

  • @yarencelik3725
    @yarencelik3725 Год назад

    thank you! this was exactly what I needed for a simple project

  • @dreamglow6343
    @dreamglow6343 Год назад +1

    My first time using Figma! Took me two hours to finish the tutorial but I did it 😂

  • @TibebuKejela-md5mz
    @TibebuKejela-md5mz Год назад

    amazing ,i don't know what is figma is really before but know im confident tnx

    • @FinazzoCodes
      @FinazzoCodes Год назад

      Hi I make youtube videos on figma and I am just starting out any support is appreciated!

  • @jovybayot7584
    @jovybayot7584 Месяц назад

    thank you for your clear and easy to understand tutorial.

  • @rashidul0405
    @rashidul0405 Год назад

    Hi, your presentation/flow was very nice. thoroughly enjoyable.

  • @jocelyndelaroca5565
    @jocelyndelaroca5565 Год назад

    like the way you present and teach figma