Create Responsive Website Designs | Figma Tutorial

Join 2,500+ students and master the foundations of UI design for $9 with my new ebook!

Learn how to create 100% responsive web designs in Figma, using Auto Layout ONLY, without Plugins or Constraints. Enjoy!

If you're ready to learn more - check out the Figma Mastery course👇

Timestamps:
00:00 - Intro
00:30 - Getting started
01:51 - Fixing Header, Hero, and Logos
05:56 - Tablet designs
08:09 - Mobile designs
11:46 - Why Auto Layout is important
12:27 - Figma to Framer? Leave a comment!
12:48 - Outro (Figma Mastery)

----------------------------------------------
P.S. If you're interested in learning UI/UX design feel free to check out my design ebooks - there are free samples available (110+ pages total).

For mobile designers 👇

For website designers & freelancers 👇

My Figma Mastery video course 👇

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

This will help you get a better idea about designing for development in Figma

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

Connect with me 👋

Thanks for dropping by my channel - if you enjoy what you see, feel free to subscribe and hit that bell notification, and I promise to bring you a ton of free value every week!

[Team_Kajetan]

Awesome stuff! 👌 Your tutorials have truly helped me to master Figma. Thank you.

[designjayesh]

Thanks man for this, it was very helpful! I never knew that framer is very easy to work on! thank a ton!

[nithishjagannatham]

I saw many videos about responcive design but I never understand what they are explaining. But I really impressed with this and I implemented on my project successfully. This video will helps many people. Thank you.☺

[CsGamiNG]

Great video. One of a kind nowadays. Thank you Adrian

[bodzio]

Great tutorial. I hope that you'll make next part with framer as well.

[ayobamidele]

Awesome stuff! I love the progression from box model to responsive layout...would love to see how it translate to real website in framer. Thanks Bro

[vivlogs]

Hi Adrian :)) I absolutely loved the video🤩🤩 will you make some tutorials on how to build websites in webflow? That would be so useful !! 🙏

[pruthvirajmane]

Thanks a lot for sharing, I truly appreciate your work and way of teaching will be looking forward for more informational videos from you.

[wazidali]

Nice tutorial and good explanation with great teaching style....

[tayyabsohail]

Thanks Adrian this video help us to make responsive design

[kelvinsixtus]

Nice video and i will love to see a follow up on this video in framer

[femidavids]

Yes, would love a follow up on how you turn it to a real website on framer. Thanks Adrian.

[arunsoma]

yes!!. Framer too ! that's what I was searching the whole week! :) add some 3D element from spline on the header too

[timothyochieng]

Great content Adrian.just a quick one though, what if you got couple number of pages will you still need to do the same to the rest of the pages to make them responsive?

[santhosh_with_u]

very much useful content, Thank you Adrian

[kartikmahawar]

Information and useful content as always.. kudos to you Adrian 🙌.

Although I would like to ask is box model design is the only way to design developer friendly interfaces?

[dineshgadhiya]

thanks sir you are amazing teacher sir please full playlist series of figma amazing tips
you have great knowledge
i have continue watch your video on linkendin
and last please sir subtitle on because your video is amazing who There are some people who do not know English so they look in their language
thanks sir
🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂

[Underhills]

Figma lacks batch operations, in this example it could be a function called "set all containers / frames to fill" for instance. Btw, much of this resizing business could be done with variables now.

[GhulamBasheer]

Great content sir. Hope for more videos

[danicaschmidt]

At the very beginning of the video, when you resize the frame to a large screen size, your content does not continue to resize past a certain point. I am struggling with responsive design right now in that on large screen sizes, my content ends up being too wide. How can I set my content to stop resizing at a certain point so that only the margins get wider instead of the entire design on large screen sizes? Thank you so much for any help you can give me on this topic!!!!