Credit Card Form with Auto Layout - Figma Crash Course

แชร์
ฝัง
  • เผยแพร่เมื่อ 26 ธ.ค. 2024

ความคิดเห็น • 75

  • @salwam833
    @salwam833 3 ปีที่แล้ว +4

    Im somewhat finding auto layout and constraints very hard and confusing to grasp and work with but your tutorials are the only one that is giving me hope that I can get this! thank you

  • @mattbolt9487
    @mattbolt9487 ปีที่แล้ว

    You are the bob ross of Figma auto layouts! Awesome work. These videos are fun.

  • @milililie
    @milililie 4 ปีที่แล้ว +9

    Really nice tutorial, I like that you show in the beginning what you are about to make, it makes it easier to follow.

  • @qjay56
    @qjay56 2 ปีที่แล้ว

    Another Great video. When you changed the icon from the credit card to the More information logo, that little step was the cherry on top. Another way to work smart in Figma.

  • @moicefalo
    @moicefalo 2 ปีที่แล้ว

    Finally, a dynamic and very, very explanatory tutorial. I'm lovin 'it.

  • @andrekiousevans4160
    @andrekiousevans4160 3 ปีที่แล้ว +5

    how did you type the dots like that? 7:44

  • @rahultupe804
    @rahultupe804 3 ปีที่แล้ว +1

    now I understand auto-layout much better. Thank you for this amazing series.

  • @txboi1805
    @txboi1805 3 ปีที่แล้ว +1

    Auto layout saved my life! Have learned so much from your tutorials. Thanks, Pablo!

  • @mukulishwar2737
    @mukulishwar2737 3 ปีที่แล้ว +11

    Your tutorials finally made me able to grasp auto-layout thanks Pablo! Would you please make a design system tutorial using auto-layout, variants please? Your explanations are super

  • @KulwantSingh-ic8uz
    @KulwantSingh-ic8uz 2 ชั่วโมงที่ผ่านมา

    Great video on auto layout....thanks!

  • @minalmukarande
    @minalmukarande 2 ปีที่แล้ว

    I actually understand now how auto layout works😃 thank you

  • @ania5078
    @ania5078 3 ปีที่แล้ว +2

    Hi Pablo! Thanks for such amazing tuts! I'm learning so much from you. You are the BEST!

  • @official_pupatee
    @official_pupatee 6 หลายเดือนก่อน

    You are the best tutor
    , and fun

  • @exenecoulsen9629
    @exenecoulsen9629 3 ปีที่แล้ว

    Thanks so much for the series. I watched all the videos. I now understand autolayout!

  • @Adlip_Kun
    @Adlip_Kun 5 หลายเดือนก่อน

    Thank you for this amazing course

  • @nimotaogunlana6368
    @nimotaogunlana6368 2 ปีที่แล้ว +1

    Interesting 😊. Well understood and it helped a lot!!!!!. Thank you so much ☺️.

  • @aniketjoshi7518
    @aniketjoshi7518 3 ปีที่แล้ว

    you are a master of Autolayout

  • @woshiairy
    @woshiairy 3 ปีที่แล้ว

    Very very cool! Knowing this will save me so much time in the long run. Thank you for the video

  • @Carroty_Peg
    @Carroty_Peg 3 ปีที่แล้ว

    I'm doing all your videos to help me learn. Thank you a lot!!

  • @TerekkiTerekki
    @TerekkiTerekki 3 ปีที่แล้ว

    Thanks - like your style of presentation

  • @susangoodwin7419
    @susangoodwin7419 3 ปีที่แล้ว +1

    Such a helpful video, just saved me so much time! Thank you!

  • @jimmykowalski3669
    @jimmykowalski3669 4 ปีที่แล้ว +1

    Great series Pablo!
    Really useful examples and very well explained. Love it.

  • @gretarthorgudjonsson965
    @gretarthorgudjonsson965 3 ปีที่แล้ว

    Thank you Pablo!! Much love

  • @rodrigo-santander
    @rodrigo-santander 3 ปีที่แล้ว

    ¡Muchas gracias Pablo! Con tus cursos he aprendido mucho más que con otros que compré para empezar con Figma

  • @muntasirmahmud8153
    @muntasirmahmud8153 3 ปีที่แล้ว

    Your video is really amazing and I learn a lot of new things from you... Thanks man..

  • @paperfacesingold2
    @paperfacesingold2 3 ปีที่แล้ว

    Awesome course! Thanks a lot, Pablo!

  • @aderonx
    @aderonx 2 ปีที่แล้ว

    Really cool tutorial, enjoyed the explanations and was easy to follow! Thanks

  • @produktanci
    @produktanci 4 ปีที่แล้ว +10

    Figma Maria, your autolayout is hot

  • @keunekeune
    @keunekeune 3 ปีที่แล้ว +2

    1:42 Figma's mission statement in a nutshell haha

  • @bpsujith
    @bpsujith 3 ปีที่แล้ว

    Thank you very much. I have been looking for this.

  • @sofiaaquinogomez6947
    @sofiaaquinogomez6947 4 ปีที่แล้ว

    Your tutorials are the best!! Thanks for sharing ❤️❤️❤️

  • @CanalTresGames
    @CanalTresGames 3 ปีที่แล้ว +1

    I really like your videos, they are awesome, man, and you talking, kinda remind me Bob Ross kkk, i love it

  • @Anastasia-ze5xz
    @Anastasia-ze5xz 4 ปีที่แล้ว

    Thanks for this amazing course, Pablo!

  • @agustinfernandez5688
    @agustinfernandez5688 3 ปีที่แล้ว

    Loving this! nice tutorial

  • @toyourattention
    @toyourattention ปีที่แล้ว

    how did you put the dots at 7:46 ?

  • @nooraniali
    @nooraniali 2 ปีที่แล้ว

    Amazing stuff. I learned a lot.

  • @stanmx
    @stanmx 4 ปีที่แล้ว

    Amazing the thing you can design with auto layer 🙌🏼 --I like you use variants in this example, is the first time i see it in action, i hope you use more in the future. #TeamFigmaMaria 👊🏼

  • @titanhedric3431
    @titanhedric3431 2 ปีที่แล้ว

    Great Tutorial, I just want to know what is this menu you select to change the icon from?! 7:51
    Is that a component library and if so how do you make every icon respond to that that you can switch icons so easily?

  • @samankhamooshi1834
    @samankhamooshi1834 2 ปีที่แล้ว

    It helps me a lot. Thanks a million

  • @manashkashyap7780
    @manashkashyap7780 3 ปีที่แล้ว

    When are you uploading other parts of the course?

  • @chandnianand584
    @chandnianand584 3 ปีที่แล้ว

    Awesome!! Very well explained

  • @suman121069
    @suman121069 3 ปีที่แล้ว

    awesome tutorial, big help :) you rock man

  • @josemartins4662
    @josemartins4662 3 ปีที่แล้ว

    Very helpful! Thanks for the video

  • @vuagnouxyoann44
    @vuagnouxyoann44 3 ปีที่แล้ว +1

    Hello Pablo, thanks for sharing this useful crash course !
    at 9:00, the "Fill Container" resizing mode is now "Scale" in the Constraint and Resizing window isn't it ?

  • @Powerplugz
    @Powerplugz 2 ปีที่แล้ว

    How can I make input forms editable when presenting the mockup?

  • @Underhills
    @Underhills 2 ปีที่แล้ว

    7:50 - Unable to add that icon, it snaps outside the whole section. I don't have the dropdown icon menu like you have there, I have to add it manually by dragging it in and it refuses to become part of that component layer structure.

  • @jenya4009
    @jenya4009 2 ปีที่แล้ว

    awesome tutorial, thanks!! I wonder why at 9:20 you are changing the resizing property to "fill the container" if you still have to resize the input field manually and the property automatically changes back to "fixed width"?..

  • @gpulhoa
    @gpulhoa 3 ปีที่แล้ว

    I'm not able to change the icon like you did at 07:52, the button to look for another icon is inactive, can you help me?

  • @gustavolepe741
    @gustavolepe741 3 ปีที่แล้ว

    Gracias Pablito

  • @ramazanguler6066
    @ramazanguler6066 3 ปีที่แล้ว

    thank you for best lesson

  • @adavidov
    @adavidov 4 ปีที่แล้ว

    Awesome demo!

  • @bhavyalalwani5565
    @bhavyalalwani5565 3 ปีที่แล้ว

    can someone tell me why did he put the input field in a component

  • @iralizard
    @iralizard 2 ปีที่แล้ว

    Amazing!!!! Thanks!!!

  • @nathantufts-brown8608
    @nathantufts-brown8608 3 ปีที่แล้ว

    at the 5:03 mark with the hug contents adjustment and it's forcing all of the elements inside the text field to the center, instead of the the far left. Thoughts?

  • @sandeeplama3905
    @sandeeplama3905 2 ปีที่แล้ว

    while adding icons in CVV whole input field icon change and the three dot ins not in center im using ... this
    ?? is there anything wrong??

  • @emmanuelolubodun1
    @emmanuelolubodun1 3 ปีที่แล้ว

    How you swapped the card icon to info icon still confuses me. thanks for the tutorial, I am just learning auto layout and so far your videos are more explanatory. please shed more light and make me less confused

  • @FelipeSousaDev
    @FelipeSousaDev 3 ปีที่แล้ว

    really really nice! thanks a lot!

  • @amitbiswas54
    @amitbiswas54 3 ปีที่แล้ว

    sir you are great......

  • @Mittenzzs
    @Mittenzzs 3 ปีที่แล้ว

    great tutorial, however when i resize so the frame is 200 w or less, the text inputs (1234, mm/yy, etc) get squished and are not responsive. ive been trying to figure out how to get them to respond correctly so that the text is always horizontal and within the bounds of the input frame but im stuck. anyone know?

  • @ishmaelsunday6238
    @ishmaelsunday6238 3 ปีที่แล้ว

    Thanks great video

  • @marabizarria7078
    @marabizarria7078 3 ปีที่แล้ว

    Wonderful!!!

  • @MOHAMEDHASSAN-fk9jv
    @MOHAMEDHASSAN-fk9jv 3 ปีที่แล้ว

    Great

  • @tadswiech3043
    @tadswiech3043 3 ปีที่แล้ว

    the best

  • @Kimardszn
    @Kimardszn 3 ปีที่แล้ว

    How did you make your hidden/deleted icon reappear? You changed the icon in the CCV input field by making the icon reappear, how did you do that?

    • @mukulishwar2737
      @mukulishwar2737 3 ปีที่แล้ว

      In the layers panel, he clicked on the eye icon for that icon

  • @eSpidey007
    @eSpidey007 3 ปีที่แล้ว

    Pablo for el presidente !!

  • @kathvizcarra6082
    @kathvizcarra6082 4 ปีที่แล้ว

    🙌🏻🙌🏻🙌🏻❤️❤️❤️

  • @HH003
    @HH003 3 ปีที่แล้ว

    Fill the container people...