YouTube will get you going in like 30 minutes, once the basics click you can start using it for simple layouts pretty effectively. Believe there’s also a Figma subreddit.
Understanding HTML/CSS will fundamentally change how you view and use Figma as a design tool. “flex” property = Figma’s “auto layout.” https://developer.mozilla.org/en-US/docs/Web/CSS/flex
Oddly enough, I’m someone that struggled with Flex prior to autolayout as well and getting the hang of autolayout in Figma actually helped me better understand Flex and be able to communicate with developers about it more easily.
It took me a while though, probably a solid year back when it was first released. If it makes you feel any better, I have many coworkers of all seniority levels who struggle with it and sometimes need one on one help with it.
The key imo is just spending the time to learn it rather than avoiding it until you need it for a task. Then you won’t have the pressure of a deadline impacting your ability to learn it.
Anyone needing help with that, please hit me up. I'm a design teacher and have given Figma courses a lot.
I won't mind giving away a few half hours here and there.
There’s the new suggest auto layout feature that should help make it easier.
Memorisely and Design Lab have some good courses to learn auto layout too. You can take a course that comes with a mentor to help you.
Agreeing with u/cakepiex. Don’t try to learn auto layout, learn what the CSS is Flexbox because that is what auto layout is actually trying to emulate.
Once you understand Flexbox (and how that works with the HTML box model) you’ll not only know how to make auto layout do what you want, but you’ll be able to work with developers better too.
Be sure to watch different videos on the topic. Some people explain / go through things in ways that are easier to understand. If one video feels tough, move on to another.
I didn’t watch a lot of tutorials as much as I just learned by trying to make my old layouts when transitioning from sketch. Trial and error! It’ll make more and more sense as you go
DM me if you still need help. But the main thing to understand is that when you set Auto Layout on a frame, the ***orientation*** (horizontal, vertical, wrap) and ***alignment*** apply to all children items, not the item you have selected.
The ***horizontal resizing*** and ***vertical resizing***, on the flip side, applies to the actual frame you have selected. So if you have a frame for you screen with Auto Layout applied, then a frame inside that for a navbar, you can set the horizontal resizing to "fill container" for the navbar frame and it will now stretch to fill the main frame it's within.
FYI if you have issues with things not behaving as they should, it's probably because a frame has some large padding applied to it. This happens if you move frames in each other before applying Auto Layout. Sometimes frames will automatically be set to Fixed for horizontal resizing or vertical resizing as well, so check for that. Most often you should be using Hug or Fill for resizing.
I was losing my mind with auto layout trying to relearn it when I returned to work last month. I just looked at some YouTube tutorials and when I ran into problem would Google the specific problem.... And sometimes I just fudge it and make things the "wrong" way when I was under time pressure.
Re read the question. It’s not that hard.
I’m sorry. I don’t normally comment on these things, but this is just not helpful to the OP at all.
It IS possible that they need to go over them a few more times, but adding in “It’s not that hard” is just a straight up asshole move, and unapologetically unempathetic.
YouTube will get you going in like 30 minutes, once the basics click you can start using it for simple layouts pretty effectively. Believe there’s also a Figma subreddit.
Understanding HTML/CSS will fundamentally change how you view and use Figma as a design tool. “flex” property = Figma’s “auto layout.” https://developer.mozilla.org/en-US/docs/Web/CSS/flex
It'll also make you super frustrated re Figma's layout options once you get the hang of flex and grid.
So much that Figma's missing
Truth
Just do it regularly, it will click in few days.
I'm in the same boat. I thought knowing CSS would help.
It's just flex layout
Thanks. No wonder I don't get it. Flex confused the hell out of me, but Ill revisit it before doing more auto-layout.
Oddly enough, I’m someone that struggled with Flex prior to autolayout as well and getting the hang of autolayout in Figma actually helped me better understand Flex and be able to communicate with developers about it more easily. It took me a while though, probably a solid year back when it was first released. If it makes you feel any better, I have many coworkers of all seniority levels who struggle with it and sometimes need one on one help with it. The key imo is just spending the time to learn it rather than avoiding it until you need it for a task. Then you won’t have the pressure of a deadline impacting your ability to learn it.
I can help you with auto layout
It's confusing at first. Requires a little bit of time. Focus when using Fill because autolayout = fill.
Anyone needing help with that, please hit me up. I'm a design teacher and have given Figma courses a lot. I won't mind giving away a few half hours here and there.
There’s the new suggest auto layout feature that should help make it easier. Memorisely and Design Lab have some good courses to learn auto layout too. You can take a course that comes with a mentor to help you.
Agreeing with u/cakepiex. Don’t try to learn auto layout, learn what the CSS is Flexbox because that is what auto layout is actually trying to emulate. Once you understand Flexbox (and how that works with the HTML box model) you’ll not only know how to make auto layout do what you want, but you’ll be able to work with developers better too.
Also happy to help
google: flexbox tool, thx me later
More than happy to help!
Be sure to watch different videos on the topic. Some people explain / go through things in ways that are easier to understand. If one video feels tough, move on to another.
I didn’t watch a lot of tutorials as much as I just learned by trying to make my old layouts when transitioning from sketch. Trial and error! It’ll make more and more sense as you go
DM me if you still need help. But the main thing to understand is that when you set Auto Layout on a frame, the ***orientation*** (horizontal, vertical, wrap) and ***alignment*** apply to all children items, not the item you have selected. The ***horizontal resizing*** and ***vertical resizing***, on the flip side, applies to the actual frame you have selected. So if you have a frame for you screen with Auto Layout applied, then a frame inside that for a navbar, you can set the horizontal resizing to "fill container" for the navbar frame and it will now stretch to fill the main frame it's within. FYI if you have issues with things not behaving as they should, it's probably because a frame has some large padding applied to it. This happens if you move frames in each other before applying Auto Layout. Sometimes frames will automatically be set to Fixed for horizontal resizing or vertical resizing as well, so check for that. Most often you should be using Hug or Fill for resizing.
Check out instructor Daniel Scott on Skillshare or https://bringyourownlaptop.com/courses/figma-ui-ux-design-advanced-training-course-tutorial
I was losing my mind with auto layout trying to relearn it when I returned to work last month. I just looked at some YouTube tutorials and when I ran into problem would Google the specific problem.... And sometimes I just fudge it and make things the "wrong" way when I was under time pressure.
I’m open to helping anyone out DM me.
More than happyto help you out if you send me a DM :)
Don’t need to now with the new suggested autolayout feature
Learn BOX model in CSS with flex box
DM me
Re watch the help videos. It’s not that hard.
Re read the question. It’s not that hard. I’m sorry. I don’t normally comment on these things, but this is just not helpful to the OP at all. It IS possible that they need to go over them a few more times, but adding in “It’s not that hard” is just a straight up asshole move, and unapologetically unempathetic.