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

preview_player
Показать описание

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
Рекомендации по теме
Комментарии
Автор

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

rawan
Автор

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

christophercapio
Автор

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

fabsync
Автор

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

mrenigma
Автор

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

Beekrm
Автор

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

slipstream
Автор

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.

uzoukwustephaniechinenye
Автор

I found the absolute positioning to be very useful. Thanks!

rajthedev
Автор

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

AnumA.Nafees
Автор

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

tusharraj
Автор

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

waste-fellow-
Автор

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

CoolIntellect
Автор

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

QuynhNhu-cjlm
Автор

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.

elpablitorodriguezharrera
Автор

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

SahitiSeemakurti
Автор

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?

rob.creative
Автор

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

ahmedesam
Автор

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?

Techinik
Автор

Hi, I can't seem to have a "fill" option after putting the texts and button in one frame. Do you know what's wrong with that? thankyou.

AudryTamy
Автор

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

yanapfalzgraf