Figma Auto Layout Updates (2023) | Figma Tutorial

[@DesignWithArash]

👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons): bit.ly/43v79vX

[@mischugo]

Awesome!!! Does the price include updates? Are there updates somehow?

[@DesignWithArash]

@@mischugo Yes. All future updates are included.

[@DesignWithArash]

@@mischugo Yes. All future updates are included.

[@coehfelipe]

Arash, you’re exactly the type of teacher that people need. If there’s a chance, I’d like to learn UX in a dedicated course of yours. Much love from Brazil

[@DesignWithArash]

Thank you so much. That's so nice of you. My new course will be out soon so please stay tuned for that.

[@olenaguryeva1035]

So true!

[@_coderizon]

When is soon :D

[@Alisa-inspiration]

Absolutely, the best teacher! I watched the entire video without skipping any part of it! Thank you so much

[@LordJHouse]

I absolutely love how you immediately get right to the point and start teaching. Your approach is very straightforward and concise. Also, this Auto Layout upgrade is great. Thanks!

[@DesignWithArash]

I appreciate that!

[@adnanabbas.]

Best Figma channel on youtube man!

[@DesignWithArash]

Thank you so much.

[@mischugo]

Super cool. One of the best explanations here on YT. Clear and understandable. The wrapping function is already great, but unfortunately not really developed to the end. I think so. You should be able to set several BreakPoints. And then also define a resizing of the elements. Example - title desktop 48px, but mobile 24px. Also the ability to move elements individually together first, and then open another row. For the last one I mentioned, I'm currently trying to use frames between the objects, which then have min and max values to shrink as I want

[@DesignWithArash]

Thank you. Yes, it's not perfect yet but I hope they solve the issues you mentioned soon.

[@mischugo]

@@DesignWithArash By the way, this intro of yours is so incredibly well done. Insane!!! kzbin.info/www/bejne/Z2TKhaemmNt2ppo

[@DubbelDutch1]

Waiting for this features max/min for a long time. Thanks for explaining Arash!

[@DesignWithArash]

No problem.

[@djashawe88923]

Congrats on your channel's growth! Do you set up images by framing them or just using them without frames? I typically frame PNG or JPEG images, set to 'fill' and parent frame to 'fixed' for autolayout, 'scale' with 'left top' for non-autolayout. What's your approach?

[@AmélieLemire-j6c]

I searched for hour the spacing setting. Thanks a lot for the video.

[@DesignWithArash]

Glad I could help!

[@nkechicatherineoluoha5024]

Thank you Arash, this was really helpful

[@DesignWithArash]

No problem.

[@organic_panic813]

thaanks a lot, i was sad bc i couldn't find the space between feature anymore, thanks for showing it in this vid!

[@DesignWithArash]

No problem. Glad it helped.

[@jayabad6558]

Thats very easy now! Thank you!. Before the update im always confused in that shrinking process..now i can just turn auto nice!

[@DesignWithArash]

No problem. Glad it helped.

[@denispanarin]

03:52 Oh thans a lot for that, I was looking for that.

[@canklejohnes3260]

My teacher, a source of inspiration.

[@DesignWithArash]

Thank you.

[@JomagHeredia]

Very very illustrative and easy to grab! TY

[@DesignWithArash]

No problem.

[@abrar082]

Thanks for the video. I couldn't understand the feature but the video is a huge help.

[@DesignWithArash]

No problem. Glad it helped.

[@abrar082]

@@DesignWithArash Thanks again

[@andreic048]

Thank you for this tutorial. I was having a tough time figuring out what the equivalent of space between is after the new update.

[@DesignWithArash]

No problem. Glad it helped!

[@LaLauren80]

Thanks so much Arash, appreciate it!

[@DesignWithArash]

No problem.

[@AnjaliKumari-sg1hh]

Thanks a lot dear. You pointed out the problems exactly I was facing. Thanks again

[@DesignWithArash]

You're most welcome.

[@KhadijaHabib-n8o]

Sir, your videos are good and have good information, I understand them quickly

