Responsive Card Component UI Design in Figma with ease - Figma Tips and Tricks Tutorial
Вставка
- Опубліковано 21 чер 2022
- Responsive Card Component UI Design in Figma with Ease - Figma Tips and Tricks Tutorial
In this video, you will learn how to design responsive Cards which is a popular UI feature introduced by Google Material Design. So to design a card that can expand vertically with more text and can be resized. I am sharing tips and tricks to design a responsive card UI in Figma. Auto Layout will help you design a Card Component easily in Figma with responsive resizing
#uxdesign #learnuxid #ui/ux
--------------------------------------------------------------------------------
I teach UI UX Design to more than 100K+ students from 186 countries. Learn and improve
your career as UX/UI Designer and upgrade it.
Watch FREE - 5h Video Course - Visual Design for UI Designers & Developers
► learnuxid.com
17+ Pro UI UX Design Course bundle for $99 (Biannual)
► learnuxid.com
Kit Camera, Microphone used in the making of this Video
►kit.co/ahsanpervaiz/youtube-d...
Book me as your Mentor (only 2 slots)
► mentorcruise.com/mentor/muham...
Follow me here, Thanks
--------------------------------------
learnuxid.com (website)
/ learnuxuidesign
----------------------------------------------------
/ mahsanidrisi
/ mahsanidrisi
/ muhammad-ahsan-pervaiz...
dribbble.com/ahsanidrisi
www.behance.net/ahsanidrisi
I swear to Allah there are 3 things that I learn from this video that changed my work and the process, for real. I was struggling for some moment but not anymore. Thank you.
Glad to hear that. MashaAllah
Ive watched ton of videos on auto layout since its was introduced in Figma. I'm so glad you made it really simple and so comprehensive. Thank you so much.
Oh, that is something great for me. I try to simplify things
I've been watching tutorials for the last hour on auto layouts for cards, but this is genuinely the only one that's been very helpful. Thank you for sharing your knowledge!
Thanks brother
I love your videos so much, easy to understand and straight to the point. Highly recommendable!!!
I tend to simplify things
Thank you for the great tutorial! I was actually learning how to do this from Figma's design system videos, but the instructor wasn't exactly clear. You clarified a lot of the points that I missed.
You are welcome. I try to simplify things as much as possible
This new auto sizing was driving me mad whilst following a (now outdated) course - but now it makes sense. Thank you!
Glad it helped you
Thank you so much for this tutorial. It's my first video and I'm definitely going to watch more💙
Watch this whole playlist
Hi, first time seeing your video. I learned a lot and you describe very clear in step-by-step. Thank you so much! subscribed！😄
Thanks for subbing!
Love it, good job man, you realy helped a lot!
Thanks a lot
Thanks so much. So easy to understand
Glad to help
Thank you so much !!! Cheers from Brazil.
Wish you the best from Pakistan
really helpful please make few more videos for besic or beginners like me thank you
thank you for this quick trick with us .
Keep watching
Subscribed!!! Amazing
Awesome! Thank you!
I love Figma Tutorials 💕 We want more and more about Figma 💗
Yes, working on this
Thank you so much! So useful 🙌 I love to hear the birds in the background 🐦
That is just outside my windows. I have a big shady mulberry tree and few longifolio free like 6 of them so a lot of birds come
This was very helpful, thank you
Thanks
Thank you so much, this was so clear and helpful!
You are welcome
Thankyou for sharing :)
Welcome
quality content! plus one subscriber
You are welcome, David. Just trying to make everything easier and simpler
Very Nice Lecture Thank you so much for shearing
You are most welcome
Thanks from Kazakhstan
Most welcome! brother
100 times thanks you sir 🎉....❤
Most welcome
Great tutorial. Really easy to follow! Just wondering… How would you lock the scale of an image on a responsive site? Ie. Say I like the way the boxed water image is cropped (at 11:50) and when I make the screen bigger, I want the image to get proportionally bigger and maintain the same cropping. Is it possible to do this? So many websites function like this (even UA-cam!)
Great suggestion! I think normally it is how you fit the image inside the container. Fill or Fit so it you try to scale the container, the image inside will automatically fill the space. Try your image with fit or fill settings it will work
@@learnuxid Thanks. I'm actually referring to the container itself. Ie. if you extend your browser on most sites and you have a square image, the image will stay in a square shape but the square will get bigger.
Insightful video bro, very clear and easy to follow along. One question I have, how do you make the image fit the entire width of the event card? Jzkk
I think its related to image properties you set from right side panel to FIT
@@learnuxid Thank you bro
Is there a rule of thumb for character limits for card titles and descriptions? I don't know how long is too long for either element.
For smaller cards, no rule as they are already in 300 to 500px wide. On larger screen, character length is like 50 to 75 characters for a line for best readability. Titles are normally 100 characters on UA-cam titles and description could be a bit like 150 character. For cards, it might be lower than that and it will depend on the width and size of your card
how to you solve an issue if you have lets say a union symbol X or + inside a circle (close out icon) ? When i do an autolayout of this group the X goes out of the circle and i cannot get them together
make a group of the icon + circle as you don't need them in an autolayout
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.
Do not overthink with auto layouts, sometimes avoid using them
@@learnuxid Thanks for responding. Quick question: if I don't use auto layout, what would keep the cards from overlapping when the window is made smaller?
is it possible to save proportion of image size in cards? so it would increase not only horizontal but vertical too?
I think with a fixed frame and image inside that frame can work with proportions. Use a frame and clip it and use constraints to scale, it will work
wait - how do you get the image to drop into the image space from a file on my computer?
Drag your image and drop it on the small right properties panel fill area and it will be replaced
You didn't mention that after you group two headings with shift+A You also need to add "Fill and hug" on them. Otherwise, the card won't be responsive with these group headings... but it took me maybe 1min to figure it out. Never mind, I guess. Maybe I missed it out
Without Fill you can't view any auto layout. Sorry for the trouble
what is hug in sizing property?
Hug the contents. Matlab jo ander content hay us ko jhaphi paa lo
could you make the image thumbnail fixed constraint scale. like when the scale image is 16:9, then when i resize card it still 16:9.
I will make another video on this
thank you@@learnuxid . I hope you use the "image" fixed scale constraint, non a frame/autolayout.
sir make a responsive website and expalin with alignement , expalin with ux and make mobile aap like a pro and also explain with user experience too. each and every point should be expained breifly
Please watch my courses here. They are there to train you and make you a Team of One UX UI Designer
learnuxid.teachable.com/p/ux-ui-design-mega-bundle-all-courses
Please share the figma file when doing a tutorial video
Next time, i will
I think u are the person teaching me in udemy ?
Yes, it is
helpfulll
Thanks