@@UsmanUsman908-r3d do a course on Udemy , 📑like figma is heavy in terms of the projects you need to do with figma. Unlike photoshop and illustrator, where you are working on one file, with one eg. poster, figma you are working on multiple screens, multiple everything. you need a course to explain it step by step.👍 Also, to be considered Proficient or Advanced in any program, you need to cover certain topics. eg. in Figma, Design systems. You need a course, I'm finishing up one right now but they don't explain autolayouts very well hence, why I'm here. 😁
Thank you so much for this video. I've referred some videos on auto layout before I found this one. But all of them left me confused and doubtful. But this one was super useful. Thank you so much for this detailed video.
This is great but I think you should add the resources for us to download so that we can actually practice while you teach. That way it is easier for us to grasp what you are talking about. For some of us we are practical learners
This is really helpful, thank you. One small suggestion if I may; you could probably divide your video into more chapters. Makes it easier to target particular information.
THANK YOU! I couldn't figure out why I wasn't always seeing, FILL CONTAINER option. SImple answer: The frame on the outside needs to be an auto layout from so the components inside will know how big the frame they are filling is. Else they wont know how to fill it. Thanks!😁
Great tutorial on auto-layout basics! The only question I have is what's the best way to adjust the layout of the rows so that the checkbox and company fields have a smaller gap between them that matches the sample exactly?
The font for Closed is smaller than the other fonts, so that mess up the fill of color the text is in when I add longer words than closed. I had to play with the sizing of the "closed" CTA so it fit other words. Besides that great video! Helped me a lot!
I have a question. in ~ 14:30 why did you make each of the elements inside the row into frames first and THEN into Auto-layouts? my understanding, based on the beginning of the video, was that Auto-layout automatically creates frames when you apply it on an element. what difference would it make if we didn't create the frames first here?
If you're doing a tutorial for complete beginners, you'd want to describe everything you're doing. Or it might help to put the keyboard shortcuts you're currently pressing in the video. I had to rewind the video several times to understand what you did. Don't take this as a negative criticism, but a space to improve your tutorials. Thank you. 😉
You're telling her/them to do more work in production, so you don't have to pause and replay this free video. Maybe doing a little work on your part is a beneficial part of learning
Hi, I am working with auto layout and I notice that on my layers, things are in the following order: Device (frame with auto layout) > Frame 1 (frame with auto layout) >> Text Node 2 >> Text Node 1 On my canvas, they appear in the proper order, though: Text Node 1 Text Node 2 Is there a reason why my layers have to be in the opposite order? I notice that yours seem to be in the correct order and it works as expected.
Great tutorial ✨thank you I just confused about 1 part - How did you make the button “closed” at the beginning so that the text was along with the button . And so you would be able to adjusted and change within Layout accordingly.
yes, excellent Tutorial, but i did get confused at the first part too, i don't know why it wasn't so clear or so easy go get the whole idea. Great Job anyway
Hi! I have a question: for some reason, the “constraints and resizing” option is missing in my Figma. It’s not where it should be, and I can’t find it anywhere. Also, I’m missing a couple of animations in prototypes, even though I have a Figma subscription. What do you think the issue could be?
Under the "layout" option I have the resize option. You can also see the Constraints section after selecting a child element of a frame. If your problem is nothing like this, Figma has changed the User Interface. That may be why.
If they try to mimic Flexbox, why not just incorporate Flexbox as it is? Just use the exact features and naming, so that people with css knowledge can use it immediately or even just allow to add css to make it work like in Penpot. This "hugging" thing is just how css behaves out of the box if you add padding around an object.
Everything worked perfectly until I rounded the corners at the end. The corners for the table became round, but it looks like they are overlapped by the sharp corners of the rows. Not really sure what I did wrong 😅
hey, i know you've posted your comment a month ago, but just in case you still care i think i found the solution ! personally, in the auto layout, i selected "clip content" instead of "show content". after that the radius worked just fine :) have a nice day !
This is not going to work since now Figma you have to apply the resize first before adding that auto layout or else the shapes will be squeeshed if you change auto layout directions. Took me hours to figure out
Out of all the videos I have watched regarding learning and understanding Auto-Layout, this one truly helped to make sense of the feature. Thank you.
Glad it was helpful!
This is one of the cleanest auto layout tutorials I've watched. Straightforward and well done.
I AM CONFUSED IN FIGMA & I WATCHED MANY TUTORIALS BUT FROM THIS I REALLY LEARNED AUTO LAYOUT AS WELL AS MY OTHER FIGMA BASICS ALSO GOT CLEARED
same
@@UsmanUsman908-r3d do a course on Udemy , 📑like figma is heavy in terms of the projects you need to do with figma. Unlike photoshop and illustrator, where you are working on one file, with one eg. poster, figma you are working on multiple screens, multiple everything. you need a course to explain it step by step.👍
Also, to be considered Proficient or Advanced in any program, you need to cover certain topics. eg. in Figma, Design systems. You need a course, I'm finishing up one right now but they don't explain autolayouts very well hence, why I'm here.
😁
Thank you so much for this video. I've referred some videos on auto layout before I found this one. But all of them left me confused and doubtful. But this one was super useful. Thank you so much for this detailed video.
This is great but I think you should add the resources for us to download so that we can actually practice while you teach. That way it is easier for us to grasp what you are talking about. For some of us we are practical learners
This is really helpful, thank you. One small suggestion if I may; you could probably divide your video into more chapters. Makes it easier to target particular information.
THANK YOU! I couldn't figure out why I wasn't always seeing, FILL CONTAINER option. SImple answer: The frame on the outside needs to be an auto layout from so the components inside will know how big the frame they are filling is. Else they wont know how to fill it. Thanks!😁
Thank you 👏👋
Great instruction. I appreciate her explanations for the logic and for the what, why and how.
Your a diamond... Thank you so much, your are fantastic!
Great tutorial on auto-layout basics! The only question I have is what's the best way to adjust the layout of the rows so that the checkbox and company fields have a smaller gap between them that matches the sample exactly?
The font for Closed is smaller than the other fonts, so that mess up the fill of color the text is in when I add longer words than closed. I had to play with the sizing of the "closed" CTA so it fit other words. Besides that great video! Helped me a lot!
This is exactly what I needed now. HUGE thanks, Maddy!
Glad it was helpful!
thank you so muchhhh !!! you made it understandable very easily
I really liked that you pointed out that you don't get the Fill Container option until the parent frame is auto layout too. That gets missed a lot.
Super helpful. Thank you! And you explain easy and clear
Extremely helpful tables tutorial, thank you!
Very helpful video, thank you so much!
Best explanations! Thx ❤
Thank you. This is really helpful.
You're welcome! ☺️
I have a question. in ~ 14:30 why did you make each of the elements inside the row into frames first and THEN into Auto-layouts? my understanding, based on the beginning of the video, was that Auto-layout automatically creates frames when you apply it on an element. what difference would it make if we didn't create the frames first here?
yes, I have exact same question as you, why frames everything will help making everthing aligned better?
Sterling video, thanks a lot
Thank you so much! This helped a ton
You're welcome, glad it helped!
This was awesome. Thank you!
Glad you enjoyed it!
This is amazing!! Thank you for this ❤ Is there a reason why you frame the objects first before using auto layout? 14:09
Also is there a reason why you auto layout the frames individually? Thankss
If you're doing a tutorial for complete beginners, you'd want to describe everything you're doing. Or it might help to put the keyboard shortcuts you're currently pressing in the video. I had to rewind the video several times to understand what you did. Don't take this as a negative criticism, but a space to improve your tutorials. Thank you. 😉
Thanks for the polite feedback. 👍
You're telling her/them to do more work in production, so you don't have to pause and replay this free video.
Maybe doing a little work on your part is a beneficial part of learning
They did say” crash” course and for auto layout not figma beginners per say
@@Line49Designalways one
It's not for newbies, I really liked the video as it doesn't get into details and direct on point
Please i have a question here 3:10 how did you do the aspect when extended it did not show after the lenght of the frame
Excellent, thank you
Hi, I am working with auto layout and I notice that on my layers, things are in the following order:
Device (frame with auto layout)
> Frame 1 (frame with auto layout)
>> Text Node 2
>> Text Node 1
On my canvas, they appear in the proper order, though:
Text Node 1
Text Node 2
Is there a reason why my layers have to be in the opposite order? I notice that yours seem to be in the correct order and it works as expected.
Super Helpful for me!
Glad to hear!
Great tutorial ✨thank you
I just confused about 1 part -
How did you make the button “closed” at the beginning so that the text was along with the button . And so you would be able to adjusted and change within Layout accordingly.
yes, excellent Tutorial, but i did get confused at the first part too, i don't know why it wasn't so clear or so easy go get the whole idea. Great Job anyway
WOW Super helpful
Make a video on figma component
Muito obrigado por essa aula incrível.
Just wondering, how did you make the button “closed” at the beginning so that the text was along with the button?
Thanks for this video.
Unfortunately the official CSS naming conventions getting far away and gets confusing like "frame", "hug", "row", "layout", ..
Superstar. Thanks so much
No matter what when I create a auto layout, the horizontal is always set to fixed
Hi! I have a question: for some reason, the “constraints and resizing” option is missing in my Figma. It’s not where it should be, and I can’t find it anywhere.
Also, I’m missing a couple of animations in prototypes, even though I have a Figma subscription.
What do you think the issue could be?
Under the "layout" option I have the resize option. You can also see the Constraints section after selecting a child element of a frame. If your problem is nothing like this, Figma has changed the User Interface. That may be why.
great tutorial! she's awesome
could you just not use the white background in frames? since changes are not visible when it comes to frames, you could have chosen another color?
Great!
If they try to mimic Flexbox, why not just incorporate Flexbox as it is? Just use the exact features and naming, so that people with css knowledge can use it immediately or even just allow to add css to make it work like in Penpot. This "hugging" thing is just how css behaves out of the box if you add padding around an object.
I watech your all video. you have more better explane all of us.
Qiara excet of endocrinology of non web development video like this ,, so plzzz do so that easier way to explain
Everything worked perfectly until I rounded the corners at the end. The corners for the table became round, but it looks like they are overlapped by the sharp corners of the rows. Not really sure what I did wrong 😅
hey, i know you've posted your comment a month ago, but just in case you still care i think i found the solution ! personally, in the auto layout, i selected "clip content" instead of "show content". after that the radius worked just fine :) have a nice day !
@@agathe-l8y Thank you! I actually wound up doing exactly that, but I still don't get why she didn't seem to have it selected in the demo
great tutorial and I thank you for that, while I beg you, dont't get me wrong, avoid that frying voice
This is not going to work since now Figma you have to apply the resize first before adding that auto layout or else the shapes will be squeeshed if you change auto layout directions. Took me hours to figure out
starbucks girl
Voice 🙄
Mam, Take breath for every few seconds, I think you're running out of Oxygen causes bit annoying "Vocal fry".
explaination is good but your accent is really annoying ..
Such a shame about the rather annoying forced Californian vocal fry...
Did I mention the voice fry was unbearable ? Not sure.
Don't watch the video, or even better, create your own video and make it BETTER.
Ermmm the vocal fry is my favourite part of the whole video 💅💅
@@tomschimana1009He’s such a douchebag
Unbearable voice fry.
Then you just close the video and move on. No need to comment if it's unbearable.
@@ImpureForce Did I mention the voice fry was unbearable ? Not sure.
sorry but you explain very boring
Auto-layout within auto-layout is such an "Inception" concept 🤯🧩