[@DesignWithArash]

Glad to hear that. Thank you.

[@KhadijaHabib-n8o]

@@DesignWithArash 💕

[@NTaR-]

this is very useful straight to point, thank you so much..

[@DesignWithArash]

No problem. Glad you found it helpful.

[@pearlmadondo2]

This was very helpful. Thank you for getting straight to the point 💛

[@DesignWithArash]

No problem.

[@kartikeya.m9380]

Arsh i have taken your skillshare course of webflow and trust me the way you explained webflow with ease , no one did on the whole internet, i cannot thank you enough for that, please can you make a full e commerce course for webflow taking an example of a fashion website that include all the features of e commerce with different filters , aand is this a way i can contact to you , i am ready to pay you personally, but i want to learn from you only , once again a big big thanks to you

[@DesignWithArash]

Thank you so much for your kind words. Glad you liked my Webflow course. Thanks for your suggestion, I'll keep that in mind. You can contact me on Instagram.

[@judylyp]

I’m currently doing your Udemy course and just want to say thank you for providing such valuable content! I love the way you explain things, it’s very easy to understand, and I’m enjoying the course a lot!

[@DesignWithArash]

Thank you so much. Glad to hear that. You have a great channel by the way. Keep going.

[@laboriefabien]

Great vid! 4:10 you could actually already switch to space-between by typing "auto" or just "a" instead of a number in that field!

[@DesignWithArash]

Thanks. Yes, but now the Spacing Mode option is no longer available.

[@frailita]

You are an excellent teacher :) Thank you so much 🥰

[@DesignWithArash]

Thank you very much.🥰

[@mischugo]

Hey Arash, is there any workarround to have the right element (Presentation) on top over Design and Research when you "shrink"? Thanks a lot!

[@r3dp1ll]

That was quick ! Thanks

[@DesignWithArash]

No problem!

[@dorlliepraise]

This video is so helpful Thank you so much

[@DesignWithArash]

Glad it was helpful!

[@creatoratplay]

This was so helpful; thank you!!

[@DesignWithArash]

Glad to hear that. No problem.

[@ItxELIYA]

oMG i just found that in your advanced prototype course dropdown menu episode the spacing bt the elements in auto layout i just thaked god 😁😁😁😁😁😁😁😁

[@M.sidd1212]

Soo helpful...looking forward to see more videos explaining all the other updates as well.

[@DesignWithArash]

Sure. Stay tuned.

[@MiguelAngelTriveno]

Great tutorial, that's so helpul in my works, thank you!

[@DesignWithArash]

No problem.

[@k.kaiserahmed8013]

Prototyping in figma may surpass Protopie in few upcoming Updates ❤❤🎉

[@DesignWithArash]

I totally agree.

[@abrar082]

Really

[@ThisPageIntentionallyLeftBlank]

A couple more features and say goodbye to AxureRP

[@k.kaiserahmed8013]

@@ThisPageIntentionallyLeftBlank 😂

[@KxRAnimations]

This was absolutely great and straight to the point. Could you potentially do a similar lesson like this with the new variables and advanced prototyping?

[@DesignWithArash]

Thank you so much. Sure. Stay tuned for that.

[@scarlydesigns]

I like your way of teaching! Please do more explaining on the NEW variants, variables, and dev mode. And everything else in Figma lol.

[@DesignWithArash]

Thank you. Sure.

[@scarlydesigns]

@@DesignWithArash thanks

[@PenguinLine]

Thank you, Arash!

[@DesignWithArash]

No problem.

[@annserhiienko]

Wow, your explanation is great! Thank you so much, this video was incredibly helpful for me!

[@DesignWithArash]

Thank you. Glad it was helpful.

[@poke-flex1288]

This feature is everything i've needed for so looooong. Thx you for this very clear explanation =)

[@DesignWithArash]

You're very welcome!

[@mortezaajidanpour9381]

That was awesome and also great use cases, Keep up the good work.👏🏻

[@DesignWithArash]

Thank you! Will do!

