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

Sdílet
Vložit
  • čas přidán 11. 01. 2023
  • Learn the basics of Figma, the popular design tool for UI and UX designers. In this beginner-friendly tutorial we cover the essential features of Figma, including how to use auto layout, the color systems and the grid. Whether you're new to design or looking to switch to Figma from another tool, this tutorial is for you. Stay ahead of the game in 2023 by mastering Figma!
    Join my Figma course waiting list: livingwithpixels.com/design-c...
    Get Figma: livingwithpixels.com/figma
    Download the exercise files here: www.dropbox.com/sh/trphwk442h...
    → Software I recommend
    Hostinger for affordable webhosting: livingwithpixels.com/hostinger
    Siteground for premium webhosting: livingwithpixels.com/siteground
    Elementor for no-code web-development: livingwithpixels.com/elementor
    Figma for Web Design: livingwithpixels.com/figma
    All recommended software & discounts: livingwithpixels.com/software/
    → Full A-Z Courses
    Elementor Pro Mastery Course: livingwithpixels.com/elemento...
    Figma Design Mastery Course: livingwithpixels.com/design-c...
    Business Course: livingwithpixels.com/business...
    → Starter Guides for Beginners
    Elementor Starters Guide: livingwithpixels.com/elemento...
    Figma Design Starters Guide: livingwithpixels.com/design-g...
    → My Social Media
    Tiktok: / rinodeboer
    Instagram: / rinodeboer
    Twitter / X: / rinodeboer
    Some of the links above are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn't make all these videos without it.
  • Jak na to + styl

