How To Design RESPONSIVE UIs With AUTO LAYOUT and Fill Container (Figma Tutorial)

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

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

50% 1

Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Download FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
In this video we’re going to examine how you can create responsive UIs and UI elements / components in Figma using the “fill container” adjustment within Auto Layout. Creating scalable and responsive UI elements is essential if you’re building more complex user interfaces and is a must-have of any decent design system. In this video I’m going to use an example of a feature card with an icon and we’re going to, step-by-step, create a responsive UI element
How to use auto layout in Figma to create responsive UI elements and components - step-by-step explanation by an experienced UX / UI designer - fill container tutorial
--------
© 2023 Mavi Design

Хобби

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

6 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@AnumA.Nafees 17 дней назад

i was struggling with auto layout but after watching this tutorial now i am able to make responsive design

@rawan9018 3 месяца назад

this is the first time in my whole life I could make a responsive design in FIGMA really appreciate that !

@fabsync 27 дней назад

The best tutorial on the subject! The real deal!!

@christophercapio5005 Год назад

this 10 min video solved like 80% of my figma problems

@alltheserobotsshallfall 15 дней назад

awesome, much better than the logic I was trying to use myself. subscribed to your channel! thanks!

@DuongNguyen-ju1nl 19 дней назад

very helpful thank you sir!!!

@waste-fellow-28 Год назад

Yo, random first video itself is enough to become a fan of this channel😭♥️

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

Wo your style of explaining is Absolutely amazing the pace and the examples and the tutorial is perfect.

@lorena12333 Месяц назад

Thank you!

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

Your tutorials are really amazing, helpful, in-depth, and to the point! Thanks fro all these helpful tutorials!

@Beekrm Год назад

Ugh finally a video I can understand ! What to do what if it an image card ? I’ve tried it with a image but having issues making it move

@mrenigma3773 Год назад

You can't imagine how badly I needed this. Thank you so much. I've just subscribed too.

@GlamPie0519 Год назад

Same here, was looking for this solution for a while now! Subscribed as well haha

@hroman_codes 2 месяца назад

Very nice thank you

@tagore4d Год назад

Thank you so much for the tutorial!

@QuynhNhu-cj3lm Год назад

Thank you so much. It's helped me a lot.

@uzoukwustephaniechinenye3834 Год назад

This is the first video about auto layout that I finally got it and I've watched a lot 😭😭 Thank you so much definitely subscribing.

@mavidesign Год назад

I'm glad I could help!

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

@@mavidesign Explain, please if we have 3 cards with button, how to make it so that when the content in 1 one card increases, the height of all others is equal to this card + so that the button is always at the bottom?

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

It had been 3 days since I was facing problem in auto layout now it's resolved. :)

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

This makes figma the best tool

@ilyasclarkson2556 Год назад

Like always, a legend.

@uts2521 Год назад

Thank you ☺

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

where did you get the number '72 ' from for rounding the icon? such a random number

@jimmylee1679 Год назад

Thanks!

@mavidesign Год назад

Much appreciated, Jimmy! 😍

@elpablitorodriguezharrera 4 месяца назад

Hi, is it possible to make the text size auto-responsive and auto-scaling every time I resize the frame? I want to create a fully responsive landing page where the text automatically resizes for each breakpoint screensize without creating three separate breakpoints (Desktop, Tablet, Mobile). For instance, the text will be 64px on a 1440px Desktop, 48px on a 768px Tablet, and 32px on a 360px Mobile, all on a single page without creating three different breakpoints for Desktop, Tablet, and Mobile. This refers to the actual text size, not the frame with constraints and auto-layout. Like CSS viewport width.

@rob.creative 10 месяцев назад

Why did you have to recreate it to get to this state. Couldn’t you make adjustments to the other one to get the same result?

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

I couldn't understand how to align the text properly, by not allowing it to overlap a button 😤 when resizing it. I needed an hour to come to idea that it should be set to auto height. Probably this will be helpful for someone....

@ahmedesam9922 10 месяцев назад

I tried making only layout like in 6:40 but it didn't work the fill container option is not showing why is that ?

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

I think you did not select the objects first. You have to select all the objects (or child objects within the frame) Right? As he did by pressing "enter in this case. I hope It helps.

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

I am completely new to figma designing, I created a complete app UI just by watching your videos but something that I didn't realize is that my Design isn't responsive and now I've completed my design, I can't ungroup each element obviously...but is there any way to make it responsive now?

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

This is quite a complex process and I'm not able to cover it thoroughly over a YT comment. To get more specific help and feedback with your project, please join my free Discord server. You can send me an Instagram DM or reach out to my email (About section of my channel) to get your invite. I'm unable to help everyone over RU-vid - thank you for your understanding! Mavi