Responsive design in Figma with Breakpoints

The Breakpoints plugin allows you to create truly responsive designs in Figma that switch between designs based on the width and/or height of a frame!
Learn how to Code like a Designer: codingfordesig...
Get the file and more on Patreon - / sekeidesign
Thank you to my Patrons:
- Matthew Stenquist
- Sya Mace
- Lucas Pitchon
- Adele Guzman
- Roger Rizk
- Mohammed Virji
- Carissa Pray
- Matthew Farquharson
- Priya
- Qasim Zahid
- Clau Marin
Instagram - / sekeidesign
Twitch - / sekeidesign
Brought to you by:
Notion - notion.grsm.io...
Webflow - webflow.grsm.i...

[@victoronwukwe6450]

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

[@M4rt1nX]

Dude, I literally needed this right now. Just got an assignment a few days ago and this pops up on my feed. Thanks a lot. Easy to follow and I finally managed to success working with nested auto layout.

[@sekeidesign]

Ahh that’s amazing! I’m so glad it could be so helpful to you ✨

[@kimpham3573]

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.

[@maimounah2001]

Thank you so much for this tatorial, this exactly what I want 👌👏

[@henkegiaretta]

This is crazy…the way you utilize shortcuts and auto layout

[@sekeidesign]

Thank you! All about practice and muscle memory hahah

[@sajidmoinuddin5424]

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

[@stephenaaronosborn]

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.

[@user-dn3ew2fp9w]

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

[@Jennie-ot1mz]

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.

[@milomakesstuff2019]

Thank you for the video! Currently prepping for my first ever UX Design position and these kind of videos really help me preparing for the job!

[@sekeidesign]

Wishing you the best of luck on your position! I’m so happy it helped :)

[@milomakesstuff2019]

@@sekeidesign had a great two first days! Currently a lot of information to digest but it's all very intersting

[@davidalamu5713]

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

[@rtubiras644]

Just finished watching the video and I would like to thank you for how straightforward and knowledgeable your video was. Subbed!

[@heyandre.design]

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 :)

[@seferdima]

the only video which is really about the responsiveness. thank you!

[@user-ik3cw8zn7q]

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

[@CRAismyname]

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 👏

[@jakuag]

This tutorial is great explanation on how to use auto-layout and breakpoints plugin. But still i do not know when I do really need to use it. Before my primary guess was that I have to build first frames with this plugin and then apply it on all my frames in my design project, so all of them are indicated and work with these plugin. I would appreciate clarification on that. Thank you! :-)

[@niyaziemmi410]

I have a website consisting of 9 buttons. I need this kind of design. I agreed with 1 freelancer. He did very badly. Can you help me

[@MrJmhess77]

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

[@restinart6414]

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

[@AliRushSongs]

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

[@sekeidesign]

🥹 thank you

[@muhammadtaif6592]

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

[@CVPEtcetera]

A year later, do you still think about this in the same way with variables? Thanks.

[@joelx.1428]

This was awesome! Thank you for the wonderful, easy, and applicable lesson.

[@payalbhalla6945]

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

[@marpla78]

Thanks for this, also needed this ...keep this path my friend. Argentina present.

[@arzach_0x]

Great video! Cool to see you use frames so much haah! I'm a big fan of frames, but haven't used them on full pages like that.

[@sekeidesign]

I exclusively use frames. I only ever use groups for illustrations or icons sometimes but that’s it. Frames are better in every way!

[@arzach_0x]

@@sekeidesign amazing. After your video, I went into a deep dive on learning about the relationship between fixed, hug and fill. Makes a lot of sense now!

[@star-devil9157]

This is the best understandable video ever thank you very much Also can I get some advice I'm making physics effect like Line bend while hovering like soft and smooth 😊

[@user-oz6tr1nt5r]

Thank you i learned alot

[@DexuTM]

Hey thank you for the video, could you please tell me the keyboard shortcut to add frames into the autolayout? For example at 2:27 you create the autolayout called "Links," at 2:33 you begin adding child frames to the autolayout, how do you do that? Thanks again, great vid, liked & subbed. Edit: When I use Ctrl+Alt+G it makes the autolayout a child of a new parent frame. In the video, you keep use a keyboard shortcut that keeps the autolayout as the parent, while adding frames as children. Learning this process/shortcut would help me out a lot! At 7:30 you can see that the parent layer is called "Menu" and the three children show as frames called "Line"

[@sekeidesign]

Hmmm I don’t think there is a shortcut, the video editing might make it look faster than it is, but in this case I just press F on my keyboard and click inside the auto layout to add a new frame From there I duplicate them with cmd + d which keeps them in the auto layout frame

[@DexuTM]

@@sekeidesign thank you for the response 🙏

[@aureo2584]

I discovered you on IG and I was hoping to see your channel on YT. Wish granted! Love your work 🔥

[@paulamanrique5576]

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

[@tgkhalil]

This is literally gold!

[@boxeris729]

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?

[@sekeidesign]

You can use interactive components for the interactions you mention! But you can’t view this responsively as a prototype because that just not how Figma prototypes work 😔