Komentáře • 546

  • @bananaberry3427
    @bananaberry3427 Před 9 měsíci +70

    step 1: The Structure of The Layout (1:05)
    step 2: Images & Soc Med 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 Před 6 měsíci +2

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

    • @kendrick_ukc
      @kendrick_ukc Před 6 měsíci +1

      U are a life saver❤❤❤

    • @felixotieno5277
      @felixotieno5277 Před 6 měsíci

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

  • @mikee2765
    @mikee2765 Před 11 měsíci +42

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

  • @rizkydharma8373
    @rizkydharma8373 Před rokem +149

    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 🔥

  • @adelakunoluwatobi8930
    @adelakunoluwatobi8930 Před rokem +10

    This is unbelievable. I've been struggling to get better with auto layout and components and after watching tons of CZcams 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!!!

  • @deborah8607
    @deborah8607 Před 11 měsíci +4

    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!

  • @shachaha
    @shachaha Před rokem +6

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

  • @El3iram
    @El3iram Před rokem +3

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

  • @user-in9jp2dr1d
    @user-in9jp2dr1d Před rokem +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!

  • @Ylldrit.Miftari
    @Ylldrit.Miftari Před 5 měsíci +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!

  • @codenathan
    @codenathan Před rokem +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!

  • @RhaevanHeims
    @RhaevanHeims Před rokem +6

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

  • @RizaHariati
    @RizaHariati Před rokem

    Hi. Thank you so much for your tutorial. It's so fast, straight to the point, and easy to understand. More power to you.

  • @mjacksonjones
    @mjacksonjones Před 8 měsíci

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

  • @Unatainnable
    @Unatainnable Před 7 měsíci +3

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

  • @elifsimsek17
    @elifsimsek17 Před 2 měsíci +1

    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!

  • @alvarojflores
    @alvarojflores Před rokem

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

  • @RoxaneLapa
    @RoxaneLapa Před 7 měsíci +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.

  • @renealbrechtsen9743
    @renealbrechtsen9743 Před rokem +2

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

  • @chrisyay2024
    @chrisyay2024 Před rokem +4

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

  • @SBEtherwave
    @SBEtherwave Před 9 měsíci +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!

  • @HiPnautique
    @HiPnautique Před rokem +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.

  • @tailsupdogtraining2950
    @tailsupdogtraining2950 Před rokem +11

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

    • @MMOLEARN
      @MMOLEARN Před 11 měsíci

      I loved the tutorial too!

  • @georgikanev6745
    @georgikanev6745 Před 8 měsíci +25

    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  Před 8 měsíci +4

      That is awesome to hear. Thanks for sharing 🙏🏻

  • @forgeeky
    @forgeeky Před rokem +75

    No one on CZcams 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 Před 11 měsíci +1

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

  • @jeshero11
    @jeshero11 Před 11 měsíci +1

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

  • @ronygrafo
    @ronygrafo Před rokem +1

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

  • @oliviademetriou8397
    @oliviademetriou8397 Před 8 měsíci

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

  • @specialkev
    @specialkev Před 27 dny

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

  • @mimirogers4568
    @mimirogers4568 Před 9 měsíci +1

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

  • @Bessnebess
    @Bessnebess Před 4 měsíci +1

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

  • @AshantiChristal
    @AshantiChristal Před 2 měsíci

    So packed with information! Loved it!

  • @agatatretkowska8280
    @agatatretkowska8280 Před 6 měsíci +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.

  • @azuur1435
    @azuur1435 Před rokem

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

  • @siimraudsepp7862
    @siimraudsepp7862 Před 3 měsíci

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

  • @annak7905
    @annak7905 Před 3 měsíci +1

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

  • @monahaddad8662
    @monahaddad8662 Před 2 měsíci

    Love your tutorial! That was amazing😍 thank you

  • @aliercholalier1553
    @aliercholalier1553 Před 9 dny

    Thank You. This Tutorial Is Straightforward

  • @orientmedltd.1920
    @orientmedltd.1920 Před rokem

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

  • @nataliel7601
    @nataliel7601 Před 6 měsíci

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

  • @yarencelik3725
    @yarencelik3725 Před rokem

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

  • @betulterzioglu7311
    @betulterzioglu7311 Před 8 měsíci

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

  • @galiarimon3689
    @galiarimon3689 Před rokem

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

  • @LordJHouse
    @LordJHouse Před rokem +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  Před rokem +2

      This is great to hear! Thank you 🙏🏻

  • @danivicario
    @danivicario Před 8 měsíci

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

  • @bfjrd
    @bfjrd Před 8 měsíci

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

  • @Cineluvideos
    @Cineluvideos Před rokem

    Excellent beginner tutorial! Thanks rino!

  • @certtechwebsolutions
    @certtechwebsolutions Před rokem

    YES! Been waiting for this! :)

  • @user-cs9jr2nm2j
    @user-cs9jr2nm2j Před 6 měsíci

    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 ❤

  • @9branding
    @9branding Před rokem

    I had a great getting started with Figma thanks to your awesome video

  • @unshackledai
    @unshackledai Před rokem

    This is an amazing tutorial. Thank you so much for sharing it.

  • @Superduperhumanbeing
    @Superduperhumanbeing Před 3 měsíci

    thank u so much for the video. It's slick and stunningly simple.

  • @alxandrws
    @alxandrws Před rokem +33

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

    • @rinodeboer
      @rinodeboer  Před rokem +2

      Haha awesome!

    • @ILY.RY.
      @ILY.RY. Před rokem +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 Před 8 měsíci

      Lorem Ipsum

  • @HangtheGreat
    @HangtheGreat Před měsícem

    Thank you for the tutorial, well explained and concrete!

  • @jilliannas.outfits
    @jilliannas.outfits Před 7 měsíci

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

  • @lizaheron5117
    @lizaheron5117 Před měsícem

    Fantastic tutorial! Thank you

  • @ihdharnurhadyan8669
    @ihdharnurhadyan8669 Před 5 měsíci

    amazing just amazing, love your tutorial so much 💌

  • @AnnaAndruk
    @AnnaAndruk Před rokem

    This is amazing, I learnt a lot of new things as a beginner! Thank you soooo much, you rock! :)

  • @mayoliverfran
    @mayoliverfran Před 10 měsíci

    Thank you for your video! It was very well detailed and clarifying !!

  • @suman121069
    @suman121069 Před rokem

    thank you so much for all the detailed details 🙂

  • @iherogames95
    @iherogames95 Před 6 měsíci

    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!

  • @rachelnelson5122
    @rachelnelson5122 Před 5 měsíci

    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.

  • @davidrivers2734
    @davidrivers2734 Před 4 měsíci

    Good work - really enjoying this, learning a lot

  • @magdapugnator
    @magdapugnator Před rokem

    Your videos are the absolute best!!!!!!! Thank you!!!

  • @viklon1980
    @viklon1980 Před rokem +1

    Best tutorial i ever saw. Thank you!

  • @mughalkhan5031
    @mughalkhan5031 Před 9 měsíci

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

  • @alexandersimmo7033
    @alexandersimmo7033 Před 8 měsíci

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

  • @anurouth2907
    @anurouth2907 Před 3 měsíci

    Very helpful and concise video, appreciate it!

  • @melissawebster1040
    @melissawebster1040 Před 8 měsíci

    Wow, that's awesome! Thank you so much!

  • @BigSupercast
    @BigSupercast Před rokem

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

  • @ecovillaraza2953
    @ecovillaraza2953 Před rokem

    Thank you so much Rino, I learned a lot.

  • @fatimaezzahraelmaskoune5179

    Great video and good explanations, thank you

  • @JakeRichardsong
    @JakeRichardsong Před rokem

    Your explanations are more clear than other YT videos.

  • @BeniaminMirek
    @BeniaminMirek Před 2 měsíci

    Very helpful and easy to follow. Thanks!

  • @Ronobuildstech
    @Ronobuildstech Před rokem

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

  • @PioneerWhoDreams
    @PioneerWhoDreams Před 9 měsíci

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

  • @malillomokone
    @malillomokone Před 2 měsíci +1

    This is useful, thank you man❤

  • @droy589
    @droy589 Před rokem

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

  • @bahrainhasnan
    @bahrainhasnan Před 9 měsíci

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

  • @jaypeepiquero7800
    @jaypeepiquero7800 Před 3 měsíci

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

  • @allentorillos5728
    @allentorillos5728 Před 10 měsíci

    Thank you so much for this type of tutorials

  • @TCakes
    @TCakes Před 8 měsíci

    Incredibly helpful! Thank you

  • @sierrinsupp
    @sierrinsupp Před 2 měsíci

    Clear and good for learning

  • @user-oh3xz4fs8h
    @user-oh3xz4fs8h Před 5 měsíci

    Thank you so much ❤.It's so good.

  • @christabelleezeani8362
    @christabelleezeani8362 Před 7 měsíci

    This is so beginner-friendly. Thank you.

  • @joshuaofomaja506
    @joshuaofomaja506 Před rokem

    Great explanation as always. Thank you

  • @rashidul0405
    @rashidul0405 Před 7 měsíci

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

  • @kasali310
    @kasali310 Před 4 měsíci

    Awesome!Thanks!For the icons i have used iconify plugin

  • @LogicalFinance
    @LogicalFinance Před 10 měsíci

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

  • @mefromyoufy
    @mefromyoufy Před 6 měsíci

    Awesome video, thanks!

  • @joffreykagayo9195
    @joffreykagayo9195 Před rokem

    Thank you so much for sharing your knowledge.

  • @przemysawkowalczyk3049
    @przemysawkowalczyk3049 Před 11 měsíci

    Thanks mate, helped me very much

  • @seekknowledge1928
    @seekknowledge1928 Před rokem

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

  • @luzdluar
    @luzdluar Před 5 měsíci

    Thank you so much. It's very helpful🤩

  • @theuniverse685
    @theuniverse685 Před rokem

    amazing tutorial! thank you!

  • @NisarAhmed-yc4rl
    @NisarAhmed-yc4rl Před rokem

    I am impressed with this awesome introduction to figma.

  • @arungicahaya3908
    @arungicahaya3908 Před 11 měsíci

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

  • @aplusclassroom8594
    @aplusclassroom8594 Před 9 měsíci

    Amazing buddy... this helped me a lot on my current project

  • @fabioconstantino9424
    @fabioconstantino9424 Před 4 měsíci

    Amazing Job !!

  • @lilangulap8276
    @lilangulap8276 Před 8 měsíci

    Thank you very much for this tutorial!

  • @yasin_mhd_
    @yasin_mhd_ Před rokem

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