Wow THANK YOU THANK YOU THANK YOU for making all your videos. I'm doing the Google Coursera UX course right now and they keep saying you need to design your sites to be responsive and yet there is barely any detailed instructions on why and how that can be done. I am so grateful to you for breaking it down step by step. You are an awesome teacher! Please keep doing what you are doing!!!!🙌👏🤟
Even just after seeing the nav bar alone, wow, thank you. Best video ever. I could have easily wasted an entire day or two on a wild goose chase trying to learn how to do this, but you did it quickly and easily. Legend
this was incredibly helpful. been designing for years and have never done this however now that im creating a website in framer, this has saved me probably 20 hours of headache!
I don't remember how many videos I checked before only to learn half of the stuff you explained in this video. Straightforward, simple but also powerful video. Thank you so much for your effort :)
Just can't believe what I'm learning from your channel Mr Gabe! Me and my girlfriend are moving from graphic to UI UX design, your channel right now is probably the simplest, most direct and comprehensive content on Figma and UI design, I want to thank you so much for this! Remember this comment because right now I'm out of a job (because I'm changing careers) but soon I'll have a portfolio ready and will come back to tell you the good news about my new job, I'm certain of it. Your channel has being helping SO MUCH.
You are not only answering how to do it but WHY do this or that way, and I think from all the videos and courses I've seen yours is the only one that focus on this approach of doing X or Y because of H reason. It's future proofing when things change, and they always are.
Matheus, where do I even begin? what an incredibly thoughtful and kind comment. thank you so much for spending the time to write this and share it with me, it really does put me in such a great mood whenever I hear things like this. thank you 1000x! 🤩 can’t wait for you to come back in a couple of months and telling me about you and your girlfriend’s job situation! 😃
It feels so good to see that all that I have learned from your past videos is applied here and that most of the things you showed here I have already practiced in real life! I still learned a lot of new stuff from this video. I would love to see more of this topic with a deeper approach! I still feel that I improvised when it comes to creating landing pages and that kind of stuff at my job haha. Thanks, Tim!
thanks a lot Andrés!! 😃 I’ll try to create content that goes deeper - want to cover the full journey of design for you all! and thanks for the kind comments on the shirt, my friend! 💜
I wanna thank you so much for this video you know you're the only person who could explain the responsive design, I have watched many videos and am still feeling lost but this is the most helpful ❤ really May Allah bless you for this video ❤
Amazing, best video I've seen so far about responsiveness, auto-layout and constraints all together. Simple, straightforward, great explanations of how and why. Great work!
Brilliant! You have the amazing ability to explain complicated topics simply and quickly. I have two questions: - What's the tool you are using at 2:24 to read out breakpoints of various sites? - Is there a way to somehow connect three frames (desktop, tablet, mobile) so they work together in presentation mode like they would in real life. So when I hit a breakpoint shrinking the browser width the appropriate frame appears? Thanks!
that’s very nice of you to say, thank you 🙏 1. it’s the native inspector tool in the Chrome/Brave browser 😃 2. there’s a plugin that does this, just search for Breakpoints in the community tab 🙏
So grateful for finding your channel. You are answering every thought i ever head will working in figma. Keep it up! I can tell the way you create your layouts that they are very easy to organize in css code which i really like. Hope that the channel keeps growing.
I love how organized all your content is and it all follows a logic. Great video quality, pleasant voices and overall glad I found your channel! Wish you more followers! 🔥
Thanks a lot for sharing your knowledge with everyone, you're definitely one of if not the best go-to Figma and design teacher on youtube, at least for me
Matevž… that really means a lot to me considering how many great teachers we have in the design space. makes me so pumped to continue making videos for you all!! 🤩
January 2024 and this is the first time I've seen this video. However, I would have liked to see it sooner. Too bad. I love your content and so I'm subscribing.
I find it counter intuitive to create designs on their maximum width as opposed to using the minimal values. So for example, for mobile I'd use 360px frame instead of 640px, since it's one of the smallest smartphone resolutions available. It's easier to predict how something would scale up than down + we'll avoid our layouts from getting too buggy or cluttered. What are your thoughts on this?
I value your educating us on the complexities of responsive design. Your interest for the topic made the course engaging and informative. It was quite wonderful how you were able to express complex topics in a way that anyone could understand... I'm glad I got the chance to learn something from you. I'm grateful for you brother. Can you please tell me the major difference between Framer and webflow if possible? which one should I prefer?
such a cool comment, Kalyan. these kinds of candid, detailed comments make me so happy and really help me improve 🙏☺️ so right back at you - I’m grateful for you, my friend. In my mind Framer is the first no-code website builder that’s actually built for designers. Webflow is super powerful and allows you to achieve more things (currently), but is also a lot more clunky and complex. Hope that helps 👌
That's incredible! Thank you, so much for such an amazing work. All the information is easy to follow and very easy to understand. Great job! Shoutout from Ukraine 🇺🇦
Thank you. How great is this. I finally understand Constraints and Resizing. Am Doing your "Responsive Design in Figma: Crash Course 2023" I couldn't delete your Figma file on my Figma account even though I folowed all the info on the Figma site. - Figma Help said it was a bug and to do a Figma Report which I did. Have you any suggestions? thanks so much.
@@TimGabe this is from an email from FIGMA: As you do not own the file you downloaded, you do not have the ability to remove it. The shared files section is a place for you to see which files have been shared. I do not recommend trying to delete any of those files. If you have "can edit" permission on a shared file and accidentally delete it, other members of the file won't be able to see it. To prevent this, it's best to keep all files under the "Shared Files" section as they are. I find this strange. I was just trying to keep my FIGMA account tidy and get rid of things I no longer need. Again thanks for your classes. Really simple and clear
I noticed that when you would make the Desktop frame an auto layout as well and apply a box model where every section container spans the width of the Desktop frame you wouldn't have to set constraints for any of the elements.. As everything is inside an auto layout.. It works for the navbar for example. Is there a reason why anyone would pick one way over the other maybe? Do you auto layout the entire Desktop/tablet/mobile frame or leave it as a group and only auto layout the containers within? Could you maybe make a video on that, how to structure webpages.. whether to frame, group or auto layout them.. Thanks in advance! Great videos!
@@TimGabe it could be nice to do a video where you create an app design from scratch, not a big one but just one to see how a pro could build it using components autolayouts constraints etc etc, im doing my own startup and i want to know if im designing it good.... thank you
For something like the nav bar - if you wanted to add 16px padding on either side and extend that frame from edge to edge + set that nav bar to fill the container horizontally, would that achieve the same thing in terms of responsiveness? If so, which is the more widely used/acceptable method?
if I understand you correctly, I think both ways work just fine! at this detailed level your implementation in Figma doesn't really matter that much, as long as you can communicate the behaviour to your devs 😃
Tim, I have a question. A lot of times, when I already have some autolayouts, I can't see the Constraints. Do you have any advice? Btw, as I said before, your videos are the best , thank you!!!
I have a few questions: 1. Is there a way to scale font size (not text box) for the text inside the responsive frame? I can use scale tool, but I would like the scale to be interactive and to follow responsive change of the frame width. In other words, to keep the same text wrap and number of text lines while the frame width changes? 2. Is the gradual text size scale in responsive design usual, or it usually have defined font sizes for each of breakpoints? 3. Seems that inside auto-layout frame, you can set elements to scale size (setting fill-container for them) or to set spacing mode to "space between", but you can have both at the same time (scale elements and space between proportionally), right? Thanks!
1. if I understand you correctly, I'm afraid not... 😩 2. the most used approach is to use different font sizes for different breakpoints, but it's becoming more and more common to use text sizing based on the viewport width 😃 3. yes! you can use both as a combo for sure!!
Thanks for the tutorial. I got a question about the mobile version. When you hide the links for to rename the button to menu, what if I want something else in general for example a hamburger icon. In that case will I just delete the button and bring in the hamburger menu?
hey Ralph! simply too many comments for me to get into details nowadays, but i'm launching paid mentoring on my upcoming website (timgabe.com) if you want to chat about things like this!
please make a tutorial on fully responsive landing page because in RUclips I have seen lots videos on responsive webpage but they all are making only hero section with very less UI content. if its possible plz make a full size responsive landing page
Tim my friend I have a question. In one episode of Flux academy you talked about responsive design and I I live examples you showed how to change the layout. What plugin in chrome do you use for this? So that you can easily type in pixels manually or use the mouse to decrease, increase the width of the browser. What is the plugin in chrome. Thank you from the bottom of my heart ❤️
Hello, I am a bit confused. I have watched your earlier videos about grid and the 8/4 px rule. In one of them you recommend different grid settings with a container of 1140px as a standard. Now with the settings in this video for desktop my container is 1312px. Also the single columns do not match with the 8/4 px rule. One column is 87px wide, two columns 199px, which can not be divided by either 8 or 4. Do I use the columns only to align my elements and not for their width? Thank you for your videos!
i have seen some of your videos and without headphones, i can barely listen the audio in my laptop at highest volume, only for this video. Hope you adjust that.
Could you make a more detailed video where you design a landing page and make it fully responsive and adaptive. The video will be much longer I know, but will be much more explanatory. Please!
How can I change the heights of the contents? If I want to have a video filling the entire screen, for example, I will need to adjust its height when changing from a 1600x900 screen to a 1440x1024 one, and I don't know how to do that... :(
One big problem with this. If you make the page itself in auto layout, then the constraints menu does not appear for any of your sections on the page. You cannot have constraints for your nav bar, if your page itself is is set to auto layout
Is there a way to add auto layout to everything after everything has already been made into a component? I have a project that I am trying to make responsive, but I already made all the components. Will I have to start over and do the auto layout first?
“There’s no one breakpoint that’s correct” Semi-valid, but there may well be tools your dev team use, such as Bootstrap or Tailwind. If they do, you MUST use those.
Put keyboard presses on the video or make sure to tell how you do every single action even the smallest one, not just say "I will switch the order like that..." at 15:53. You do this a lot, keep assuming people already knows these small things. It could be that shortcut for me or something else for another person. You can watch some Piximperfect videos to have an idea.
Hey im having some problems when i follow all the steps and try to resize the frame the text on the eift side of the image starts shrinking in size but in this video the container is shrinking and the text remains the same size which causes the text to move to next line
I think this problem was because of the font the font used in the video is not available in my figma so i tried using different font and now its working fine. Is there any way to add fonts in figma?
exercise file 🤩:
www.figma.com/file/dgqPTjnfR03zfHVxGjeRQz/Responsive-design-in-Figma?type=design&node-id=0%3A1&t=DKdvUcNcqkxU4kcz-1
Wow THANK YOU THANK YOU THANK YOU for making all your videos. I'm doing the Google Coursera UX course right now and they keep saying you need to design your sites to be responsive and yet there is barely any detailed instructions on why and how that can be done. I am so grateful to you for breaking it down step by step. You are an awesome teacher! Please keep doing what you are doing!!!!🙌👏🤟
thank you so much for such a long and candid comment, Jacqueline!! really appreciated 🙏
same here
Even just after seeing the nav bar alone, wow, thank you. Best video ever.
I could have easily wasted an entire day or two on a wild goose chase trying to learn how to do this, but you did it quickly and easily.
Legend
this was incredibly helpful. been designing for years and have never done this however now that im creating a website in framer, this has saved me probably 20 hours of headache!
Thank you. This video helped me understand everything i needed. My designs are now fully responsive!!
I have been watching hundreds of figma tutorials but yours are the most clear and practical one! Thank you so much and please keep doing this!
that's soooo cool to hear, Yoshiko... thanks a lot!!
ın 20 min, you teached everything about responsive design including grid system. That perfect!
thanks a lot for the support, Özgür!!
I don't remember how many videos I checked before only to learn half of the stuff you explained in this video. Straightforward, simple but also powerful video. Thank you so much for your effort :)
Just can't believe what I'm learning from your channel Mr Gabe! Me and my girlfriend are moving from graphic to UI UX design, your channel right now is probably the simplest, most direct and comprehensive content on Figma and UI design, I want to thank you so much for this! Remember this comment because right now I'm out of a job (because I'm changing careers) but soon I'll have a portfolio ready and will come back to tell you the good news about my new job, I'm certain of it. Your channel has being helping SO MUCH.
You are not only answering how to do it but WHY do this or that way, and I think from all the videos and courses I've seen yours is the only one that focus on this approach of doing X or Y because of H reason. It's future proofing when things change, and they always are.
Matheus, where do I even begin? what an incredibly thoughtful and kind comment. thank you so much for spending the time to write this and share it with me, it really does put me in such a great mood whenever I hear things like this. thank you 1000x! 🤩
can’t wait for you to come back in a couple of months and telling me about you and your girlfriend’s job situation! 😃
@@MeniscoManeirome know 8❤❤❤❤❤❤❤❤❤❤❤❤❤u6uu76uyuuuuuy
Men your audio and video quality is so clean, loved your content. Thanks a lot! Hug from Argentina.
really appreciate this, my friend 🤩 greetings back to you from Sweden!!
Thank you Tim. I didn't find anyone who explains like you. Super easy. I really really appreciate it:)
comments like these make me excited to continue creating content!! thank you!!
hands down the best tutotrial, OMG thanks!
that's awesome to hear! thank you!!
For once a video that "explain" for real the principle of responsivness and doesn't mix everything ! Many thanx !
beautifully so crisp and nicely explained in simplest language. thanks soo much
thank you for the support, deepa!!
Finally!! This is the first tutorial I've found that explains responsiveness in a way I can understand. Good job:)
Yes, I Agreed with Your's Word's......I am also realized the Same thing....
It feels so good to see that all that I have learned from your past videos is applied here and that most of the things you showed here I have already practiced in real life! I still learned a lot of new stuff from this video. I would love to see more of this topic with a deeper approach! I still feel that I improvised when it comes to creating landing pages and that kind of stuff at my job haha. Thanks, Tim!
thanks a lot Andrés!! 😃 I’ll try to create content that goes deeper - want to cover the full journey of design for you all!
and thanks for the kind comments on the shirt, my friend! 💜
The way you teach slow and steady is best.
This video is probably the most valuable of all on the ux world
This video has absolutely NOTHING to do with UX
@@jaleger2295 With all respect sr you need to get laid
@@jaleger2295 ok
I wanna thank you so much for this video you know you're the only person who could explain the responsive design, I have watched many videos and am still feeling lost but this is the most helpful ❤ really May Allah bless you for this video ❤
that's so nice of you to say, my friend! thank you for the comment! 💜
Amazing, best video I've seen so far about responsiveness, auto-layout and constraints all together. Simple, straightforward, great explanations of how and why. Great work!
that’s great to hear, Yuri 😃 thanks a lot!!
Brilliant! You have the amazing ability to explain complicated topics simply and quickly. I have two questions:
- What's the tool you are using at 2:24 to read out breakpoints of various sites?
- Is there a way to somehow connect three frames (desktop, tablet, mobile) so they work together in presentation mode like they would in real life. So when I hit a breakpoint shrinking the browser width the appropriate frame appears?
Thanks!
that’s very nice of you to say, thank you 🙏
1. it’s the native inspector tool in the Chrome/Brave browser 😃
2. there’s a plugin that does this, just search for Breakpoints in the community tab 🙏
@@TimGabe Perfect, many thanks!
So grateful for finding your channel. You are answering every thought i ever head will working in figma. Keep it up! I can tell the way you create your layouts that they are very easy to organize in css code which i really like. Hope that the channel keeps growing.
that's so nice to hear, Relja! that's exactly what I want. 🤩
really appreciate your kind comment 🙏 take care!
This is an awesome teaching. I've watched many videos that left me confused but this is so detailed. Thank you
I love how organized all your content is and it all follows a logic. Great video quality, pleasant voices and overall glad I found your channel! Wish you more followers! 🔥
so nice of you to say!! thank you 🤩
Thank you so much!!!!!! Also, thank you for not waiting to have the perfect “everything” before making your videos.
I love your content!!!!!!!🎉🎉🎉🎉🎉🎉
The way you teach its so easy to understand! It's just sad that Figma has updated, and som e of the stuff doesn't work this way anymore...
Thanks a lot for sharing your knowledge with everyone, you're definitely one of if not the best go-to Figma and design teacher on youtube, at least for me
Matevž… that really means a lot to me considering how many great teachers we have in the design space. makes me so pumped to continue making videos for you all!! 🤩
You're soooooo good at explaining things! Everything is on point, examples, speed, amazing user experience! 🤓👍💯
thank you so much CD!! 🤩
Thanks Tim. Most helpful video on responsive
This is pretty powerful. Great content Tim!
thanks my friend!!
Good content, really helpful and nice biceps! :D Thanks Tim you are nice teacher! Take care!
haha, appreciate the kind words Christopher 🤩 take care man!! 🙏
slow and steady, you are awesome!
Good job Tim! Super helpful
really glad to hear it! 🙏
pretty cool tutorial, I like it how you are calm and over it all!
thank you so much Mostafa! 😃
January 2024 and this is the first time I've seen this video. However, I would have liked to see it sooner. Too bad.
I love your content and so I'm subscribing.
thanks a lot, internet friend!!
Is just f*++ great! You saved my life. Thumbs up Tim!
that’s so cool to hear, my friend 🙏🥳
Bro, this was amazing.. Really helpful! Loved the video
This was super helpful, thank you so much, just save my morning 😊
Excellent content, Gabe, very helpful. I would like to mention that the audio level is quite low compared to other videos on youtube.
really appreciate the feedback Luan! will take note of this and see if I can make the levels a bit higher for future videos. 🙏
This was awesome. Thank you!!!
thank you for supporting, my friend!
Amazing Explanation..... God bless you
It was so helpful! Well done!
thank you!!
Dear Tim, thanks for your awesome videos & tutorials🤩. I think your last video is one of the best figma content in RUclips. keep going on man 🙏
wow, Soroosh!! thank you, that really makes me happy my friend. 🤩
I find it counter intuitive to create designs on their maximum width as opposed to using the minimal values. So for example, for mobile I'd use 360px frame instead of 640px, since it's one of the smallest smartphone resolutions available. It's easier to predict how something would scale up than down + we'll avoid our layouts from getting too buggy or cluttered. What are your thoughts on this?
great point, my friend 🙏 I think both approaches are fine as long as you make sure to resize your frames and stress test them for edge cases 😃
I value your educating us on the complexities of responsive design. Your interest for the topic made the course engaging and informative. It was quite wonderful how you were able to express complex topics in a way that anyone could understand... I'm glad I got the chance to learn something from you. I'm grateful for you brother. Can you please tell me the major difference between Framer and webflow if possible? which one should I prefer?
such a cool comment, Kalyan. these kinds of candid, detailed comments make me so happy and really help me improve 🙏☺️ so right back at you - I’m grateful for you, my friend.
In my mind Framer is the first no-code website builder that’s actually built for designers. Webflow is super powerful and allows you to achieve more things (currently), but is also a lot more clunky and complex. Hope that helps 👌
That's incredible! Thank you, so much for such an amazing work. All the information is easy to follow and very easy to understand. Great job!
Shoutout from Ukraine 🇺🇦
thank you so much for this nice comment, Danny. much love to you and Ukraine! 💜
i may seem rushed, but i think i love you
Thank you. How great is this. I finally understand Constraints and Resizing.
Am Doing your "Responsive Design in Figma: Crash Course
2023"
I couldn't delete your Figma file on my Figma account even though I folowed all the info on the Figma site. - Figma Help said it was a bug and to do a Figma Report which I did. Have you any suggestions? thanks so much.
that's awesome!! thank you for commenting!
not sure what the issue might be there... 😫
@@TimGabe this is from an email from FIGMA: As you do not own the file you downloaded, you do not have the ability to remove it. The shared files section is a place for you to see which files have been shared. I do not recommend trying to delete any of those files. If you have "can edit" permission on a shared file and accidentally delete it, other members of the file won't be able to see it. To prevent this, it's best to keep all files under the "Shared Files" section as they are.
I find this strange. I was just trying to keep my FIGMA account tidy and get rid of things I no longer need.
Again thanks for your classes. Really simple and clear
Learnt alot, thank you.😊👍
awesome lesson, thank you very much!
happy you liked it, my friend 🤩
LOVE YOUR TEACHING MAN THANK YOU SO MUSH IT'S WAS REALLY HELPFUL.🙏🙏🙏💙💙
Great educational content Tim! Keep up the great work :)
really appreciate that Hubert 🤩 thank you so much! ☺️
Quality ++++
Content ++++
🎉 thanks !!!!!
I noticed that when you would make the Desktop frame an auto layout as well and apply a box model where every section container spans the width of the Desktop frame you wouldn't have to set constraints for any of the elements.. As everything is inside an auto layout.. It works for the navbar for example. Is there a reason why anyone would pick one way over the other maybe? Do you auto layout the entire Desktop/tablet/mobile frame or leave it as a group and only auto layout the containers within? Could you maybe make a video on that, how to structure webpages.. whether to frame, group or auto layout them.. Thanks in advance! Great videos!
it's a great video for me. Thanks a lot bro
that's awesome! thank you for commenting, friend!!
Great teacher, keep going forward
comments like this really makes me excited to continue creating educational material, Uliks 🙏 thank you so much 😃
@@TimGabe it could be nice to do a video where you create an app design from scratch, not a big one but just one to see how a pro could build it using components autolayouts constraints etc etc, im doing my own startup and i want to know if im designing it good.... thank you
Thank you so much !
thank you!!
Thank u ! Very useful content
happy you liked it, Mohamed! 🙏😃
For something like the nav bar - if you wanted to add 16px padding on either side and extend that frame from edge to edge + set that nav bar to fill the container horizontally, would that achieve the same thing in terms of responsiveness? If so, which is the more widely used/acceptable method?
if I understand you correctly, I think both ways work just fine! at this detailed level your implementation in Figma doesn't really matter that much, as long as you can communicate the behaviour to your devs 😃
excellent video. very knowledgeable. Thanks
Tim, I have a question. A lot of times, when I already have some autolayouts, I can't see the Constraints. Do you have any advice?
Btw, as I said before, your videos are the best , thank you!!!
the constraints will only be seen for the elements inside of a frame 😃 so maybe you don't have them placed in a frame?
also, thank you so much for the kind words!!
I have a few questions:
1. Is there a way to scale font size (not text box) for the text inside the responsive frame? I can use scale tool, but I would like the scale to be interactive and to follow responsive change of the frame width. In other words, to keep the same text wrap and number of text lines while the frame width changes?
2. Is the gradual text size scale in responsive design usual, or it usually have defined font sizes for each of breakpoints?
3. Seems that inside auto-layout frame, you can set elements to scale size (setting fill-container for them) or to set spacing mode to "space between", but you can have both at the same time (scale elements and space between proportionally), right?
Thanks!
1. if I understand you correctly, I'm afraid not... 😩
2. the most used approach is to use different font sizes for different breakpoints, but it's becoming more and more common to use text sizing based on the viewport width 😃
3. yes! you can use both as a combo for sure!!
@@TimGabe Thanks for the precise reply, Tim! So basically for now we can't simulate "text sizing based on the viewport width" in Figma?
GREAT showcase
really nice of you to say, Dharmraj! thanks a lot!!
Good tut. (Nasty curtains... you kind of blend into them. Maybe try a contrasting colour to your skin tone?)
your video is very useful thankyou but plz increase the volume of your device
thank you!! I will do that in the future!
Thanks for the tutorial. I got a question about the mobile version. When you hide the links for to rename the button to menu, what if I want something else in general for example a hamburger icon. In that case will I just delete the button and bring in the hamburger menu?
hey Ralph! simply too many comments for me to get into details nowadays, but i'm launching paid mentoring on my upcoming website (timgabe.com) if you want to chat about things like this!
please make a tutorial on fully responsive landing page because in RUclips I have seen lots videos on responsive webpage but they all are making only hero section with very less UI content. if its possible plz make a full size responsive landing page
curious to hear what you felt this didn't cover that a full page would? is it the footer? the nav? or something else?
I want to learn a full landing page top to bottom. If u teach us will be very very helpful
Tim my friend I have a question. In one episode of Flux academy you talked about responsive design and I I live examples you showed how to change the layout. What plugin in chrome do you use for this? So that you can easily type in pixels manually or use the mouse to decrease, increase the width of the browser. What is the plugin in chrome. Thank you from the bottom of my heart ❤️
Great video as usual!
One question: why I don't have constraints in autolayout? Even when I copy your top panel to my figma file.
You are taking viewers to become professional designers
that's the goal, Muhammad!! 🤩
is it possible to save proportion of image size in cards? so it would increase not only horizontal but vertical too?
if I understand your question correctly, I'm afraid you can't 😩
Thanks for sharing 😊
Hello, I am a bit confused. I have watched your earlier videos about grid and the 8/4 px rule. In one of them you recommend different grid settings with a container of 1140px as a standard. Now with the settings in this video for desktop my container is 1312px. Also the single columns do not match with the 8/4 px rule. One column is 87px wide, two columns 199px, which can not be divided by either 8 or 4. Do I use the columns only to align my elements and not for their width? Thank you for your videos!
yes, columns are for general alignment and don't have to follow the 8/4 pt rule!
container sizes will vary based on your project needs 😃
Thanks a lot!!!
happy to help, Taiga!! 😃
I love your videos!
that’s so cool to hear, my friend 🙏🤩 thank you for the kind comment!!
Well explained tutorial!
thanks a lot man!
Thats so helpfull ❤
Super bro 🔥
thanks a lot, friend!
i have seen some of your videos and without headphones, i can barely listen the audio in my laptop at highest volume, only for this video. Hope you adjust that.
Could you make a more detailed video where you design a landing page and make it fully responsive and adaptive. The video will be much longer I know, but will be much more explanatory. Please!
might very well happen in the future!! 😃
Man 🎉 Thank You ✨
how do you switch the order 15:55
Well explained
How can I change the heights of the contents? If I want to have a video filling the entire screen, for example, I will need to adjust its height when changing from a 1600x900 screen to a 1440x1024 one, and I don't know how to do that... :(
spacing mode is not there why?
not sure what you mean, my friend!
One big problem with this. If you make the page itself in auto layout, then the constraints menu does not appear for any of your sections on the page. You cannot have constraints for your nav bar, if your page itself is is set to auto layout
Is there a way to add auto layout to everything after everything has already been made into a component? I have a project that I am trying to make responsive, but I already made all the components. Will I have to start over and do the auto layout first?
you can go and add auto-layout to your components even after the fact! 😃
@@TimGabe Thanks! Also, I would love to see you make a video on style guide creation in Figma
“There’s no one breakpoint that’s correct”
Semi-valid, but there may well be tools your dev team use, such as Bootstrap or Tailwind. If they do, you MUST use those.
thank you :)
That Shure MV7 does not like to be away from your face - the volume in this video is really low 😅
heard this a lot in the comment field for this video 😅
Yeah haha sorry, I bet you did.@@TimGabe
you look so tired hahaha rest bro btw it really help me a lot!
thank you monsieur
i dont how the space between options under advanced autolayout settings. How do i fix it ?
Put keyboard presses on the video or make sure to tell how you do every single action even the smallest one, not just say "I will switch the order like that..." at 15:53. You do this a lot, keep assuming people already knows these small things. It could be that shortcut for me or something else for another person. You can watch some Piximperfect videos to have an idea.
sorry about that! will definitely try to remember this for future tutorials!
Hey im having some problems when i follow all the steps and try to resize the frame the text on the eift side of the image starts shrinking in size but in this video the container is shrinking and the text remains the same size which causes the text to move to next line
I think this problem was because of the font the font used in the video is not available in my figma so i tried using different font and now its working fine. Is there any way to add fonts in figma?
glad you fixed it!
yes, if you google "add custom fonts to figma" there are great guides as the top results!
It’s not possible to do this for a full landing page right?
good tuts❤❤❤
In the first part, I don't see the spacing mode option. Please help, anyone!!
i don't understand because when i went to constraints it was not there nor was my text fixed
How did you switch the order of the image and headings in the tablet view, you glossed over it so quickly I didn't catch it.
you can just drag and drop it and it changes automatically