[@PetrAfanasyev]

Would you update with new variables update?

[@rickyoliveria1171]

You killed it! Thanks bro!

[@souvikpradhan1053]

Thank you, bro. Really appreciate your content.

[@amandastauffer5703]

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.

[@user-wo1le5rp6k]

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

[@melissaviesca2299]

Let’s say you made a component of your web hero section … do you usually create separate components for the tablet and mobile versions of the hero? Or do you design the hero component in such a way so that you can use the same component for all? It seems like you’d have to make different components bc for example you changed the design about in Tablet to be two column… so then would you detach instance then create a new component once you go it to how you wanted hero section for tablet?

[@sekeidesign]

I would never make an entirely separate component. I only make variants for the different breakpoints. If the component is laid out different, looks different, and or behave different, I’ll create a separate variant for it if the same component!

[@adeebp.i.3751]

much needed one 🔥🔥

[@user-kg6cb1vh9x]

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?

[@sekeidesign]

The plugin has width and height options for your breakpoints. If your frame has a different height then elements should scroll, that’s how browsers work 🤔

[@edhahaz]

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.

[@sekeidesign]

I encourage you to explore how responsive websites work and to learn more about responsive design. This isn’t a masterclass on responsive design, it’s a tutorial on how to use this plugin to achieve responsive designs in Figma on the canvas

[@jirowang110]

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

[@codephil]

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?

[@sekeidesign]

Hey! Unfortunately not really, typically in these projects I would actually start with the media queries in code, and use those in Figma rather than the other way around. Generally I think it’s a good practice for engineering to make that call

[@benndalton1858]

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

[@chriscostes9249]

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.

[@sekeidesign]

Feedback definitely taken! Something I’ve improved in future videos Good luck on your Figma journey!

[@harmony_di]

Super useful tutorial! Thank you!!🤗

[@Enigma.and.Shadows]

Master Class. Thanks

[@davidalamu5713]

Hey at 4:44 what did you press to add all of them together to make them all responsive at once

[@user32352]

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

[@sekeidesign]

I use Tailwind in my projects so usually just default to those. IIRC correctly I just googled standard breakpoints for this video and picked 3. Honestly as long as you have some reasonable intervals it doesn’t really matter what you pick! You can find good guidelines on stack overflow though

[@user32352]

@@sekeidesign do you use all 5 in tailwind? i wanna be like you haha what 3 do you use? share the research you did :)

[@ramintakrisciunaite3764]

Hi, how do you fix the top column not moving at 4:50? I can"t figure it out ;)

[@aikonfd]

Love this video so muchh, thanksss!!

[@ziaulislamsd]

Great... Appreciated... Thanks Dear

[@whennn]

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

[@sekeidesign]

This still applies - you don't need it as much because of Flex Wrap but flex wrap isn't a catch all solution to responsive design. You just need things to change between breakpoints beyond just moving cards over to a new line

[@ece6319]

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

[@sekeidesign]

You need to change the settings of the frame to fill container or fixed width. It shrinks when it’s set to “hug contents”

[@ece6319]

Oh yeah i got it. Thanks for the reply, im new to it...One more question tho, I couldn't add the links as you did, the links that stay close together when you duplicate it, stay away from each other when I do it. I guess because it's auto layout. 😢

[@ece6319]

Also can you make a longer and detailed video about responsive design, i love the way you teach, but videos are too short to understand even its the basics ❤

[@Marthaagu]

thank you so much, this really helped

[@user-rm4hq3ib6o]

Hey can we export these designs into code maintaining responsiveness

[@divyajakhotya6669]

How did you move the logo frame in the left corner. I'm unable to do so as the frame is getting into centre alignment and cannot move it. Please help its urgent.

[@sekeidesign]

I’m not sure I understand what you mean 😔 if it’s getting center aligned it probably has something to do with your auto layout settings

[@divyajakhotya6669]

@@sekeidesign what key are you pressing to position your logo frame from centre to left corner as dragging the frame is not helping. Because, when you add frame it comes in the centre

[@thiagobz100]

Yes I would like to know that as well. : )

[@thiagobz100]

It seems he is selecting both frames and aligning left the first frame auto layout

[@jirowang110]

If you look at the video he adds another frame (links) into the navbar and because the navbar's auto layout is set to auto it will push the logo all the way to the left. I hope that helps

[@PetrAfanasyev]

2:40 how did u add some kind of shadow here?

[@danushortstories]

Your Content is great 😍

[@hassanwali9947]

Mate I loved it

[@Alexmholman]

This was so helpful! Thx

[@man-fabulous]

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?

[@sekeidesign]

They’re positioned using auto layout with auto spacing. The auto spacing of the container pushes the children apart from each other so the logo starts in the centre, but when the links are added both are pushed to the edges!

[@man-fabulous]

@@sekeidesign Thank you for the clarification.

[@amcds2867]

Hi, in 11:57 you mention the badges you created to identify the different screen layouts. How did you create these badges seeing that in the layers panel these have their own icon?

[@sekeidesign]

Hey! Those icons mean that the badges have positing: absolute. They’re just auto layout frames with text inside

