Responsive Card Component UI Design in Figma tricks & tips
Vložit
- čas přidán 28. 08. 2024
- Title - Discover How to Create a Dynamic Card UI with Auto Layout in Figma - SEO Optimized Tutorial. Learn to Design a Flexible Card UI that Allows Easy Content Updates.
My CZcams Channel: / channel
Facebook: / ganesharam.jangir
Instagram: / ganesharam_ux
Figma website link: www.figma.com
Hi
I am Ganesha. Welcome to our CZcams Channel 'Learn Design With Ganesha'. Subscribe for NEW VIDEOS weekly!
About this video
In this tutorial, we'll be crafting a dynamic Card UI using Figma's Auto Layout functionality. This technique empowers us to create a card that adapts to changes effortlessly, ensuring that users can modify content without the need for extensive restructuring.
⏰ Queries Solved:
Learn Figma,
Figma tutorial for beginners,
Responsive card design using Figma,
Horizontal scrolling,
Figma auto-layout responsive card design,
Min width max with auto-layout,
Figma auto-layout new features,
Design for Figma,
How to use auto layout in Figma,
Auto layout Figma,ui design,
Advanced design system,
Figma tips and tricks,
Figma tips and tricks 2023
Auto Layout Card Component,
Text Layer Design,
Adding Auto Layout in Figma,
Card Design Finishing Steps,
Image Addition to Card,
Proper Image Placement,
Handling Image Overflow,
Creating Borderless Auto Layout Card,
Functionalities and Quirks,
Detailed Description of the Process,
Effective Card Resizing Techniques,
Horizontal Resizing Methods,
Vertical Resizing Approaches,
Explanation of Fill Container,
Switching to Hug Contents,
Final Touches on the Card Component,
Exploring Diverse Design Options,
Adding New Text Layers,
Utilizing Packed Space Between,
Title Resizing Techniques,
Introduction to Card Row Design,
Creating and Resizing Card Rows,
Horizontal Resizing for Cards,
Managing Text Wrapping,
Fixed Height for Images,
Card Details Resizing Strategies,
Ensuring Uniform Card Heights,
Adjusting Card Details Vertically,
Changing to Fill Container Layout,
Thank you!
#figma #figmatutorial #figmaplugins #figmadesign #figmaforbeginners #design #learndesignwithganesha
thanks, I finally found the fill container 😅, I've stressin out all day for finding that feature
that's the one!
Knowing is first thing. Helping others learn is noble thing. First is true!
I am glad 😊 you like it, also there is another video like this, please have a look and comment about that video czcams.com/video/Ikwd37ei-uw/video.html , thank you
these videos are really helping me when I need it. love the transition to focus on the properties. nice music too
Thank you 😊
Bro, please add a voice-over or subtitle to this video. facing so many issues while doing it. Could you please make another video on this topic with a voiceover or subtitle?
Sure bro I'm creating another video with detail explanations
@@FigmaFrenzy Bro I can't find the tutorial.....It's very helpful for us..
Would have been helpful if there was voice or at least text that explained whats going on. Thanks for your efforts.
PS: The background music reminds me of desi wedding - came here to learn responsive design in figma, remembered how our plates become responsive in front of buffet 😂
Thank you for value able feedback 🤣, In my next video I'll consider these all.
I was able to follow along and complete the project. Thanks fro showing the screenshots for the min and max widths.
Glad I could help!
simple, fast and efficient tutorial
Glad you liked it
first of all i love the background music.
Thank you 😊
Very informative and well understanding
Tray to include your voice instead of bgm.
Thank you for your kind response 😊, Ok next time I will
Great, you make it very easy, by the way the music is very intersting. I really enjoy it. If you have any problem in your voice just try to convey your message in writing. Also give me the link of your linkedin please..
Thank you very much!
How do you reduce and increase the size of the font so rapidly, What's the shortcut to do it?
Thank you for the video :))
Thank you 😊
Thank you! Very good CRACK⭐
You're welcome! 😊
can you explain me about the typography. when to use the right size for a text and find the balance between the heading and the subtext. for example if the title is 24 and what size that would fit for the text. is there any rule regarding this?
Thank you for your interest, I will upload soon a proper details video on it, thank you 😊
looking forward@@FigmaFrenzy
do readability matters in card Ui ? if yes ,text size 12 is readable 🤔?what could be an ideal value for small text in mobile UI?
Hi thank you for your interest 😊, yes it's matter. In mobile minimum we can set 12 and in web we can set 14px
@@FigmaFrenzy okay thank you so much
Very nice. Could you do one as you explain verbaly
Sure 😊
I have a question, if I will to create a component like a navbar, should I use frame or rectangle?
Thank you for your response, you can try with both, after making components it will become a frame
how do we decide line height for text
🤔
Thank you so much for such an informative video. Can you please do more like this with english vocal or written explanation because at 6:51 i started losing you with all these number variations.
First of all, Thank you very much for the valuable feedback 😊 , I have uploaded another video related this with ai voiceover . But ya I will upload a new video with detail explanations. Thank you again.
bro am facing the issue whenever i select frame after framing picture and text frame just frame layer shifts not full picture like whenever i change width of the frame just frame move inside and outside am newbie just learning how to deal with this need detail answer
Hi, Thank you for response, I'm working on the next video with full explanation, It will be helpful to all. Feel free to ask any queries.
thankyou bro🤩
Welcome 😊
Dang What a bg Music! Tell its name plz.
Bhai plz ek baar bol ka batao n auto layout ke bare me bahot si video dekhi but doubt clear nai huwa...
Sure 😃 bro, I will definitely explain
Too many back and forth. Confusing
I will upload a video with detail explanations
what is that max width and min width u did ? what's the use
Min width 260px and Max width is 692px, it's up to you, you can change these values according to the content, also there is another video you can check czcams.com/video/Ikwd37ei-uw/video.html , thank you
@@FigmaFrenzy can you teach me figma
😂😂BUTI NGA SAYO . PARA KA DING INAHING MANOK NA PAKAMOT NG PAKAMOT E . SANA NGFOCUS KA N LNG SA WORK MO😂😂😂🎉🎉🎉
sir can you help in understanding or completing my internship task of ui ux designing, please share your handle where i can msg you
Will start soon