[@princeosei7727]

Awesome...you are indeed a great teacher. Thanks for the update

[@DesignWithArash]

Thank you so much.

[@SG.33.555]

Your video was really helpful, thank you

[@DesignWithArash]

Glad it helped.

[@klaudiawojcieska8735]

Loved the video! Do you know if there's a way to change the table component into card component using wrap?

[@DesignWithArash]

Thanks. I'm not sure what you mean, could you please elaborate more on that?

[@brunoventura7234]

You're amazing, thanks for the video

[@DesignWithArash]

Thank you.

[@adiobabatunde7645]

Been waiting for this update a long time ago!!!!

[@DesignWithArash]

Same here.

[@victorzollikofer1292]

Wow what a great tutorial! The sequence was on point 🙌

[@DesignWithArash]

Thanks a lot.

[@leilaazmand4946]

Great! Thank you Arash.

[@DesignWithArash]

No problem. Thanks.

[@magnus9808]

Your videos are really helpful Arsh ❤

[@DesignWithArash]

Glad you like them! Thanks.

[@MrSenmit]

Amazing. Very powerful and helpful

[@DesignWithArash]

Thanks.

[@rosssweetmore2210]

What about typography styles for different breakpoints? For example can it automatically change to a Header 1 from Desktop to Mobile at a certain breakpoint?

[@DesignWithArash]

Unfortunately, not at the moment. You can use variables but you still cannot apply number variables to the font size property but they said they are going to add this in the future.

[@parinazshokouhi1136]

Awesome! Thanks for creating this useful content as soon as the Figma updates are announced.

[@DesignWithArash]

No problem!

[@marinadolher]

Great tutorial! straight to the point. Thank you so much

[@DesignWithArash]

No problem. Thanks.

[@siddharthraj50hz]

Hii Arash, at 6:54 the third card looks odd, is there any method to make the third card look like the first and second card?

[@DesignWithArash]

Hi. Unfortunately, not currently.

[@garyvoigt321]

Great video!

[@DesignWithArash]

Thanks.

[@FlurinConradin]

Great video. You pay so much attention to detail and produce content of such high quality, thank you very much! Would you know if it is possible to make the card that gets pushed to the second row the same width as the ones on the ones on the first row? Would that be possible without a fixed card width?

[@DesignWithArash]

Thank you so much. Unfortunately, it's not possible. That's a shame but I hope they fix this issue soon.

[@brianm3160]

Insane 😮🤯

[@mv76769]

I am learning figma, and your videos really help a lot.

[@DesignWithArash]

Happy to hear that!

[@sardorabdujalolov1108]

thank you bro it was so useful

[@DesignWithArash]

No problem.

[@sitihajarmdzahid]

Great video.

[@VrishtiPurohit]

Thank You it was really helpful

[@DesignWithArash]

No problem. Glad you found it helpful.

[@cristinabermejosanchez2673]

This is an excellent explanation! There is a question I would like to ask. Would it be possible to make a prototype and try it out on different devices? Can that example you did be seen on both mobile and desktop devices and work properly? Thanks!

[@DesignWithArash]

Thank you so much. Yes, you can but you should duplicate your frame adjust its width and then you can preview it on other devices.

[@PhuongPham-wt9fi]

Thank you!

[@DesignWithArash]

No problem.

[@ABelfakirVlogs]

the wrap feature is the closest it can get to a magic stick! Thanks for the video Arash

[@DesignWithArash]

No problem

[@kuldeepjaswal4655]

excellent bro!

[@DesignWithArash]

Thanks.

[@yesmubindid]

This feature is mind blowing.

[@DesignWithArash]

It is.

[@parastoomahdavinia2952]

Thanks for your great videos, I have a question! when I select the child text It does not show any options like Fixed or hug can you please help me with this?

[@DesignWithArash]

Are you sure that the parent element is an Auto-Layout frame?

[@HarosGaming]

Hi arash can u make a tutorial on how to make a auto slide with imagine text and call to action button together and also with a circle that identify what slide you on