[@amcds2867]

@@sekeidesign Oh OK, thanks for the feedback!

[@ImruzBabayeva]

Thank you, you rock ⚡

[@karimotisiaka6328]

Thank you for sharing.

[@justinoneill2837]

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.

[@sekeidesign]

No plugin for container queries, but I’m actualy working on a video right now of how to implement container queries for components. It’s not exactly what you’re asking for but it’s how we do container queries at Metafy

[@justinoneill2837]

@@sekeidesign awesome! Do you plan on using the new variables feature to achieve this? I was about to explore this as a possible solution after watching Figma's "intro to variables" video here: kzbin.info/www/bejne/Z4Cxqauif9Opmq8 I'm brand new to Figma (not web dev), so I'm trying to get everything setup in a way that I'm familiar with. I know "dev mode" is a new feature in Figma now too so I'm curious if this might even be possible to achieve in the code itself? Or heck, I might just make a plugin! LOL. . I've got some things to explore either way. I look forward to seeing your video on it! Subscribing.

[@justinoneill2837]

​@@sekeidesignbro I wake up up every day looking for that video LOL... Fevered Sweaty dreams 🥵 😆😆

[@sekeidesign]

@@justinoneill2837 😆 I finished the video script a couple of days! Will record the video after I get back from vacation And yes, it does use variables! But maybe not in the way you’re thinking 🤔

[@justinoneill2837]

@@sekeidesign Nice!! I look forward to seeing the method you use. I might* attempt making a plugin that uses the real container queries API but not sure what limitations I might run into. . Been on Figma for like a week 😂 Anyways, keep the great content flowing bro! I'll be keeping my eyes out! 👀

[@aarongoforth9045]

hey man, great video! I've been looking all over KZbin and yours has been the best yet! Have you considered doing a video on breaking down how autolayout/constraints/scaling functions work? One minor nitpick is it is about like drinking from a fire hose! I'm here for the shortcut keys etc but sometimes your edits' don't fully show what you've done. I usually watch videos at 2x and I had to go to half-time to keep up! Keep up the good work! liked n subscribed. (edited for grammar and readability)

[@sekeidesign]

Thank you for the feedback! I’m trying to be better about how fast I work and trying to make sure I clearly explain more of what I’m doing Cheers 🙌

[@aarongoforth9045]

@@sekeidesign also; now I've got your voice in my head when I'm working on something in Figma "fill container.... and fill contaaiinnnerrr.... and also fill a container" haha

[@pat_attack]

great tutorial

[@MrJmhess77]

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?

[@sekeidesign]

Hey! They are affected by the auto layout, you just have to make sure the settings are correct. In this case the auto layout has direction vertical and align top center, so when I drop the blocks in they align like that just below the nab bar in the middle

[@MrJmhess77]

@@sekeidesign Thanks bro! After going back to play the "Play/Pause & repeat" game I discovered my directional was set to horizontal. 👌

[@LorettaBangBang]

Amazing!

[@briamulholland7873]

Super!

[@imtiazqazi]

can you please share the figma file?

[@sekeidesign]

it’s available at my patreon in the link in the description!

[@imtiazqazi]

@@sekeidesign Thanks a lot

[@imtiazqazi]

oh. so it is not free. it is paid.

[@jkoblivion4175]

Its nOT responsive, you dont respect the RATIO of the elements vertically..

[@grafikaya]

Exactly, its not good representation with fill color. Do it with a portrait product image.

[@mc-qf4bp]

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

[@sekeidesign]

That’s not Figma friend, that’s your designers. Which is why you’ll notice in this tutorial I am only using auto layout which is similar to flexbox

[@PetrAfanasyev]

ooh, you can copy Frame properties😮

[@sekeidesign]

That’s right! You can copy frame properties with `cmd + opt + c` on Mac and paste them onto other frames!

[@riyagupta7913]

@@sekeidesign I didn’t know this!!!!!! Super cool, thanks for sharing 🙌

[@CaesarFernandesMusic]

Im sorry but in some instances your intonation is just to quick and its not easy to catch on- consider people who speak fluent english but aren't as fast. It will help your tutorial style. I got stuck on one point and cant move just because of that. Slow it down a bit and you'll get a-lot more views. for example you said at 4:24 "Now Im going to select this column" but you selected a row.

[@MindfulMeditations23]

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

[@sekeidesign]

I understand where you’re coming from, but there is only so much I can fit into a 15 minute tutorial. There are folks who might have never used Figma before, it’s unrealistic for me to explain every step for every level. It requires a bit of foundational knowledge!

[@sekeidesign]

Is there something in particular you are struggling with?

[@Niallphillips]

I can do it without plugins 😝

[@sekeidesign]

Would love to know how

[@ronin7358]

promosm

[@videolezioni]

All good until you gotta pay $18 to use it

[@NeuviletteBR]

But you dont have to pay to use auto layout

[@harshalkhairnar9991]

Not the right tutorial. at some points it doesn't work

[@amcds2867]

It's a simulator.

[@ricardodossantos2444]

paid plugin