Responsive design in Figma with Breakpoints

This is the best resource on responsive design, Thank you Sekei

Your Content is great 😍

today is my interview and just before half an hour watched your video and did practical..😅😅

Thank you so much for this! Especially explaining why one would want to do this, and your advice on skipping it if the resources aren't there. Very helpful! Will definitely check out more of your content here and on your other channels.

Thank you for sharing this - I have a responsive nav bar now, which 3 other tutorials did not get me to! I do want to mention it's frustrating to follow because a lot of things are unexplained. For example, you add the logo, and then when you go to add another frame, the logo jumps to the left. Why did it do that? Is that part of autoresponse? 'Where did that stroke on the bottom of the nav come from, and how is it only on the bottom? As a watcher, I don't already know it, so the speed of the video means I'm pausing this every 2 seconds (not exaggerating) and hunting to figure out where you are clicking each time.

thank you so much, this really helped

this is one of the best tutorials i have seen on "how to make responsive layouts in figma"! thanks a ton Sekei..

Hey can we export these designs into code maintaining responsiveness

can you please share the figma file?

Amazing, I really looking this only......Thanks lot

Can someone make this again but with the new figma features???

Don’t listen to the comments. This is great and I think it’s important for designers(myself included) to understand breakpoints and be able to actually go through this process.
Great video! Thank you.

can you build a responsive component with that, not a whole page?

You have a different league. Always I learn something from you. Thanks

Hi Sekei. I enjoyed your video, however some suggestions I have would be to not have your video of your face covering important aspects we may need to look at, such as the constraints section on the side to the right. I was a bit confused when I was resizing my frame at one point and realized it did not look the same as in the video. I later realized it was because I did not have the proper constraints, because in this video your constraints was covered. Thank you.

Why cant i move my object to the left? After doing everything you said in the first 2-3 mins?

A quick guide about autolayoute, I was very stuck in auto.. thanks alott

so many different breakpoints out there, i have no idea what to use. tailwind gives 5... any tldr best breakpoints for these 3 devices?

Hey Sekei!
I would really love content about exporting code. Is there a way to export responsive design where the media queries are already included in the code?

breakdown for us not everyone here understand this break it step by step let people know what you did am so confused

I think this is close to that I'm looking to achieve but not quite. I'm looking for a way to create a reusable component and depending on it's breakpoint, the component itself changes. I know css "container queries" are a thing but not sure if there's a plugin for it yet.

So your website would have shitty padding on my 1080p 14inch laptop ? Or how does it work ? 1080p on a TV is not the same as 1080p on a 14inch laptop. Although both should be filled (?). A 24inch desktop 1080p monitor might be the only place where padding is needed.

New to Figma - great video!
Minor suggestion: put your video on the left instead of the right so it doesn't cover up what you're doing in the right panel.

Like you see how the big box with the rest of the boxes on the right didn’t move and only the small boxes at the bottom moved, what did you press to make them all move together

this makes the life of a front end dev so much easier when he or she has to come up with a mvp design or in frame work
thank you man

Thank you! Your explanation is super clear. Thanks for sharing.

Super!

I can do it without plugins 😝

How did you add a frame to an auto layout frame? Because everytime i try, it automatically shrinks itself

Hello and thank you for the video. New to Figma. When you start adding wire frames to the Nav bar, I noticed that when you create your "logo" using a frame it starts in the center, then pops to the left. When you begin to build the links using a frame it starts of on the right. How are these being positioned?

It's work well with frames with equal height. I don't understand how use this plugin when I have frame with different heights of frames. expample: frame width 320px. It's height 10000p, but there is frame width 992px in my project and height 8000. And how can I use plugin when frames with different height?

great tutorial

this is the best video I've seen that describes the breakpoints plug in. Especially inspired by the way you documented at the component level! Nice work 👏

Wow, After watching several videos concerning auto layout, you just get me back on the track. Thanks alot man

That's great, but let's say I've prototyped a desktop, tablet and mobile design (made animations when mouse enters, hovers, etc). How do I keep those prototyped animations while making the whole design responsive?

Amazing!

this guys legit! he's got the figma mustache, beanie and glasses! just needs the long hair and you'll be a pro!

Man I wish I could work this fast when I use auto layout. Thank you for this video

This is literally gold!

I'm currently enrolled in a 9-month intensive bootcamp, and all I can say is...the world would benefit from a UI Masterclass by Sekei Design :)

Mate I loved it

one thing i dislike about figma as a developer is that it positions things as absolute

I do have a quick question, when you drop your row/column blocks into the desktop ui how are the blocks not affected by the auto layout of the desktop? When I drop my column/row frame its slammed up against the left side of the ui and I don't think you used "absolute" positioning anywhere. Am I missing a frame somewhere?

Super useful tutorial! Thank you!!🤗

Sekei this vid is amazing! Thanks for sharing your knowledge. For the record...I had no idea about the IG/TT post. Keep the videos coming as i love the way you approach your designs