Figma Auto Layout Updates (2023) | Figma Tutorial
Вставка
- Опубліковано 28 чер 2024
- In this video, I'm going to show you all the new Figma's Auto Layout features, and you'll learn how to apply them to your designs with real examples.
Download the practice file from here👇:
bit.ly/3NnrpJS
Try Figma for free:
psxid.figma.com/31r776
👉 Become a UI Designer with my UI Design & Figma Mastery course:
bit.ly/43v79vX
📸 Instagram: / uiux.arash
Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 7+ years of experience, and I teach people how to design great user interfaces and experiences. I've helped over 30,000 students become UI/UX designers from scratch worldwide.
👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons):
bit.ly/43v79vX
Awesome!!! Does the price include updates? Are there updates somehow?
@@michaelschultze3595 Yes. All future updates are included.
@@michaelschultze3595 Yes. All future updates are included.
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
Thank you so much. That's so nice of you. My new course will be out soon so please stay tuned for that.
So true!
When is soon :D
Absolutely, the best teacher! I watched the entire video without skipping any part of it! Thank you so much
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!
I appreciate that!
It was always pretty quick and easy to adjust the auto layout settings of card arrays for tablet/mobile view manually. I think the biggest benefit is the stacking for sub-elements like those tags at the bottom of the card. Thanks for going over these so quickly!
No problem.
Prototyping in figma may surpass Protopie in few upcoming Updates ❤❤🎉
I totally agree.
Really
A couple more features and say goodbye to AxureRP
@@ThisPageIntentionallyLeftBlank 😂
03:52 Oh thans a lot for that, I was looking for that.
Great tutorial! straight to the point. Thank you so much
No problem. Thanks.
This feature is everything i've needed for so looooong. Thx you for this very clear explanation =)
You're very welcome!
This was very helpful. Thank you for getting straight to the point 💛
No problem.
Wow, your explanation is great! Thank you so much, this video was incredibly helpful for me!
Thank you. Glad it was helpful.
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!
Thank you so much. Glad to hear that. You have a great channel by the way. Keep going.
Awesome! Thanks for creating this useful content as soon as the Figma updates are announced.
No problem!
Thats very easy now! Thank you!. Before the update im always confused in that shrinking process..now i can just turn auto nice!
No problem. Glad it helped.
That was quick ! Thanks
No problem!
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?
Thank you so much. Sure. Stay tuned for that.
I searched for hour the spacing setting. Thanks a lot for the video.
Glad I could help!
Awesome...you are indeed a great teacher. Thanks for the update
Thank you so much.
You are an excellent teacher :) Thank you so much 🥰
Thank you very much.🥰
Thank you, Arash!
No problem.
Very very illustrative and easy to grab! TY
No problem.
Wow what a great tutorial! The sequence was on point 🙌
Thanks a lot.
Thanks a lot dear. You pointed out the problems exactly I was facing.
Thanks again
You're most welcome.
Soo helpful...looking forward to see more videos explaining all the other updates as well.
Sure. Stay tuned.
this is very useful straight to point, thank you so much..
No problem. Glad you found it helpful.
Thanks so much Arash, appreciate it!
No problem.
Thank you for this tutorial. I was having a tough time figuring out what the equivalent of space between is after the new update.
No problem. Glad it helped!
That was awesome and also great use cases, Keep up the good work.👏🏻
Thank you! Will do!
This was so helpful; thank you!!
Glad to hear that. No problem.
Great tutorial, that's so helpul in my works, thank you!
No problem.
Waiting for this features max/min for a long time. Thanks for explaining Arash!
No problem.
Thank you Arash, this was really helpful
No problem.
Insane 😮🤯
This video is so helpful
Thank you so much
Glad it was helpful!
Great! Thank you Arash.
No problem. Thanks.
thaanks a lot, i was sad bc i couldn't find the space between feature anymore, thanks for showing it in this vid!
No problem. Glad it helped.
Your video was really helpful, thank you
Glad it helped.
thank you bro it was so useful
No problem.
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?
Your videos are really helpful Arsh ❤
Glad you like them! Thanks.
Thank you!
No problem.
I am learning figma, and your videos really help a lot.
Happy to hear that!
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 😁😁😁😁😁😁😁😁
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?
Thank you so much. Unfortunately, it's not possible. That's a shame but I hope they fix this issue soon.
Thank You it was really helpful
No problem. Glad you found it helpful.
Great video!
Thanks.
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
Thank you. Yes, it's not perfect yet but I hope they solve the issues you mentioned soon.
@@DesignWithArash By the way, this intro of yours is so incredibly well done. Insane!!! ua-cam.com/video/13gTtpcvCp8/v-deo.html
I like your way of teaching! Please do more explaining on the NEW variants, variables, and dev mode. And everything else in Figma lol.
Thank you. Sure.
@@DesignWithArash thanks
Amazing. Very powerful and helpful
Thanks.
You're amazing, thanks for the video
Thank you.
Thanks!!!
No problem!
Thanks for the video. I couldn't understand the feature but the video is a huge help.
No problem. Glad it helped.
@@DesignWithArash Thanks again
Been waiting for this update a long time ago!!!!
Same here.
It was cool, thank you for a good content 😊❤
No problem. Glad you enjoyed it.
excellent bro!
Thanks.
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!
Thanks. Yes, but now the Spacing Mode option is no longer available.
thank you so much
No problem.
Best Figma channel on youtube man!
Thank you so much.
Thank you.
No problem.
My teacher, a source of inspiration.
Thank you.
Sir, your videos are good and have good information, I understand them quickly
Glad to hear that. Thank you.
@@DesignWithArash 💕
nice job man
Thanks.
Loved the video! Do you know if there's a way to change the table component into card component using wrap?
Thanks. I'm not sure what you mean, could you please elaborate more on that?
Hey Arash, is there any workarround to have the right element (Presentation) on top over Design and Research when you "shrink"? Thanks a lot!
Thank you so much, Arash. This was very helpful. Look forward to you explaining the rest of Figma's update from #Config2023
No problem. Glad you found it helpful. Sure. Stay tuned.
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
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.
Thanks
No problem.
I like your Totorial Aresh
Thanks a lot.
nice 🎉
Thanks 😊
you can quickly change the gap from auto to specified if you click on the aligment box and hit x on your keyboard.
Great tip. Thanks for letting me know.
This feature is mind blowing.
It is.
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!
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.
آموزشهاتون بروز و عالیست.
ممنونم از لطفتون.
Hi arash your doing great day by day but can you make one app design complete video which help us lot thank you.❤
Hi. Thank you so much. Sure.
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?
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.
Nice
Thanks.
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
Hi. Sure. I'll keep that in mind.
tbh you could always enable auto spacing by typing A when having the spacing input field active.
Yes, you are right. The main point is that it's no longer adjustable in the Advanced Settings.
subscribed :)
Welcome aboard.
Keep it up
Thanks.
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
Hi.
Thank you so much. It's a long story but I answered some of your questions in the following video.
ua-cam.com/video/ZtN3yHIWuRY/v-deo.html
@@DesignWithArash Thank You very much Brother for this
Now its like framer! Best features in there, now in figma
Yes, it's more powerful than ever.
the wrap feature is the closest it can get to a magic stick! Thanks for the video Arash
No problem
in my figma interface , wrap and min width max width not showing, it premium version or we can access it free version also?
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?
Are you sure that the parent element is an Auto-Layout frame?
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...
Just set the constraints to Left and Right for the Cards frame and it will be handled by Figma.
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.
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.
❤
❤
Arash when are you updating your course on udemy
Hi. No, my new course will be published soon so stay tuned.
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.
Welcome aboard! You should be able to find the Assets folder on whichever platform you are watching the course.
👍
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?
Hi. Unfortunately, not currently.
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?
You can use a fixed width for your cards but in that case your cards won't be responsive.
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 ^^
Yes, in the past you could also set it to Auto using the Advanced Settings but now that option is no longer available.
@@DesignWithArash I didn't notice that the option is gone until you mentioned it. Thanks for the update !
How to make 3-rd card not shrieked to all row ??
You can use Max Width for that.
Can you please make a tutorial about how do you make your thumbnails...they are really amazing..please make a tutorial video on it
Thanks. I'll keep that in mind.
@@DesignWithArash will waiting for your video sir♥
Can you tell the difference between Android and IOS icons, font and prototype with smart Animate 😅😅
please do a new figma
crash with updated features bro!
Sure.
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
You can select the element you want to reposition and use the arrow keys on your keyboard to move them around.
Can UI / UX designer do freelancing
Yes you can!
I'm unable to practice via practice file. It is set view only.
You should just copy all the frames, create a new design file and paste them there.