This is great content for learning autolayout and understanding the dev side too. We need more videos showing figma to autolayout to development on youtube. Great video man!
I found this video EXTREMELY HELPFUL!!! OMG! I am a self-taught designer, and I never learned how to design around using the box-model. I am now trying to learn how to code my designs, and seeing this video really put into perspective how much easier life would be if I designed having this model as a reference. Thank you for this advice! I would love to see more content like this!
Thank you, Adrian. I love all of your tutorials. I really look forward to learning more from you. Please could you also show Windows users how to use shortcuts 😢
Thanks for the tutorial. I am curious though why you would need a container inside the header which is siting already inside another frame (hero design) which is sitting in the canvas? Is the container really needed? Also the CTA in the container in the header is just s a text/button. Why add autolayout on the single item? 🙏
Im downloading the Figma file you linked but its already at its finished product state and I am unable to follow along. The figma file you linked has 2 artboards (fixed width and full width), but no starting point where Auto Layout has not been applied yet like what we see on your screen. Am I missing something here? Thanks in advance
great video! just a doubt: is there a specific reason why you frame inside another frame like at 6:10? aren't they just the same? what am I missing? thank you very much
Thank u Adrian for the video! I would love to watch the follow up one. I have a question tho, u sometimes used frames instead of autolayout, centering them with constraints; now, while - as u showed - this works when u stretch the design, I guess it wouldn't when compressing it. In that case would it need autolayout and left and right constraints, right? Dario
Hey Dario, if you download the figma file you’ll see the second use case stretching the designs 😊 I didnt want to make the tutorial too long but I’ll cover this in the follow up 🙌
Hi sir, I am unable to get the ai layers of the labels even after using convertify plug in, also I tried seperating every layer before droping them on figma too, still its coming as jpg image, what to do ?? Please help
Hi Adrian, thank you for sharing the video and this is super helpful! I have one question regarding the constraints: in your video you set the "Master" frame's (such as 'Hero', 'Logo') constraint as "Left and right" and the Contrainer under it with a "fixed" width. I wonder if it would be different if I set the Master frame's constraint as "Center" and the Container under it with a "fill container" width? The results look the same but I do wonder if you have a specific reason for setting the constraint in that particular way. I hope my question makes sense to you :)
Hi, Adrian thanks for the video it's really good. Can you plz explain if you are following an 8px grid then why you did give 20px left-right padding to the left column of the hero section instead of it's could be 16 or 24px?
Hi! Hope you are doing great. I think he did that because there’s a 4 point grid system as well. This system is awesome because it helps you place elements a little bit closer to each other (proximity which is one of Gestault’s principals) without breaking your initial 8 point grid. It helps you balance out your design because sometimes there’s too much of a gap in 8px, and 4px will give you that visual balance an space you are looking for. Hopefully you understand a little bit better now. Kind regards!🎉
Hey Miodrag, that's not a possibility as of now. I might record a mini-tutorial about building a landing page in Figma, though. I'll keep you guys posted!
About Books, they are so well written and explained, and best they are whit practice Figma files. After studying UI Adrian books and practice for 7 months I got job in nice web design Agency in Riga 😎
This is the best video in 2023 period
This is great content for learning autolayout and understanding the dev side too. We need more videos showing figma to autolayout to development on youtube. Great video man!
Will do! I'll post a figma to framer tutorial soon :)
I found this video EXTREMELY HELPFUL!!! OMG! I am a self-taught designer, and I never learned how to design around using the box-model. I am now trying to learn how to code my designs, and seeing this video really put into perspective how much easier life would be if I designed having this model as a reference. Thank you for this advice! I would love to see more content like this!
Finally figured out what was keeping things from being centered. Thank you!!!
You're better then skillshare, straight to the point, good explanations. Love it
Part two would be cool! Thank you, Adrian.
Thankyou so much for your videos. M a beginner and I was literally struggling to find a to the point tutorial.
now in this video voice quality is very good plz keep the quality maintain in all the tutorials and the video is very useful thankyou very much
Post that follow up! We love all of your videos adrian, thank you!
Lets go Adrian, hoping to see you become the best UX content creator on UA-cam as well. Your IG shorts and lessons are amazing bro.
Thank you brother! Appreciate it 🙏🏼
Awesome video! And thank you for working on your sound don't have don't strain my ears to hear you. Thanks.
No worries! I'll keep improving the quality ✌
If you can give a basic prototype tutorial, you've done a great job
I would love to see that follow up!
Me too
Alright! Working on it then :)
Excellent walk through!
Thanks a lot Rob! 🤝
Wow. That was incredibly useful, well explained and easy to understand. I'll check out more videos
Thanks a lot!
So helpful as always! Love these tutorials more than anything else!!
Always the amazing content😌..
Thanks Rahul!
Thank you, Adrian. I love all of your tutorials. I really look forward to learning more from you. Please could you also show Windows users how to use shortcuts 😢
Thanks for this video! 😎
Happy to share :)
Thanks for your Books bro 🙌
Thanks for the tutorial. I am curious though why you would need a container inside the header which is siting already inside another frame (hero design) which is sitting in the canvas? Is the container really needed? Also the CTA in the container in the header is just s a text/button. Why add autolayout on the single item? 🙏
May I ask at 5:21 why we should add another command+ A (auto-layout) again? thank you
Yeah. He did not explain why he does that twice
Same question.
I believe this will remain a mystery.
Im downloading the Figma file you linked but its already at its finished product state and I am unable to follow along. The figma file you linked has 2 artboards (fixed width and full width), but no starting point where Auto Layout has not been applied yet like what we see on your screen. Am I missing something here? Thanks in advance
Awesome!!
another lovee for you - Krishna Gupta(Mech.)
Much love!
Great video, very good explaination. What software do you use that shows your keyboard selection on screen? Thanks.
great video! just a doubt: is there a specific reason why you frame inside another frame like at 6:10? aren't they just the same? what am I missing? thank you very much
Thank u Adrian for the video! I would love to watch the follow up one.
I have a question tho, u sometimes used frames instead of autolayout, centering them with constraints; now, while - as u showed - this works when u stretch the design, I guess it wouldn't when compressing it. In that case would it need autolayout and left and right constraints, right?
Dario
Hey Dario, if you download the figma file you’ll see the second use case stretching the designs 😊 I didnt want to make the tutorial too long but I’ll cover this in the follow up 🙌
Thanks brother
My pleasure 👋
Is it necessary to nest layouts ?
We need the second part
Hi sir, I am unable to get the ai layers of the labels even after using convertify plug in, also I tried seperating every layer before droping them on figma too, still its coming as jpg image, what to do ?? Please help
Why do I have no option for spacing mode in the advanced auto layout panel ??????? 🤔 🤔
Hi Adrian, thank you for sharing the video and this is super helpful! I have one question regarding the constraints: in your video you set the "Master" frame's (such as 'Hero', 'Logo') constraint as "Left and right" and the Contrainer under it with a "fixed" width. I wonder if it would be different if I set the Master frame's constraint as "Center" and the Container under it with a "fill container" width? The results look the same but I do wonder if you have a specific reason for setting the constraint in that particular way. I hope my question makes sense to you :)
what about 1920p resolution screen, which column type (centre/stretch) should we use for bigger screen size than 1440p?
Amazing video! Can you do a similar tutorial but for a dashboard? Thanks!
Thanks! I'll try to think of something, sure!
@@uiadrian thanks so much! 🙏🏼
how did you get the 1248 in the video @ 9:55
can you tell me what camera you use for Video ?
Sure, it's Sony A7III with Sigma 2470 GMII lens :)
I am working on my new Shopify website. Is it possible to at such animation at shopify? And how?
Hi, Adrian thanks for the video it's really good. Can you plz explain if you are following an 8px grid then why you did give 20px left-right padding to the left column of the hero section instead of it's could be 16 or 24px?
Hi! Hope you are doing great. I think he did that because there’s a 4 point grid system as well. This system is awesome because it helps you place elements a little bit closer to each other (proximity which is one of Gestault’s principals) without breaking your initial 8 point grid. It helps you balance out your design because sometimes there’s too much of a gap in 8px, and 4px will give you that visual balance an space you are looking for. Hopefully you understand a little bit better now. Kind regards!🎉
Great video!
One question, is it possible to buy only figma files of landing pages from figma mastery course
Hey Miodrag, that's not a possibility as of now. I might record a mini-tutorial about building a landing page in Figma, though. I'll keep you guys posted!
some new information to think about 😅
Yeah, it is a bit to process 😄
🚀
hi value video , hi hi value
Highly recommend guys Adrian’s books about web design and mobile ( Android and IOS )
⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
About Books, they are so well written and explained, and best they are whit practice Figma files. After studying UI Adrian books and practice for 7 months I got job in nice web design Agency in Riga 😎
me who thought he looks like ABD