How To Make ANY Design Responsive in Figma

Unique web designs are usually only unique in the desktop breakpoint. In this video we'll cover how you can take a hyper unique layout and make it responsive for lower breakpoints like mobile. This is just one way of completing a design like this, and its important to note there are many different ways of completing it.

Download the file for yourself and try it out:

The original post:

Explore Figma Components 👇

🛠 Try Figma 👇

🛠 Figma For Pros 👇

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

🚀 Subscribe for more weekly design content

🎥 What I use in my videos!

📄 Bonsai Referral (try for free)

👨‍💻 Connect with me

🌎 Socials

DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you!

[ArnauRos]

How would you have done this design? There's no wrong answer!

[emilyemslee]

Great video! 10 mins of your work takes me hours😂 I'm just starting out on my UX design journey, and I really like your style of tutorial, please upload more🙏🏻

[MarkWhiteartist]

I didn't know figma had outline mode, that's so helpful. thanks

[Mahinoor-lsfn]

Very underrated channel. You make me learn more clearly than other YouTubers. 😇

[TheMarsvin]

I really appreciate this chill and concise teaching style

[christianmagill]

Great video! I'd love to see how you would create a longer landing page, what type of styles/components you setup or import for a typical project... etc.

[OSANDA_Design]

Something I was struggled, hopefully next time I won't. Thanx man.

[KeplerFontenele]

Great video explaing design on Figma, however the title is misleading - you created a mobile design on figma not a responsive design on figma

[EduardoLopes-zplc]

Congrats and thank you for this amazing video!
I have some questions to do about your mobile design.
For this hero, don't you think that the image in the background might work better if you use absolute position and put some top padding on this autolayout to adjust the position of the other elements?
About the CTA, don't you think that buttons needs to appear in the first view of the user?
Usualy when I prototype a hero section, I set the frame as 360x640 to consider the smallers screens.

[AlexandraLima]

Hello :) I've been struggling to make my desktop design responsive and I've been following every step in this video. However, you created a mobile design on Figma, not a responsive design, right?

[fanaz.]

I love your videos, and they are really helpful, but the music in the background is irritating and distracting. Maybe in the future you could leave out the music or choose music that is not as distracting. Just a genuine request from someone with adhd. Keep up the good work!

[AlejandraMamblonaGómez]

How can I enable X-ray mode? Thankssss

[rowenrajh]

Are there any sites that provide these type of 3D images that we see in the hero section ?

[justinoneill]

I'm curious if there's a way to create this functionality at the component level? Container queries are possible now in CSS and built for this exact thing. If you know of a way please make a video! I've searched but couldn't find anything on it for figma

[ferrywap]

Great video! But it's a tutorial, take it easy next time I find it hard to keep up because you didn't cover it well

[TechMadeSimple]

"Sorry, but how are you doing? You are not telling properly.