Responsive Design in Figma: Crash Course 2023

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

[@TimGabe]

exercise file 🤩: www.figma.com/file/dgqPTjnfR03zfHVxGjeRQz/Responsive-design-in-Figma?type=design&node-id=0%3A1&t=DKdvUcNcqkxU4kcz-1

[@jacquelinetse]

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!!!!🙌👏🤟

[@TimGabe]

thank you so much for such a long and candid comment, Jacqueline!! really appreciated 🙏

[@designservices697]

same here

[@nitzshou5835]

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!

[@andrescastillo07]

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!

[@TimGabe]

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! 💜

[@olabisifolashade6193]

This is an awesome teaching. I've watched many videos that left me confused but this is so detailed. Thank you

[@relja_]

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.

[@TimGabe]

that's so nice to hear, Relja! that's exactly what I want. 🤩 really appreciate your kind comment 🙏 take care!

[@AdelaidaButeler]

Thank you Tim. I didn't find anyone who explains like you. Super easy. I really really appreciate it:)

[@TimGabe]

comments like these make me excited to continue creating content!! thank you!!

[@StoriesMails]

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! 🔥

[@TimGabe]

so nice of you to say!! thank you 🤩

[@Kisatsu]

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!

[@TimGabe]

that’s great to hear, Yuri 😃 thanks a lot!!

[@yoshikotezuka6485]

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!

[@TimGabe]

that's soooo cool to hear, Yoshiko... thanks a lot!!

[@varshinisankaran1234]

hands down the best tutotrial, OMG thanks!

[@TimGabe]

that's awesome to hear! thank you!!

[@djashawe88923]

You're soooooo good at explaining things! Everything is on point, examples, speed, amazing user experience! 🤓👍💯

[@TimGabe]

thank you so much CD!! 🤩

[@joelwalters9123]

Finally!! This is the first tutorial I've found that explains responsiveness in a way I can understand. Good job:)

[@user-ky1mm4ff3f]

Yes, I Agreed with Your's Word's......I am also realized the Same thing....

[@matevzpor8058]

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

[@TimGabe]

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!! 🤩

[@ZeDfriT]

Men your audio and video quality is so clean, loved your content. Thanks a lot! Hug from Argentina.

[@TimGabe]

really appreciate this, my friend 🤩 greetings back to you from Sweden!!

[@deepalimehra2195]

beautifully so crisp and nicely explained in simplest language. thanks soo much

[@TimGabe]

thank you for the support, deepa!!

[@PrernaGujar-h7k]

The way you teach slow and steady is best.

[@designservices697]

excellent video. very knowledgeable. Thanks

[@Sasasala386]

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.

[@Sasasala386]

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.

[@TimGabe]

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! 😃

[@chamindreemanisha8347]

​@@Sasasala386me know 8❤❤❤❤❤❤❤❤❤❤❤❤❤u6uu76uyuuuuuy

[@Rubiacosttacom]

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...

[@emmanuelf4917]

Quality ++++ Content ++++ 🎉 thanks !!!!!

[@des7638]

Good job Tim! Super helpful

[@TimGabe]

really glad to hear it! 🙏

[@brightlightv]

This was awesome. Thank you!!!

[@TimGabe]

thank you for supporting, my friend!

[@ruturaj1111]

Thanks for sharing 😊

[@nasirify]

pretty cool tutorial, I like it how you are calm and over it all!

[@TimGabe]

thank you so much Mostafa! 😃

[@aristosxanthus658]

This is pretty powerful. Great content Tim!

[@TimGabe]

thanks my friend!!

[@SzabatDesign]

Good content, really helpful and nice biceps! :D Thanks Tim you are nice teacher! Take care!

[@TimGabe]

haha, appreciate the kind words Christopher 🤩 take care man!! 🙏

[@ioanaienciu2049]

Is just f*++ great! You saved my life. Thumbs up Tim!

[@TimGabe]

that’s so cool to hear, my friend 🙏🥳

[@hubertziemlewski1417]

Great educational content Tim! Keep up the great work :)

[@TimGabe]

really appreciate that Hubert 🤩 thank you so much! ☺️

[@AttaRehmanvlogs]

Man 🎉 Thank You ✨

[@kholoudmahmoud4469]

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 ❤

