Responsive Design in Figma: Crash Course 2023
Вставка
- Опубліковано 10 чер 2024
- If you struggle with responsive desktop, tablet or mobile design in Figma - this is the video for you to finally grasp it.
🔴 Working File: timgabe.com/resources/figma-r...
Timecodes
00:00 Intro
02:48 Figma Intro
03:48 Figma Auto Layout, Constraints & Resizing
11:05 Breakpoints & Grids
17:24 Changing Sizes
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
Finally!! This is the first tutorial I've found that explains responsiveness in a way I can understand. Good job:)
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!
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 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!!
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!
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 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!!
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!!
You're soooooo good at explaining things! Everything is on point, examples, speed, amazing user experience! 🤓👍💯
thank you so much CD!! 🤩
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!! 🤩
hands down the best tutotrial, OMG thanks!
that's awesome to hear! thank you!!
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!!
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! 😃
@@Sasasala386me know 8❤❤❤❤❤❤❤❤❤❤❤❤❤u6uu76uyuuuuuy
Good job Tim! Super helpful
really glad to hear it! 🙏
excellent video. very knowledgeable. Thanks
Quality ++++
Content ++++
🎉 thanks !!!!!
beautifully so crisp and nicely explained in simplest language. thanks soo much
thank you for the support, deepa!!
Thanks for sharing 😊
This was awesome. Thank you!!!
thank you for supporting, my friend!
Great educational content Tim! Keep up the great work :)
really appreciate that Hubert 🤩 thank you so much! ☺️
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!! 🙏
This is pretty powerful. Great content Tim!
thanks my friend!!
pretty cool tutorial, I like it how you are calm and over it all!
thank you so much Mostafa! 😃
Is just f*++ great! You saved my life. Thumbs up Tim!
that’s so cool to hear, my friend 🙏🥳
Man 🎉 Thank You ✨
i may seem rushed, but i think i love you
thank you monsieur
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...
Thank you so much !
thank you!!
Dear Tim, thanks for your awesome videos & tutorials🤩. I think your last video is one of the best figma content in UA-cam. keep going on man 🙏
wow, Soroosh!! thank you, that really makes me happy my friend. 🤩
It was so helpful! Well done!
thank you!!
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! 💜
awesome lesson, thank you very much!
happy you liked it, my friend 🤩
it's a great video for me. Thanks a lot bro
that's awesome! thank you for commenting, friend!!
good tuts❤❤❤
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. 🙏
Thank u ! Very useful content
happy you liked it, Mohamed! 🙏😃
ın 20 min, you teached everything about responsive design including grid system. That perfect!
thanks a lot for the support, Özgür!!
“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.
For once a video that "explain" for real the principle of responsivness and doesn't mix everything ! Many thanx !
Thanks a lot!!!
happy to help, Taiga!! 😃
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 👌
I love your videos!
that’s so cool to hear, my friend 🙏🤩 thank you for the kind comment!!
Super bro 🔥
thanks a lot, 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
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!
GREAT showcase
really nice of you to say, Dharmraj! thanks a lot!!
Well explained tutorial!
thanks a lot man!
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! 💜
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 ❤️
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!!
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!
Good tut. (Nasty curtains... you kind of blend into them. Maybe try a contrasting colour to your skin tone?)
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 dont how the space between options under advanced autolayout settings. How do i fix it ?
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
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 😃
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.
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!
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 😃
In the first part, I don't see the spacing mode option. Please help, anyone!!
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!! 😃
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?
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 😩
how do you switch the order 15:55
your video is very useful thankyou but plz increase the volume of your device
thank you!! I will do that in the future!
i don't understand because when i went to constraints it was not there nor was my text fixed
please make a tutorial on fully responsive landing page because in UA-cam 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, 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!!
hero
thank you, friend!!
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
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!
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 are taking viewers to become professional designers
that's the goal, Muhammad!! 🤩
spacing mode is not there why?
not sure what you mean, my friend!
I believe Figma should switch all the FIXED parameters after applying Auto Layout without a user doing it.
Okay seems I am the only one in the entire world not getting auto layout correctly. Seems Figma has been updated or something, I cant find the spacing mode in the advanced layout you mentioned. I have tried a million things to no avail
sorry! they've updated the ui, so it doesn't look exactly like this anymore...
Did figma remove spacing mode? It's not there anymore.
they've shifted their UI a bit with the new update!
dang would be nice if their were exercise files so we could follow along
here it is, my friend:
www.figma.com/file/dgqPTjnfR03zfHVxGjeRQz/Responsive-design-in-Figma?type=design&node-id=0%3A1&t=DKdvUcNcqkxU4kcz-1
@@TimGabe awesome thanks!
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!
please increase the volume of the video, cant hear clearly
😂 please use Headphones.
updated the mic since this!! 🙏
Your calling it grouping when applying auto layout is confusing.
please help me fix my textttttttt, my text is not reisizing
not sure what the issue is, Kashif 😩 you will always have to do text resizing manually since it doesn't work like a "real" responsive website
Everything is good except the voice intensity. As its very low
the audio is not loud enough😒
my bad!! will be better in the future, Lisa!!
Your ear is not loud enough, actually. Or your device is as faulty as your ear.
Ur audio is low
thanks for the feedback!
Sound Quality is so poor can't even hear Properly
sorry 'bout that!!
your voice is so low!!!
Man I have to say the stupid OK 👌 still for this video really turned me off
haha, that one actually is a bit stupid...