UI Card Designed with Auto Layout - Figma Crash Course
Вставка
- Опубліковано 27 лип 2024
- 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...
"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!!
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!!!
This is awesome! Thanks for sharing this "crash" course, great content and better instructor!
Pablo's days have 38 hours. The days' hours auto-layout to his workload.
Thanks for the step-by-step tutorial! It cleared things up! Cheers Pablo!
I love your talking accent, its makes everything so simple and so fun to learn.
I thoroughly enjoy your content! Thank you for the step-by-step breakdown!
I sound like a broken record by now but you really make learning fun, Pablo.
he does!
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 !!
You're a legend! These help so much. Very well explained. Thank you.
finally, someone can explain it logically... GG
Ya, that's right, now I got it properly
GG its look like you are gamer 😄
ggwp
Finally, I found it. Thanks a lot. Explained very nicely. Really cool
Amazing tutorial, I enjoyed this so much. Thanks!!
hands down the best tutorial of this feature!
Very nicely briefed. Thanks for sharing such an amazing tutorial
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!
very helpful video, best I've seen on this topic. thank you for clarifying
Finally a Figma tutorial without an annoying host or one that never gets to the point. Thank you!
Amazing videos Pablo! thanks
Good stuff. I'm having trouble with auto layout. This video helped me. Subscribed!
Finally something I understood. Honestly mastering auto layout is a flex
Gracias Pablo, ¡son geniales tus videos!
Best Auto layout tutorial!
Bloody brilliant, thanks for this
Another great one. Thanks!
Wow, its awesome tutorial, ton of likes and respect for it!❤️
Great tutorial. Thank you!
Dope, You Rock Man. Very well explained. Thank you
You’re such a good teacher. Will you be making a tutorial about variants?
Super cool these thanks!
thank you so much for communicating so well. It really helped!!
Thanks man! very clear tutorial
This was the easiest and simplistic way. Learned something.
Great video!! Thanks so much!!
You are a life saver.. thank you for the session.
Great tutorial. Great energy.
Omg, that's cool! Thanks!
you explain so well and i comprehended it
best auto layout tutorial on the web!!!!!!
Thanks! It's really helpful
Thank you so much for your wisdom, man. Finally I can understand this black magic a little better %)
Excellent - thank you!
Thank you again PABLO !!!
You're a great teacher.
Amazing video ! thankyou.
Best video in the topic. Nice and thanks.
Amazing!!!! Thanks a lot!!!!
I love! thank you so much I learnt alot
Great work bro , love u bro
SOOO GOOD AND EASY TO FOLLOW AND GOOD TIPS THANKS
Very niceeee!
SUPER SUPER SUPER HELPFUL!!
Awesome!!
Thank you! In the future it could be helpful to see the Layers tab on the left-hand side as well. Excellent content though
Thank you for the tutorial
Very useful👍
Perfect thank you 🙏
Was really helpful 😊😊
amazaing.
thank you for the tutorial
This was so helpful, thank you
Glad it was helpful!
great video
Thank you awesome Tutorials keep it up. can you do a tutorial about applying Color Theme to projects please!! cheers
Nice!
Sweet!
Thank you
excellent
You are wonderful
You are wonderful👏
It's an Auto Layout inside an Auto Layout inside an Auto Layout inside an Auto Layout. I get it!
basically a inside a inside a
@@fcallophoto with flex display
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?
nice
Great
What font did you use?
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?
If you go into Preferences and go down to Nudge amount, you can change # of pixels you move by!
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?
My bottom layer is detaching from the frame, do you know why?
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.
we could create something like that for local services, with simple tinder or wattsapp functionality
cool
Wow, its css flex box 😳😳
WE CAN USE THIS AUTO LAYOUT FOR RESPOSIVE WEB BUT WHEN MAKE WEBSITE THAN CLICK TO AUTO LAYPUT ALL ELEMENTS SEPRATED
AwwTow Layout
ayushman khurana
Thank you
Thank you