[@DesignWithArash]

Hi. Sure. I'll keep that in mind.

[@sonaafyan4735]

It was cool, thank you for a good content 😊❤

[@DesignWithArash]

No problem. Glad you enjoyed it.

[@Prithviraj-sj7op]

Hi arash your doing great day by day but can you make one app design complete video which help us lot thank you.❤

[@DesignWithArash]

Hi. Thank you so much. Sure.

[@saidabaspur2602]

آموزش‌هاتون بروز و عالیست.

[@DesignWithArash]

ممنونم از لطفتون.

[@ABDULREHMAN76184]

I like your Totorial Aresh

[@DesignWithArash]

Thanks a lot.

[@telagathotiveeraiah8805]

thank you so much

[@DesignWithArash]

No problem.

[@dylantan5442]

Thank you.

[@DesignWithArash]

No problem.

[@maryamnaji179]

nice job man

[@DesignWithArash]

Thanks.

[@simonapetrauskaite386]

you can quickly change the gap from auto to specified if you click on the aligment box and hit x on your keyboard.

[@DesignWithArash]

Great tip. Thanks for letting me know.

[@dr.calato7414]

Thanks!!!

[@DesignWithArash]

No problem!

[@leelo_music]

tbh you could always enable auto spacing by typing A when having the spacing input field active.

[@DesignWithArash]

Yes, you are right. The main point is that it's no longer adjustable in the Advanced Settings.

[@JalilovTimur]

Now its like framer! Best features in there, now in figma

[@DesignWithArash]

Yes, it's more powerful than ever.

[@sarahigbinosa3004]

Thank you so much, Arash. This was very helpful. Look forward to you explaining the rest of Figma's update from #Config2023

[@DesignWithArash]

No problem. Glad you found it helpful. Sure. Stay tuned.

[@luciamichanikl3517]

Is there a possibility to keep all elements the same width so even if they fill the container and one card gets in the second line, it still doesn't get bigger than the other cards?

[@DesignWithArash]

You can use a fixed width for your cards but in that case your cards won't be responsive.

[@benjysmedia8164]

Hi Arash I hope you are doing well. I have been following you for a while now and watched most of your videos. I must say they are incredible and I have learned a lot from you. What I want to find out from you is when you were going for your very first UI/UX Design Interview where you had no experience, how did you sail through? and what were some of the questions you were asked? Did you get the job?? I will be very grateful if you can respond to this as it will help me prepare for mine. Thank You very much and standing by for your response

[@DesignWithArash]

Hi. Thank you so much. It's a long story but I answered some of your questions in the following video. kzbin.info/www/bejne/kKWxZKx-fryoiLs

[@benjysmedia8164]

@@DesignWithArash Thank You very much Brother for this

[@aligtehrani7702]

Thanks

[@DesignWithArash]

No problem.

[@uxdworld]

nice 🎉

[@DesignWithArash]

Thanks 😊

[@oloriegbefuaad4914]

Arash when are you updating your course on udemy

[@DesignWithArash]

Hi. No, my new course will be published soon so stay tuned.

[@risceer]

My Friend introduced me to your Amazing well detailed course some months back and i have been learning a lot from it all thanks to you but i would like get the assets file for the Money mobile App you worked on, I cant seem to find it and i am stuck please i would need your assistance Arash Thank you. Expecting your response soon.

[@DesignWithArash]

Welcome aboard! You should be able to find the Assets folder on whichever platform you are watching the course.

[@emedobianthony5365]

Keep it up

[@DesignWithArash]

Thanks.

[@saoirsethewanderer]

