UI Card Designed with Auto Layout - Figma Crash Course

Let's create a simple UI card with Figma's Auto Layout. We'll add an image, some metadata, and actions that expand, shrink down, keep the padding around it, and all the elements fall in place. Well, we'll use auto-layout to solve this.
This is part of a crash course on Figma's auto layout.
Duplicate the Project File:
www.figma.com/community/file/...
Download the Blush Plugin: www.figma.com/community/plugi...
Get the Unsplash Plugin: www.figma.com/community/plugi...
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...

[@SuperFrooty]

"How cool is that?!" I feel like these statements were more emphatic for things like the Paddy plugin in Sketch but what Figma is enabling us to do is so, so, so, so much cooler!!

[@saibotunkara]

Hi, I found you through Memecenter a long time ago and became a huge fan when your style, humor and musical taste made a hugeimpact on me. Fastforward to last year, I did a 180 and started a UI/UX Master course and I really want to learn as much as I can about Figma for my future and now I feel like I'm having the good kind of weird dream because after all these months of researching I JUST found this on my recommended! THE Pablostanley made figma tutorials??? Thank you for everything!!!

[@conmdemanolo]

This is awesome! Thanks for sharing this "crash" course, great content and better instructor!

[@vanessavanbleisem4795]

I thoroughly enjoy your content! Thank you for the step-by-step breakdown!

[@michellezhu1559]

Thanks for the step-by-step tutorial! It cleared things up! Cheers Pablo!

[@franceslim9561]

Is a great video for those who are new to figma !!! I learn a lot !! Looking forward to see more tutorial video like this from you !!

[@HitanshuSahu]

I love your talking accent, its makes everything so simple and so fun to learn.

[@brettcooper7871]

hands down the best tutorial of this feature!

[@jackcrosby8083]

You're a legend! These help so much. Very well explained. Thank you.

[@bpsujith]

Finally, I found it. Thanks a lot. Explained very nicely. Really cool

[@chvrleshd]

Best Auto layout tutorial!

[@mariaveronicasonzini9788]

Amazing videos Pablo! thanks

[@theLaurawind]

Amazing tutorial, I enjoyed this so much. Thanks!!

[@salauddineshad7048]

Very nicely briefed. Thanks for sharing such an amazing tutorial

[@slack.]

Finally something I understood. Honestly mastering auto layout is a flex

[@hihi9674]

Good stuff. I'm having trouble with auto layout. This video helped me. Subscribed!

[@mhobabs]

Great tutorial. Thank you!

[@sirinadler954]

I am a graphic design professor and have been teaching for many years. You are a wonderful communicator and teacher. By introducing small bits of information, one at a time, I can easily follow your lead. Figma is similar to Illustrator in some ways, and quite different in others. I'm fascinated by the concept of responsive design and wonder if there are instances where the complexity of the layout makes it impossible to work this way or doesn't work well. Eventually, I will find out the answer!

[@kehindeifeoluwa4778]

very helpful video, best I've seen on this topic. thank you for clarifying

[@agustinfernandez5688]

Super cool these thanks!

[@johnrapiel6746]

I sound like a broken record by now but you really make learning fun, Pablo.

[@oluwatobiafolabi2344]

he does!

[@GetFitWith_Kola]

you explain so well and i comprehended it

[@islandsofvenus]

Great video!! Thanks so much!!

[@jegalex]

Pablo's days have 38 hours. The days' hours auto-layout to his workload.

[@alejandrocarlenaon8523]

Gracias Pablo, ¡son geniales tus videos!

[@suman121069]

Dope, You Rock Man. Very well explained. Thank you

[@batatatasfritas]

Bloody brilliant, thanks for this

[@nikitasingh2656]

thank you so much for communicating so well. It really helped!!

[@rohitdhiman4963]

This was the easiest and simplistic way. Learned something.

[@user-nn8oc8we5e]

Wow, its awesome tutorial, ton of likes and respect for it!❤️

[@seans5710]

Another great one. Thanks!

[@DeepfriedBaby]

Finally a Figma tutorial without an annoying host or one that never gets to the point. Thank you!

[@adventuresoftrip1136]

Thanks man! very clear tutorial

[@sundaybesideyou]

Thanks! It's really helpful

[@sasaivanovic5126]

best auto layout tutorial on the web!!!!!!

[@Hektor1020]

finally, someone can explain it logically... GG

[@aniketjoshi7518]

Ya, that's right, now I got it properly

[@madhoundes]

GG its look like you are gamer 😄

[@emircs2442]

ggwp

