Credit Card Form with Auto Layout - Figma Crash Course

Let's design a basic credit card form using auto layout on everything. Seriously, it's all a lot of nested auto layouts! lol
Duplicate the resource file:
www.figma.com/community/file/...
Install the Blush plugin:
www.figma.com/community/plugi...
Watch the full Auto Layout Crash Course:
• Figma's Auto Layout
Hey! If you're into what you've seen and want to explore even more, check out our 'Master Gorgeous UI Design' course. This is the last chance to get a discounted price on the course: pablostanley.gumroad.com/l/ui...

[@salwam833]

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

[@maciejrojecki3560]

same

[@mukulishwar2737]

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

[@milililie]

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

[@jimmykowalski3669]

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

[@Anastasia-ze5xz]

Thanks for this amazing course, Pablo!

[@ania5078]

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

[@rahultupe804]

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

[@mattbolt9487]

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

[@txboi1805]

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

[@exenecoulsen9629]

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

[@MrJotape123]

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

[@rodrigo-santander]

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

[@susangoodwin7419]

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

[@sofiaaquinogomez6947]

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

[@woshiairy]

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

[@aderonx]

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

[@Carroty_Peg]

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

[@qjay56]

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.

[@paperfacesingold2]

Awesome course! Thanks a lot, Pablo!

[@Adlip_Kun]

Thank you for this amazing course

[@gretarthorgudjonsson965]

Thank you Pablo!! Much love

[@TerekkiTerekki]

Thanks - like your style of presentation

[@muntasirmahmud8153]

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

[@bpsujith]

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

[@official_pupatee]

You are the best tutor , and fun

[@agustinfernandez5688]

Loving this! nice tutorial

[@nimotaogunlana6368]

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

[@minalmukarande6108]

I actually understand now how auto layout works😃 thank you

[@nooraniali]

Amazing stuff. I learned a lot.

[@adavidov]

Awesome demo!

[@chandnianand584]

Awesome!! Very well explained

[@samankhamooshi1834]

It helps me a lot. Thanks a million

[@josemartins4662]

Very helpful! Thanks for the video

[@aniketjoshi7518]

you are a master of Autolayout

[@suman121069]

awesome tutorial, big help :) you rock man

[@andrekiousevans4160]

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

[@FelipeSousaDev]

really really nice! thanks a lot!

[@iralizard]

Amazing!!!! Thanks!!!

[@ramazanguler6066]

thank you for best lesson

[@keunekeune]

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

[@produktanci]

Figma Maria, your autolayout is hot

[@vuagnouxyoann44]

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 ?

[@marabizarria7078]

Wonderful!!!

[@amitbiswas54]

sir you are great......

[@ishmaelsunday6238]

Thanks great video

[@gustavolepe741]

Gracias Pablito

[@CanalTresGames]

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

[@bethdeweystanford857]

I was thinking the same!

[@jenya4009]

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"?..

[@stanmx]

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 👊🏼

[@Mittenzzs]

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?

[@titanhedric3431]

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?

[@manashkashyap7780]

When are you uploading other parts of the course?

[@tadswiech3043]

the best

[@MOHAMEDHASSAN-fk9jv]

Great

[@Powerplugz]

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

[@sandeeplama3905]

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??

[@bhavyalalwani5565]

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

[@Underhills]

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.

[@nathantufts-brown8608]

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?

[@nathantufts-brown8608]

nevermind, just figured it out

[@emmanuelolubodun4013]

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

[@gpulhoa]

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?

[@toyourattention]

how did you put the dots at 7:46 ?

[@kathvizcarra6082]

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

[@eSpidey007]

Pablo for el presidente !!

[@Kimardszn]

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]

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

[@HH003]

Fill the container people...