Responsive Card Component UI Design in Figma with ease - Figma Tips and Tricks Tutorial

Подписаться 31 тыс.

Просмотров 27 тыс.

50% 1

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/ahsanpe...
Book me as your Mentor (only 2 slots)
► mentorcruise.c...
Follow me here, Thanks
--------------------------------------
learnuxid.com (website)
/ learnuxuidesign
----------------------------------------------------
/ mahsanidrisi
/ mahsanidrisi
/ muhammad-ahsan-pervaiz...
dribbble.com/a...
www.behance.ne...

Опубликовано:

2 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 76

@zoemoncaster1262 Год назад

This new auto sizing was driving me mad whilst following a (now outdated) course - but now it makes sense. Thank you!

@learnuxid Год назад

Glad it helped you

@leyetemi 2 года назад

Thank you so much for this tutorial. It's my first video and I'm definitely going to watch more💙

@learnuxid 2 года назад

Watch this whole playlist

@minervafreire1163 9 месяцев назад

Thank you so much! So useful 🙌 I love to hear the birds in the background 🐦

@learnuxid 9 месяцев назад

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

@christina9898979 6 месяцев назад

Thankyou for sharing :)

@learnuxid 6 месяцев назад

Welcome

@bonbon8702 2 года назад

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.

@learnuxid 2 года назад

Glad to hear that. MashaAllah

@davidschaer 2 года назад

quality content! plus one subscriber

@learnuxid 2 года назад

You are welcome, David. Just trying to make everything easier and simpler

@ajgaming7167 2 года назад

This was very helpful, thank you

@learnuxid 2 года назад

Thanks

@mohamedajaf411 7 месяцев назад

what is hug in sizing property?

@learnuxid 7 месяцев назад

Hug the contents. Matlab jo ander content hay us ko jhaphi paa lo

@sma5605 Год назад

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 RU-vid!)

@learnuxid Год назад

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

@sma5605 Год назад

@@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.

@4988raja 8 месяцев назад

Subscribed!!! Amazing

@learnuxid 8 месяцев назад

Awesome! Thank you!

@shreyakhyada321 Год назад

really helpful please make few more videos for besic or beginners like me thank you

@ayambaasong4425 6 месяцев назад

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.

@learnuxid 6 месяцев назад

Oh, that is something great for me. I try to simplify things

@roter13 Год назад

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.

@learnuxid Год назад

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 RU-vid 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

@dolapokareem7313 Год назад

I love your videos so much, easy to understand and straight to the point. Highly recommendable!!!

@learnuxid Год назад

I tend to simplify things

@baobaoshu1115 Год назад

Thanks from Kazakhstan

@learnuxid Год назад

Most welcome! brother

@kashifirtaza6456 2 года назад

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

@learnuxid 2 года назад

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

@МаринаПискарева-я1л Год назад

is it possible to save proportion of image size in cards? so it would increase not only horizontal but vertical too?

@learnuxid Год назад

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

@salamzaied 7 месяцев назад

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!

@learnuxid 7 месяцев назад

Thanks brother

@southlondonreseller389 3 дня назад

Thank you for making responsive design so simple

@learnuxid 2 дня назад

You are most welcome

@fernwehtwl Год назад

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

@learnuxid Год назад

make a group of the icon + circle as you don't need them in an autolayout

@amandayu3639 Год назад

Hi, first time seeing your video. I learned a lot and you describe very clear in step-by-step. Thank you so much! subscribed！😄

@learnuxid Год назад

Thanks for subbing!

@taimoorkhanvlogs 2 года назад

I love Figma Tutorials 💕 We want more and more about Figma 💗

@learnuxid 2 года назад

Yes, working on this

@agustinabordonr 5 месяцев назад

Thank you so much, this was so clear and helpful!

@learnuxid 5 месяцев назад

You are welcome

@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.

@learnuxid Год назад

Do not overthink with auto layouts, sometimes avoid using them

@h.b.1315 Год назад

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

@giselesarian8484 Год назад

Thank you so much !!! Cheers from Brazil.

@learnuxid Год назад

Wish you the best from Pakistan

@lbart8745 Год назад

wait - how do you get the image to drop into the image space from a file on my computer?

@learnuxid Год назад

Drag your image and drop it on the small right properties panel fill area and it will be replaced

@ZainalMuttaqin-n1p 11 месяцев назад

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.

@learnuxid 11 месяцев назад

I will make another video on this

@ZainalMuttaqin-n1p 10 месяцев назад

thank you@@learnuxid . I hope you use the "image" fixed scale constraint, non a frame/autolayout.

@bymil_jon Год назад

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.

@learnuxid Год назад

You are welcome. I try to simplify things as much as possible

@nehasalma9083 5 месяцев назад

thank you for this quick trick with us .

@learnuxid 5 месяцев назад

Keep watching

@manupriya5537 Год назад

100 times thanks you sir 🎉....❤

@learnuxid Год назад

Most welcome

@rakeshwarpadmanaban Год назад

I think u are the person teaching me in udemy ?

@learnuxid Год назад

Yes, it is

@toridori1228 Год назад

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

@learnuxid Год назад

Without Fill you can't view any auto layout. Sorry for the trouble