Make an Entire Layout Responsive in Figma - In 10 Minutes

-- Today, we're going to step into Figma and I'm going to show you how to structure your layouts properly using a combination of constraints and auto-layout. This will make your life as a designer much easier, as it makes creating mobile variations super fast.

Starter project file:
(Copy the frame and paste it in a new Figma document to edit it)

Visit the following link to download (free) the “JavaScript Illustration” graphic to use in this project:

0:00 - Introduction
1:04 - Navigation
2:31 - Heading & Subheading
3:45 - The Cards
5:15 - The Footer
5:50 - Tablet Design
7:40 - Mobile Design

Let's get started!

#figma #responsive #ui

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[DesignCourse]

Question: How many of you integrate Webflow as a part of your design process? Do you also use Figma?

[_Perf]

_Quick tip_ : to avoid adding objects to the frame or vice versa - just hold the *space key* while moving it with your mouse.

[EricMalek]

your hard work is beyond appreciated! I remember the days when we had to read books for our information and the questions weren't always addressed. Great stuff!

[MalewiczHype]

I have a couple of problems with how auto-layout well ... auto-layouts stuff ;-) For a lot of the things we do we use optical alignment (even if developers have a little extra work) and auto-layout often aligns text in containers not completely "in the center", especially vertically.

Constraints are however VERY useful in all design tools. :-)

But of course for quick mocks for developers it's a great way and the tutorial is super helpful 🙌

[jswanson]

Great simple tutorial. I needed this right now. I also like when you keep the mistakes in on the phone version. Because, that's what happens sometimes and you have to figure out what went wrong. It's all part of the process.

[FilippoVicari]

I always looked at that portion of Figma without understanding how it worked, now it's everything clear. Than you very much!
Btw I sincerely recommend the UI/UX course, I'm half way through and I alredy achieved many significant progress, so thank you very much Gary!

[gayathrip]

Awesome!!!. This is the first video that i could understand and finish completely after going through so many failed videos. This one is very understandable. Thank you so much!!

[nazaradana]

you just completely changed my life right now

[kateryna]

You have the best tutorial ever! Very precise, short, clear. I watched another video for 30 minutes and you explained everything in 10 and I understood everything clearly. Thank you!!! ❤
I`m from Ukraine and try to get a job as ux/ui designer. Figma is a new tool for me. So, you help me a lot in this task. I`m very grateful that I can learn for free. 💛💙

[nirajpatel]

This is amazing. Quite a time saver. Thank you for this tutorial.

[mohitsharmaee]

I was trying to fix a problem from past 3 hours . This video helped me. My dumbass was missing 'fill container ' option and messing up responsiveness . This video helped me. Thanks Man. Subed.

[ahmed]

Love how you just go straight to the point ! Thanks buddy.
Can you share some tips of how to choose the best grid systems?

[badjazz]

Very useful. Straight to the point. Easy to understand. Well done.

[annaszumska]

This is the best tutorial I've seen so far

[_Shahab_]

Simple, easy, fast and understanding.! Thanks

[Dxbuaeuaee]

Great simple and easy the simplest explanation for the Responsive layout in FIGMA thank you so much !

[ct]

That was so helpful. Thank you so much! I need always remember layout grid, auto layot, constraints, hug and fill container.

[PrincePaulAdeba]

Easy steps. Easy process. Thanks a lot for this wonderful video

[Norell]

Super content, as always. The timing is perfect. Thanks bro.

[taariqq]

Notice the Smashing mag article in the tab "useful figma plugins" :)