[@collinsk8754]

Great tutorial. Great energy.

[@Joanne0728]

You are a life saver.. thank you for the session.

[@sirbirre]

Thank you again PABLO !!!

[@Mvgrafico]

Best video in the topic. Nice and thanks.

[@hilarysmartt5809]

I love! thank you so much I learnt alot

[@ShyBandGeek]

This was so helpful, thank you

[@SketchTogether]

Glad it was helpful!

[@nargizakhalmuhamedova3929]

Amazing!!!! Thanks a lot!!!!

[@norailves6823]

Thank you so much for your wisdom, man. Finally I can understand this black magic a little better %)

[@Anastasia-ze5xz]

Omg, that's cool! Thanks!

[@shanthanbomma]

You're a great teacher.

[@tobiasstrollo]

Excellent - thank you!

[@dave3k]

You’re such a good teacher. Will you be making a tutorial about variants?

[@vloraberisha3354]

Very niceeee!

[@Sophiecamarula]

Awesome!!

[@ajitavisen]

Amazing video ! thankyou.

[@i-spy-ty]

SUPER SUPER SUPER HELPFUL!!

[@gauravidesigns]

Great work bro , love u bro

[@leephom5499]

SOOO GOOD AND EASY TO FOLLOW AND GOOD TIPS THANKS

[@Adlip_Kun]

Thank you for the tutorial

[@zacheverett9937]

Thank you! In the future it could be helpful to see the Layers tab on the left-hand side as well. Excellent content though

[@evgenyzakharov3759]

Very useful👍

[@glorylaurencius4334]

amazaing. thank you for the tutorial

[@EhabSalahh_]

Perfect thank you 🙏

[@CitoTalvi]

great video

[@theolashileroyal1119]

Was really helpful 😊😊

[@shahdkh391]

You are wonderful You are wonderful👏

[@smartsteevy]

Thank you

[@marzbitenhaussen]

excellent

[@osherezra8460]

Thank you awesome Tutorials keep it up. can you do a tutorial about applying Color Theme to projects please!! cheers

[@riskzerobeatz]

Nice!

[@PeteMugarteguii]

Sweet!

[@onaykeren7350]

nice

[@thelastjess]

Great tutorial! Anyone know how to add design elements on top of the image hero itself. Not as a section on top like in this video. I have a UI card where I have avatars showing on the top right corner within the hero image. But when I add it on my card it pushes everything all the way to the top. Anyone know hot to fix this?

[@fahdalhalabi6134]

Great

[@uniqueux]

It's an Auto Layout inside an Auto Layout inside an Auto Layout inside an Auto Layout. I get it!

[@fcallophoto]

basically a inside a inside a

[@yaunghein3395]

@@fcallophoto with flex display

[@teaspoonful973]

Thank you! This video was really helpful. Also, I noticed that you were able to jump up or down 8 pixels with one click. Can you share this shortcut?

[@jerryrodriguez1352]

If you go into Preferences and go down to Nudge amount, you can change # of pixels you move by!

[@andreamolte]

I don't know why, but when i try to resize the auto-layout generated from the other auto-layouts i don't have the "fill container" option, but i can find it if i just resize the single auto-layout. Does anyone run into the same problem?

[@sunnyhaladker1540]

What font did you use?

[@h.b.1315]

Quick question! I've done an auto layout for 3 cards arranged horizontally. These 3 cards have varying width sizes. In order for them to behave responsively, I set the width and height to fill (that worked perfectly for the pervious row of 4 cards the same size). But now, when I set them to fill, Figma enlarges the thin card so it's equal in width size to the other cards it's in auto layout with.I don't want that but "fixed" and "hug" keep the cards stagnant when shrinking the screen. I've been trying to problem solve this for over 20 hours and can't find a youtube video or article that addresses this. If you have any suggestions at all, I would really, really appreciate it.

[@javeediqbal947]

cool

[@returnZeroo]

Wow, its css flex box 😳😳

[@louisfrancis6039]

My bottom layer is detaching from the frame, do you know why?

[@moacirramos2668]

we could create something like that for local services, with simple tinder or wattsapp functionality

[@zeeshanmh215]

AwwTow Layout

[@someshghanchekar6252]

WE CAN USE THIS AUTO LAYOUT FOR RESPOSIVE WEB BUT WHEN MAKE WEBSITE THAN CLICK TO AUTO LAYPUT ALL ELEMENTS SEPRATED

[@mulnivasi2024]

ayushman khurana

[@ArcaneArray]

Thank you

[@nakreid771]

Thank you