This is good, but you demonstrated some of the big problems that still aren't really resolved in these updates. 1) when you resized down the three cards with wrap, the column widths didn't stay consistent across the wrapped element. The 3rd card became the full width. This wouldn't happen in a true column layout. It is not easy to actually make a layout with, let's say 5 form fields across, and have it wrap 1 of them to the next line but still be the same width as the first for fields. Without that, it still doesn't make it easy to make fully responsive layouts for forms and productivity apps. 2) the-min height and max-height portions don't work in combination with other full-height sized elements. I have a card that has a footer inside of it and I want the footer to stay at the bottom and for the inner card to grow based on its contents, but I also don't want it to get smaller than the viewport of my device, basically, a sticky footer. When I set the inner div to grow to fill the container, the min size doesn't work properly. When I set the content to match the content, that part works but I want the inner element to be full size. Essentially, they have added some new features that help with SOME layout situations, but they don't fix the things that I was having problems with for mobile-responsive websites or native mobile application designs. What's worse is that they hide some of these features behind some menus. I fully think they will do what they did with the space-between option eventually and bubble these features up to the panel. They have also taken away some of the dev elements to make us pay for devs to have access to this new mode. Great, for the DEVs that want to use auto-generated code or sample code from a design tool, maybe it works better, but for most developers, they just want to know the colors and basic padding and margin, so the old way was just fine. Now we would have to pay for very large teams of developers, sometimes 50 at a time, to use these features. Good move for monetization of the product, bad news for big project teams.

[@DesignWithArash]

I 100% agree with you. It's not perfect yet but at least we now have more CSS options. To create the layout you mentioned you can use the Breakpoints plugin to switch between different breakpoints. Adobe invested so much money in Figma so I guess they had to make the Dev Mode paid. As a designer I would pay for it because it's going to make the handoff process much much smoother.

[@fatimaibrahimux]

The auto is not a new feature, but you had to type "Auto" instead typing the spacing size. Now it's available in the dropdown so it's easier to see. The wrap is definitely a game changer! Nice video ^^

[@DesignWithArash]

Yes, in the past you could also set it to Auto using the Advanced Settings but now that option is no longer available.

[@fatimaibrahimux]

@@DesignWithArash I didn't notice that the option is gone until you mentioned it. Thanks for the update !

[@AidaHashemii]

👏👏👏

[@lucatomas5039]

Nice

[@DesignWithArash]

Thanks.

[@himank_khaptawala]

Can UI / UX designer do freelancing

[@DesignWithArash]

Yes you can!

[@saravanan5985]

in my figma interface , wrap and min width max width not showing, it premium version or we can access it free version also?

[@AnjaliKumari-sg1hh]

subscribed :)

[@DesignWithArash]

Welcome aboard.

[@seppneimusser5723]

It's fine so far but how to handle the swap of the four cards if I change my desctop size? Like in realy desctops they are all different in there sizes...

[@DesignWithArash]

Just set the constraints to Left and Right for the Cards frame and it will be handled by Figma.

[@Maksims-x5v]

How to make 3-rd card not shrieked to all row ??

[@DesignWithArash]

You can use Max Width for that.

[@verifiedbot5]

Can you please make a tutorial about how do you make your thumbnails...they are really amazing..please make a tutorial video on it

[@DesignWithArash]

Thanks. I'll keep that in mind.

[@verifiedbot5]

@@DesignWithArash will waiting for your video sir♥

[@1deplatt]

good vid. I think Figma is starting to get very complicated with these new updates.

[@r3dp1ll]

let's say more complete but yes it takes more time to learn Figma now. All about mindful practice. Make sure to practice using Arash's practice files.

[@DesignWithArash]

Thanks. I agree but I've got you covered so let me know if you have any questions.

[@suryajayarajan42]

please do a new figma crash with updated features bro!

[@DesignWithArash]

Sure.

[@elvinqachayli4840]

i don't know why when i give the auto layout to the 4 or 5 elements they are totally changing place and then it is really difficult for me to bring them to there right place pls help me about it

[@DesignWithArash]

You can select the element you want to reposition and use the arrow keys on your keyboard to move them around.

[@solutiontrickygames8327]

I'm unable to practice via practice file. It is set view only.

[@DesignWithArash]

You should just copy all the frames, create a new design file and paste them there.

[@thalapathygaming5151]

Can you tell the difference between Android and IOS icons, font and prototype with smart Animate 😅😅