Figma tutorial for beginners - auto layout & components

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

КОМЕНТАРІ • 161

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

    Link to Figma: psxid.figma.com/mtvfdvfjvpps
    Link to Figma Professional Plan: psxid.figma.com/sp3ulqgt744y-cb44ct

  • @ronindevninja
    @ronindevninja 7 місяців тому +13

    there are a tons of figma videos on YT about 1hr each one, but you in 10 mins, explain more an better, I love you.

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

      Can't agree more!! Thanks a lot :)

  • @PP-po3ri
    @PP-po3ri 2 роки тому +29

    Please, do more videos! You are an amazing teacher

    • @AlienaCai
      @AlienaCai  2 роки тому +1

      Thank you so so much for your support!

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

      Even better than the videos on Figma's channel!!! 👏🏼👏🏼👏🏼

  • @axl2531
    @axl2531 2 роки тому +10

    This is amazing video! One of the most high-quality and detail-oriented ones I've watch. I especially like how you discussed all the exceptions and showed examples. Those could be so frustrated at times.

  • @underdilfwood2392
    @underdilfwood2392 2 роки тому +6

    This is the best explanation of auto layout I have seen (and I'm pretty sure I've nearly watched all of them at this point 😵‍💫). Thank you!

    • @AlienaCai
      @AlienaCai  2 роки тому

      I’m so so glad that it helped!

  • @rosab6259
    @rosab6259 3 дні тому

    You are my hero! This is by the far the BEST auto layout explanation ♥️

  • @masonguillory3790
    @masonguillory3790 2 роки тому +9

    Best explanation on UA-cam by far. The fact that you've made the tutorial in the form of a use case is super helpful and keeps my brain interested. Many tutorials are just an explanation of tools that may or may not be related to one another without any specific reason you might use them. It's like taking that math class that you know you'll never use in daily life. Scenario learning/teaching and the flow of this tutorial was second-to-none. If you ever get tired of practicing UX/UI, consider becoming an exclusive educator or paid mentor. You're already great at it. 👍

    • @AlienaCai
      @AlienaCai  2 роки тому +1

      Wow, your comment is so so inspiring. Thank you so much for this ❤️❤️❤️ I will defiantly consider.

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

      i couldn't agree more.

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

    Awesome Figma tutorial as always! I really appreciate the great work you put into these. Though I did run into a little hiccup with the caption auto-layout (3:36) - the size wasn't adjusting automatically like I thought it would. But no worries, I figured out a fix! I just made the caption use auto-layout first, and then applied the auto-layout to the whole group with the icon and username. Problem solved! Thanks again for the super helpful tutorial.

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

      yeah i was having the same issue thank you for sharing the answer to it!

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

    thanks a lot, I watched so many autolayout vids and most were rushed, this one made me get everything right away THANKS

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

      I’m so glad to hear this 🙏

  • @rishabhparochi
    @rishabhparochi 2 роки тому +20

    Excellent!, I don't think anyone can explain better than this. 👍🏻

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

    Thank you very much, Aliena! I started a bootcamp of UX/UI this year and you are helping me a lot. Congratulations for your videos!

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

    Loved it. No idiotic intros, silly music or endless distractions. Nicely done Aliena, pretty too.

  • @TheSilverpictures
    @TheSilverpictures 2 роки тому +2

    OMG!! Thank you!!! I just started a new job and we're supposed to use Figma, I was feeling so unmotivated until I saw this, can't thank you enough! 💗

    • @AlienaCai
      @AlienaCai  2 роки тому

      I’m so glad this helped a bit 🥰🥰

  • @angelacalvin5790
    @angelacalvin5790 2 роки тому +9

    This was SOOOO helpful and easy to follow. I appreciate how you broke everything down in really clear manageable ways and it visually easy to follow as well. I did it along with you. I have to be hand on! I am really tryna master this in order to apply to a whole layout design AND make it responsive which is a WHOLE other beast :) I haven't looked at your other vids yet, but I would love to see you cover responsive layout :)

    • @AlienaCai
      @AlienaCai  2 роки тому +1

      You're so welcome! Your request is noted ~

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

    As a complete figma beginner, I have to say thank you very much! Excellent explanation!

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

    Hey aliena, I want to thank you for making it so simple to understand. This was really helpful!
    You are doing a great job. Hope this message keeps you motivated to keep going. 🌹🌟🚀

  • @depechetoi
    @depechetoi 2 роки тому +4

    I'm not even learning UI/UX but you got me interested with the way you tell it. Hope the lessons will keep coming :) All the best!

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

    Absolutely brilliant, I need to setup an hour just to do this, I will follow your tutorial to the letter. I appreciate the fact that you didn't get into any fonts or colors. You keep it very simple in black and white, others pollute the tutorials with styling and extras, you don't. Thanks!

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

      I like your comment about pollution and extras. I just want the core topic also. Aliena has got the talents of a great communicator.

  • @hassanmurtaza4443
    @hassanmurtaza4443 15 днів тому

    Thank you so much Aliena Cai for the great insightful content.

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

    Aliena, this is simply amazing! I wanted to tackle auto layout, and the videos I saw before were not very viewer friendly. But yours is just simple and straightforward. Will you be willing to share more Figma - tutorial/videos in the near future, even specifically tackle some edge cases? How do you keep up with the latest trends/industry standards in these tools? My greatest thanks to what I've learned from this video!

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

      Glad it was helpful! Will try to do more 👍

  • @Joanna-kt3li
    @Joanna-kt3li 2 роки тому +1

    This was such a great straight-to-the-point informative video. Thank you! I am currently in boot camp and have been stressing over auto-layout. Can't thank you enough for this :)

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

      Hey! Can you tell in which bootcamp you are enrolled in ? Also are you a beginner in ui\ux too ?

  • @KK-ew6ry
    @KK-ew6ry Місяць тому

    Your explanations are amazing!

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

    I just wanna say you’re amazing and I’m gonna cry bc I finally understand

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

    this is the best video i found about auto layout and componenet. Now looking for variables and prototypes next(if you created one video about that as well as)

  • @njengathegeek
    @njengathegeek 2 роки тому +3

    This was quite educative, I am a Figma guru but I still learnt something

  • @Sicking-duck
    @Sicking-duck 2 роки тому

    I watched 3 tutorial videos. its very useful for me and everone. Thank you for making videos.

  • @rosselli1986
    @rosselli1986 2 роки тому +1

    Thanks for putting this tutorial together, I appreciate it!

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

    you explain things easily & it's super understandable

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

      THANK YOU 🙏🏼

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

    Thank you, simple & straight forward

  • @hossainahmad6016
    @hossainahmad6016 2 роки тому +1

    Excellent.really love your style .................please explain us prototype and tools using system.

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

    Great video, you basically answered all of my questions about the auto layout section, thank you!!!

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

    Your teaching is great.🎉

  • @designwithlennox
    @designwithlennox 2 роки тому +1

    Really helped me understand Component

    • @AlienaCai
      @AlienaCai  2 роки тому

      So glad it helped 🙌 Took a long time to figure it out myself

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

    Bonkers tutorial - Thx Aliena!

  • @rajaiswarya1285
    @rajaiswarya1285 2 роки тому +1

    Really helped me to UNDERSTAND the autolayout

    • @AlienaCai
      @AlienaCai  2 роки тому +1

      I'm really glad that it helped 🙌

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

    valuable content 😊⭐⭐⭐⭐⭐ I have Learnt Something new. this will definitely help me in my Designig Career. Your way of explaining Figma is Fantastic I really like to watch your videos

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

    Your explanation skills are really good. I understand everything easily. Thank you so much. Please keep going :)

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

    Thanks. Always simple and straight to the point.🤞

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

    This was sooo helpful. Thank you Aliena!

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

    This was really helpful and made auto layout all the less intimidating. Thank you!

  • @TheToysoja
    @TheToysoja 2 роки тому +1

    Thanks for this video Aliena, it's clear and simple to understand. Can you do a follow up video explaining hug, fixed width etc. Thanks in Advance.

    • @AlienaCai
      @AlienaCai  2 роки тому

      Thank you so much! Your request is noted 👍

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

    This is very helpful, thank you!!! I have so many confusions when I try to edit components I got from the Figma community, now I understand why: they use auto layout frames over frames! Your video helped me learn so much, thank you again!!

  • @reynoldsj_
    @reynoldsj_ 2 роки тому +1

    Great tutorial! Very helpful, useful, and easy to understand. Thank you!

  • @talesfromthebible
    @talesfromthebible 2 роки тому

    much needed video...using components have always been confusing to me. Thank youuuu!🙌🙌

    • @AlienaCai
      @AlienaCai  2 роки тому

      I’m glad it helps! Keep up with your great work 🙌🙌

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

    omggg you're the best! you made everything simple 🥰

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

    This is so great! The tutorial is concise and very helpful. Thank you so much!

  • @juls2334
    @juls2334 2 роки тому +1

    💜💜💜💜💜💜Thanks for the tutorial, Aliena!

    • @AlienaCai
      @AlienaCai  2 роки тому

      You are welcome 🙌🙌

  • @mochichimmyy
    @mochichimmyy 2 роки тому +2

    AAAA THANK YOUU 😍😍😍 you didn't forget my request 💗💗💗

    • @AlienaCai
      @AlienaCai  2 роки тому +1

      You are very welcome! Thanks for letting me know about the request 🙌

  • @khushbudas4736
    @khushbudas4736 2 роки тому +1

    It's a very useful video thank you Aliena and ya I love your videos your way of giving info is great & easy to understand 😍❤🙂

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

    So helpful. Thank you for the video! Definitely helps me to understand this application.

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

    You teach so well.thank you

  • @derp812
    @derp812 2 роки тому +1

    Really helpful, nice video!

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

    Really clear explanation! Thank you so much!

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

    @5:40 I tried to delete the amount of text in the paragraph while following your tutorial, but the layout did not adjust automatically. I fiddled with the settings and it turned out that text settings must be set to 'Auto Height' (not 'Fixed', which is the default), in order for this to work.

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

    Clear and easy to understand tutorial so far Thank you.

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

    Just the video I was looking for, Thank you!!!!

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

    This was so helpful! Thank you so much for your video😊

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

    Best explanation! Thank you soooo much!

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

    Amazing! This is great instruction for all features!

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

    THANK YOU! Any update on the Figma course you're creating?

  • @ParvinderSingh-dl3rp
    @ParvinderSingh-dl3rp 2 роки тому +1

    Thank you for sharing your knowledge with us. Its a good informative video :)

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

    Thanks dear Alina

  • @azran1180
    @azran1180 2 роки тому +2

    Thanks. Next, grid system please

  • @blessedgirlera.5289
    @blessedgirlera.5289 10 місяців тому

    Always so helpful. Thank you!

  • @uxmadie
    @uxmadie 2 роки тому +1

    Thank for the great explanation

  • @iSwiftectioner
    @iSwiftectioner 2 роки тому +2

    Love this video, thank you! I feel like not getting a formal education in UX has really affected my set up and other minute things. However, your videos always fill that gap for me ❤
    I have a question off topic that I've been meaning to ask - where did you search for your contract roles? Was it job boards like LinkedIn, Indeed, or something else?

    • @AlienaCai
      @AlienaCai  2 роки тому +3

      Thank you! Regarding your question, I actually leverage my network for those roles. I suggest you to read the book “never eat alone”, this book forever changed my view on networking and have influenced me since then on getting opportunities through just - making friends.

    • @angelacalvin5790
      @angelacalvin5790 2 роки тому

      @@AlienaCai I am gonna check out thatt book! I found it on audible :)

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

    Thank you - this video was super helpful!

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

    thank you for this! this is so much helpful than the actual ones from figma lmao

  • @revanth7383
    @revanth7383 2 роки тому +1

    Hi there !!! Love this video... & The way you speak and boosts the content was soo good!!!!
    Can you pls tell me the way u learned UX design & also the course you chose and did?
    Can I expect a reply for this in the next video?
    Thank you!!! Love you from India !!!

    • @AlienaCai
      @AlienaCai  2 роки тому

      Of course, this is how I learned UX design: ua-cam.com/video/6xFGp7Dx__s/v-deo.html

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

    You explained everything perfectly, Thank you 💗

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

    Hi that's a nice tutorial, what you mean about the "old components", please?

  • @איילתשול
    @איילתשול Рік тому

    6:16 was good explanation

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

    Great video. Content is very well explained. Do you have one for explaining Constraints in Figma?

  • @carolaeugeniaruppel5347
    @carolaeugeniaruppel5347 2 роки тому +1

    Thanks ! you are the best !

  • @shamittrivedi5489
    @shamittrivedi5489 2 роки тому

    So Helpful, Thank you

  • @technocatdance
    @technocatdance 2 роки тому +1

    It would be great if you could show us a couple different ways to record videos on figma when showing a prototype in use, sometimes I still use XD because it is built right into their app natively

    • @AlienaCai
      @AlienaCai  2 роки тому +1

      This is a great point. I've noted that down.

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

    Excellent content!

  • @ujjwal3151
    @ujjwal3151 2 роки тому

    Thankyouu soo muchh for this video, Really helped me out : )

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

    amazing video! thank you so much

  • @claracourtin9305
    @claracourtin9305 2 роки тому +1

    Thank you so much !

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

    I'm the 1000th like 👀 🔥

  • @wanimumin-b6r
    @wanimumin-b6r 11 місяців тому

    i am really greatful thanks for this tutorial

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

      You are welcome!

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

    Can you please make a tutorial on variables😘 I really love your work

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

    thank you! that was very helpful :)

  • @PrincePatel-ce8mq
    @PrincePatel-ce8mq 2 роки тому +1

    Love this video, thank you! I

  • @stewiegriffindaddy
    @stewiegriffindaddy 2 роки тому +1

    can you show as how responsive designs can be made by auto layout resizing

    • @AlienaCai
      @AlienaCai  2 роки тому +1

      Great suggestion. Noted 👍

    • @stewiegriffindaddy
      @stewiegriffindaddy 2 роки тому

      @@AlienaCai Thanks for considering my suggestion :)

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

    May I know, what qualifications are required to become a UI/UX Designer and get ajob ?

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

    Is the use of "main component" and "sub-component" terminology accurate here? Isn't it more like a component and instances of that component?

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

      If you use a main component then that becomes an instance of the main component, you are correct!!

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

    thank you!

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

    Hey, How can i do auto layout for a body text or heading?

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

    you are the best

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

    hi..can anyone help me..i make some design using smart animation on drag..but i dont know how to download.

  • @freshhot
    @freshhot 2 роки тому +1

    Great

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

    PLEASE HELP: when I click auto layout for the caption + username + profile pic, it reformats everything and puts the profile pic on the right with everything else on the right... why?

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

      nevermind i figured it out lol

  • @maticsmentor
    @maticsmentor 2 роки тому +1

    😍😍😍

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

    thanks!!

  • @BeautifulMind-v6c
    @BeautifulMind-v6c 8 місяців тому

    ✌️

  • @abedin5689
    @abedin5689 2 роки тому +1

    Hello !😀

  • @satya8051
    @satya8051 2 роки тому +1

    I want I am working with you☺️🇮🇳

  • @julianmartinez7855
    @julianmartinez7855 2 роки тому +1

    I more easy thank you