[@TimGabe]

that's so nice of you to say, my friend! thank you for the comment! 💜

[@quocbaonguyentran3811]

Thank you so much !

[@TimGabe]

thank you!!

[@sorooshkarimi3916]

Dear Tim, thanks for your awesome videos & tutorials🤩. I think your last video is one of the best figma content in KZbin. keep going on man 🙏

[@TimGabe]

wow, Soroosh!! thank you, that really makes me happy my friend. 🤩

[@WALiD-ot8ik]

thank you monsieur

[@sachabasset-chercot5121]

For once a video that "explain" for real the principle of responsivness and doesn't mix everything ! Many thanx !

[@user-zo8iy3fx8r]

It was so helpful! Well done!

[@TimGabe]

thank you!!

[@kassiopeya8740]

awesome lesson, thank you very much!

[@TimGabe]

happy you liked it, my friend 🤩

[@TheDragonKnigth1]

Thank u ! Very useful content

[@TimGabe]

happy you liked it, Mohamed! 🙏😃

[@Mr.FHT-1M]

it's a great video for me. Thanks a lot bro

[@TimGabe]

that's awesome! thank you for commenting, friend!!

[@kaldarges]

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?

[@TimGabe]

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 👌

[@alliialpha]

good tuts❤❤❤

[@luan_nunez]

Excellent content, Gabe, very helpful. I would like to mention that the audio level is quite low compared to other videos on youtube.

[@TimGabe]

really appreciate the feedback Luan! will take note of this and see if I can make the levels a bit higher for future videos. 🙏

[@ozgurilkimen263]

ın 20 min, you teached everything about responsive design including grid system. That perfect!

[@TimGabe]

thanks a lot for the support, Özgür!!

[@taigakagami1173]

Thanks a lot!!!

[@TimGabe]

happy to help, Taiga!! 😃

[@Michael.design]

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!

[@lorena12333]

i may seem rushed, but i think i love you

[@mediaencounter9697]

Super bro 🔥

[@TimGabe]

thanks a lot, friend!

[@designthedays]

I love your videos!

[@TimGabe]

that’s so cool to hear, my friend 🙏🤩 thank you for the kind comment!!

[@dharmraj92]

GREAT showcase

[@TimGabe]

really nice of you to say, Dharmraj! thanks a lot!!

[@Rafael-dj-c]

Well explained tutorial!

[@TimGabe]

thanks a lot man!

[@dannyzaitz9918]

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 🇺🇦

[@TimGabe]

thank you so much for this nice comment, Danny. much love to you and Ukraine! 💜

[@SzabatDesign]

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 ❤️

[@mattburgess5697]

“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.

[@teleportkontrola2006]

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!

[@TimGabe]

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 🙏

[@teleportkontrola2006]

@@TimGabe Perfect, many thanks!

[@user-lj4qs2wn5e]

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.

[@TimGabe]

thanks a lot, internet friend!!

[@liamfarrell3281]

Good tut. (Nasty curtains... you kind of blend into them. Maybe try a contrasting colour to your skin tone?)

[@ulikszenelaj7465]

Great teacher, keep going forward

[@TimGabe]

comments like this really makes me excited to continue creating educational material, Uliks 🙏 thank you so much 😃

[@ulikszenelaj7465]

@@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

[@kranthikaile9738]

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.

[@Dark_Aeon]

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?

[@TimGabe]

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 😃

[@marshag6345]

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]

that's awesome!! thank you for commenting! not sure what the issue might be there... 😫

[@marshag6345]

@@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

[@ShelbyParton-zu2wx]

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?

[@TimGabe]

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 😃

[@user-lj4qs2wn5e]

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!

[@TimGabe]

might very well happen in the future!! 😃

[@FlyByWheels]

your video is very useful thankyou but plz increase the volume of your device

[@TimGabe]

thank you!! I will do that in the future!

[@teleportkontrola2006]

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!

[@TimGabe]

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!!

[@teleportkontrola2006]

@@TimGabe Thanks for the precise reply, Tim! So basically for now we can't simulate "text sizing based on the viewport width" in Figma?

[@krule0041]

i dont how the space between options under advanced autolayout settings. How do i fix it ?

[@Ralphunreal]

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?

