Figma tutorial for beginners - auto layout & components

Поделиться
HTML-код
  • Опубликовано: 21 авг 2022
  • Link to Figma: psxid.figma.com/mtvfdvfjvpps
    Link to Figma Professional Plan: psxid.figma.com/sp3ulqgt744y-...
    Here's a #figmatutorial that explains components and auto layout in 10 mins. As a UIUX designer, these two #figma functions often cause me headache. This 10-min videos pretty much summarized the headache I went through in years and how to fix them. There are more to cover when it comes to components, such as creating variants for a component, please comment a "✌️" if you want to lean more.
    Components and auto layout comes in handy when you are creating hi-fi prototypes, but I don't suggest using it for wireframes. To learn more about wireframes, check out this video: • Figma UX tutorial for ...
    My insta: / thealienacai
    ‪@Figma‬
  • НаукаНаука

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

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

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

  • @ronindevninja
    @ronindevninja Месяц назад +6

    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.

  • @PP-po3ri
    @PP-po3ri Год назад +24

    Please, do more videos! You are an amazing teacher

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

      Thank you so so much for your support!

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

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

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

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

  • @axl2531
    @axl2531 Год назад +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 Год назад +5

    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  Год назад

      I’m so so glad that it helped!

  • @antoniomendezrodriguez2207
    @antoniomendezrodriguez2207 5 месяцев назад

    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!

  • @depechetoi
    @depechetoi Год назад +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!

  • @fabriccioman
    @fabriccioman 11 месяцев назад

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

  • @osicapasachhe9270
    @osicapasachhe9270 13 дней назад

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

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

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

    Best explanation on RUclips 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  Год назад +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.

  • @angelacalvin5790
    @angelacalvin5790 Год назад +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  Год назад +1

      You're so welcome! Your request is noted ~

  • @TheSilverpictures
    @TheSilverpictures Год назад +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  Год назад

      I’m so glad this helped a bit 🥰🥰

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

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

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

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

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

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

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

  • @jeanina_777
    @jeanina_777 20 дней назад

    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.

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

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

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

    Thanks. Always simple and straight to the point.🤞

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

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

    Thanks for putting this tutorial together, I appreciate it!

  • @Joanna-kt3li
    @Joanna-kt3li Год назад +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 ?

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

    Thank you, simple & straight forward

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

    Bonkers tutorial - Thx Aliena!

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

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

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

    Really clear explanation! Thank you so much!

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

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

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

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

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

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

  • @Sicking-duck
    @Sicking-duck Год назад

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

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

    You teach so well.thank you

  • @blessedgirlera.5289
    @blessedgirlera.5289 4 месяца назад

    Always so helpful. Thank you!

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

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

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

    This was sooo helpful. Thank you Aliena!

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

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

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

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

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

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

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

    Amazing! This is great instruction for all features!

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

    super informative, thank you so much. Your channel is a gem!

  • @emmanuelochuko3204
    @emmanuelochuko3204 5 месяцев назад

    Your teaching is great.🎉

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

    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)

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

    you explain things easily & it's super understandable

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

      THANK YOU 🙏🏼

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

    waiting for next part , i love you

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

    Really helpful, nice video!

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

    Best explanation! Thank you soooo much!

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

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

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

      You are welcome 🙌🙌

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

    amazing video! thank you so much

  • @LydiaFox-jv1kw
    @LydiaFox-jv1kw Год назад

    Thank you - this video was super helpful!

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

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

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

    Really helped me understand Component

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

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

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

    You explained everything perfectly, Thank you 💗

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

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

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

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

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

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

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

    thank you! that was very helpful :)

  • @khushbudas4736
    @khushbudas4736 Год назад +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 😍❤🙂

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

    So Helpful, Thank you

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

    Thanks ! you are the best !

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

    Really helped me to UNDERSTAND the autolayout

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

      I'm really glad that it helped 🙌

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

    Excellent content!

  • @ParvinderSingh-dl3rp
    @ParvinderSingh-dl3rp Год назад +1

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

  • @xiaohanzhang4907
    @xiaohanzhang4907 8 месяцев назад +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  8 месяцев назад

      Glad it was helpful! Will try to do more 👍

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

    Thank for the great explanation

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

    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

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

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

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

    Thank you so much !

  • @user-bk3qv2nm1x
    @user-bk3qv2nm1x 5 месяцев назад

    i am really greatful thanks for this tutorial

    • @AlienaCai
      @AlienaCai  5 месяцев назад

      You are welcome!

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

    Thanks dear Alina

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

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

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

    you are the best

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

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

  • @PrincePatel-ce8mq
    @PrincePatel-ce8mq Год назад +1

    Love this video, thank you! I

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

    I'm the 1000th like 👀 🔥

  • @user-fs5lr9nz7p
    @user-fs5lr9nz7p Год назад

    6:16 was good explanation

  • @iSwiftectioner
    @iSwiftectioner Год назад +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  Год назад +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 Год назад

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

  • @TheToysoja
    @TheToysoja Год назад +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  Год назад

      Thank you so much! Your request is noted 👍

  • @derlerner2683
    @derlerner2683 12 дней назад

    thanks!!

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

    Great

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

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

  • @revanth7383
    @revanth7383 Год назад +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  Год назад

      Of course, this is how I learned UX design: ruclips.net/video/6xFGp7Dx__s/видео.html

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

    Thanks. Next, grid system please

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

    😍😍😍

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

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

  • @dwishmytimoleon4338
    @dwishmytimoleon4338 14 дней назад

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

  • @technocatdance
    @technocatdance Год назад +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  Год назад +1

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

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

  • @user-pj7mq7uo6k
    @user-pj7mq7uo6k 2 месяца назад

    ✌️

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

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

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

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

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

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

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

      Great suggestion. Noted 👍

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

      @@AlienaCai Thanks for considering my suggestion :)

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

    Hello !😀

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

    I more easy thank you

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

    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 8 месяцев назад

      nevermind i figured it out lol

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

    I want I am working with you☺️🇮🇳

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

    ❤❤❤❤❤爱死了

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

    PLEASE You must use BLACK background PLEASE

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

      Hahaha I actually just changed my Figma background to black last week! 👍

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

      @@AlienaCai thank you so much. You vídeo about auto layout Is very useful, back white background Is horrible. Jajajaja. 👍😉

  • @tatyanamazurova9867
    @tatyanamazurova9867 4 дня назад

    it is so fast, couldn't understand

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

    Clear and easy to understand tutorial so far Thank you.

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

    oh hey, thought about you. I'm applying to be a Flight Attendant and as I was applying I saw that the airline I was applying for is seeking UX designers. it's a remote job and the company is brand new but owned by the former founder of Jetblue. Essentially its a booigse Spirit Air
    it's called Breeze Airlines...may be worth looking into and the position is remote as well
    enjoy your videos and slowly getting through my ux grow with google

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

      Thank you so much for sharing! I’ll note this down. 🙏🙌 All the best with your career and flight attendant journey!

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