[@TimGabe]

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!

[@Ahmed-fq3kz]

hero

[@TimGabe]

thank you, friend!!

[@PaulaF-c4b]

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... :(

[@FlyByWheels]

please make a tutorial on fully responsive landing page because in KZbin 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

[@TimGabe]

curious to hear what you felt this didn't cover that a full page would? is it the footer? the nav? or something else?

[@FlyByWheels]

I want to learn a full landing page top to bottom. If u teach us will be very very helpful

[@user-pj2zg6hy3r]

is it possible to save proportion of image size in cards? so it would increase not only horizontal but vertical too?

[@TimGabe]

if I understand your question correctly, I'm afraid you can't 😩

[@DanzarinaSibel]

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!!!

[@TimGabe]

the constraints will only be seen for the elements inside of a frame 😃 so maybe you don't have them placed in a frame?

[@TimGabe]

also, thank you so much for the kind words!!

[@andreiabovezfold7247]

I believe Figma should switch all the FIXED parameters after applying Auto Layout without a user doing it.

[@PathToFulfilment]

In the first part, I don't see the spacing mode option. Please help, anyone!!

[@poutine369]

how do you switch the order 15:55

[@Novaliz78]

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!

[@TimGabe]

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 😃

[@hunainaimran9319]

i don't understand because when i went to constraints it was not there nor was my text fixed

[@MuhammadAsif-nb8oc]

You are taking viewers to become professional designers

[@TimGabe]

that's the goal, Muhammad!! 🤩

[@grundeeno5790]

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?

[@TimGabe]

you can go and add auto-layout to your components even after the fact! 😃

[@grundeeno5790]

@@TimGabe Thanks! Also, I would love to see you make a video on style guide creation in Figma

[@simonswiss]

That Shure MV7 does not like to be away from your face - the volume in this video is really low 😅

[@TimGabe]

heard this a lot in the comment field for this video 😅

[@simonswiss]

Yeah haha sorry, I bet you did.@@TimGabe

[@amanjoshi5115]

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

[@amanjoshi5115]

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?

[@TimGabe]

glad you fixed it! yes, if you google "add custom fonts to figma" there are great guides as the top results!

[@nosferatugfx]

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.

[@TimGabe]

sorry about that! will definitely try to remember this for future tutorials!

[@joshbedo8291]

dang would be nice if their were exercise files so we could follow along

[@TimGabe]

here it is, my friend: www.figma.com/file/dgqPTjnfR03zfHVxGjeRQz/Responsive-design-in-Figma?type=design&node-id=0%3A1&t=DKdvUcNcqkxU4kcz-1

[@joshbedo8291]

@@TimGabe awesome thanks!

[@harveysanchez7001]

spacing mode is not there why?

[@TimGabe]

not sure what you mean, my friend!

[@JohnJohn-zz5sw]

Did figma remove spacing mode? It's not there anymore.

[@TimGabe]

they've shifted their UI a bit with the new update!

[@MichaelMiguelMartins]

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

[@TimGabe]

sorry! they've updated the ui, so it doesn't look exactly like this anymore...

[@yashjain9935]

original volume is extremely low

[@nidarahman2305]

please increase the volume of the video, cant hear clearly

[@kingzayan9842]

😂 please use Headphones.

[@TimGabe]

updated the mic since this!! 🙏

[@andreiabovezfold7247]

Your calling it grouping when applying auto layout is confusing.

[@prasadwadekar805]

Everything is good except the voice intensity. As its very low

[@kashifusman5953]

please help me fix my textttttttt, my text is not reisizing

[@TimGabe]

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

[@lisadesign2763]

the audio is not loud enough😒

[@TimGabe]

my bad!! will be better in the future, Lisa!!

[@izuchukwuobilom9066]

Your ear is not loud enough, actually. Or your device is as faulty as your ear.

[@jananee.m2136]

Ur audio is low

[@TimGabe]

thanks for the feedback!

[@sabbiralam1787]

Sound Quality is so poor can't even hear Properly

[@TimGabe]

sorry 'bout that!!

[@sharondsouza8054]

your voice is so low!!!

[@drrecommended4850]

Man I have to say the stupid OK 👌 still for this video really turned me off

[@TimGabe]

haha, that one actually is a bit stupid...