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.
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.
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.
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 👏
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.
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
@@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!
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
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?
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 😔
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.
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! :-)
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"
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
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 😊
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.
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?
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!
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?
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 🤔
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?
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
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 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
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
hey man, great video! I've been looking all over RUclips 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 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
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
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.
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
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?
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!
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?
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
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. 😢
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 ❤
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?
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.
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
@@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: ruclips.net/video/1ONxxlJnvdM/видео.html 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 😆 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 🤔
@@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! 👀
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
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.
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!
![Kodak Black - Versatile 4 [Official Video]](http://i.ytimg.com/vi/VcP_1Ua__vY/mqdefault.jpg)
This is the best resource on responsive design, Thank you Sekei
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.
Ahh that’s amazing! I’m so glad it could be so helpful to you ✨
this is one of the best tutorials i have seen on "how to make responsive layouts in figma"! thanks a ton Sekei..
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.
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
Just finished watching the video and I would like to thank you for how straightforward and knowledgeable your video was. Subbed!
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.
Wow, After watching several videos concerning auto layout, you just get me back on the track. Thanks alot man
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 :)
Great mini tutorial on responsiveness! Thanks for sharing!
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!
Wishing you the best of luck on your position! I’m so happy it helped :)
@@sekeidesign had a great two first days! Currently a lot of information to digest but it's all very intersting
the only video which is really about the responsiveness. thank you!
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 👏
This is crazy…the way you utilize shortcuts and auto layout
Thank you! All about practice and muscle memory hahah
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.
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
You have a different league. Always I learn something from you. Thanks
🥹 thank you
Thanks for this, also needed this ...keep this path my friend.
Argentina present.
This was awesome! Thank you for the wonderful, easy, and applicable lesson.
Thank you so much for this tatorial, this exactly what I want 👌👏
This is literally gold!
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
I will do it for free.... No charge... Need credits just credits..
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.
I exclusively use frames. I only ever use groups for illustrations or icons sometimes but that’s it. Frames are better in every way!
@@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!
I discovered you on IG and I was hoping to see your channel on YT. Wish granted! Love your work 🔥
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
Thank you! Your explanation is super clear. Thanks for sharing.
You killed it! Thanks bro!
today is my interview and just before half an hour watched your video and did practical..😅😅
Thank you, bro. Really appreciate your content.
much needed one 🔥🔥
Man I wish I could work this fast when I use auto layout. Thank you for this video
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?
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 😔
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.
Feedback definitely taken! Something I’ve improved in future videos
Good luck on your Figma journey!
Why cant i move my object to the left? After doing everything you said in the first 2-3 mins?
Duplicating the link buttons you did at the beginning stacks them vertically not horizontally like you have shown. Not sure what I am doing wrong.
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! :-)
A year later, do you still think about this in the same way with variables? Thanks.
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"
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
@@sekeidesign thank you for the response 🙏
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 😊
Super useful tutorial! Thank you!!🤗
Love this video so muchh, thanksss!!
Mate I loved it
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.
Amazing, I really looking this only......Thanks lot
Hey at 4:44 what did you press to add all of them together to make them all responsive at once
thank you so much, this really helped
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?
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!
A quick guide about autolayoute, I was very stuck in auto.. thanks alott
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?
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 🤔
can you build a responsive component with that, not a whole page?
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?
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
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.
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
@@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
Yes I would like to know that as well. : )
It seems he is selecting both frames and aligning left the first frame auto layout
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
hey man, great video!
I've been looking all over RUclips 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)
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 🙌
@@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
Hey can we export these designs into code maintaining responsiveness
Hi, how do you fix the top column not moving at 4:50? I can"t figure it out ;)
Thank you i learned alot
so many different breakpoints out there, i have no idea what to use. tailwind gives 5... any tldr best breakpoints for these 3 devices?
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
@@sekeidesign do you use all 5 in tailwind?
i wanna be like you haha what 3 do you use? share the research you did :)
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.
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
Your Content is great 😍
Master Class. Thanks
Would you update with new variables update?
This was so helpful! Thx
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?
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!
@@sekeidesign Thank you for the clarification.
great tutorial
Thank you, you rock ⚡
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?
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
@@sekeidesign Thanks bro! After going back to play the "Play/Pause & repeat" game I discovered my directional was set to horizontal. 👌
Thank you for sharing.
How did you add a frame to an auto layout frame? Because everytime i try, it automatically shrinks itself
You need to change the settings of the frame to fill container or fixed width. It shrinks when it’s set to “hug contents”
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. 😢
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 ❤
Great... Appreciated... Thanks Dear
Amazing!
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?
Hey! Those icons mean that the badges have positing: absolute. They’re just auto layout frames with text inside
@@sekeidesign Oh OK, thanks for the feedback!
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.
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
@@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:
ruclips.net/video/1ONxxlJnvdM/видео.html
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.
@@sekeidesignbro I wake up up every day looking for that video LOL... Fevered Sweaty dreams 🥵
😆😆
@@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 🤔
@@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! 👀
2:40 how did u add some kind of shadow here?
Can someone make this again but with the new figma features???
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
can you please share the figma file?
it’s available at my patreon in the link in the description!
@@sekeidesign Thanks a lot
oh. so it is not free. it is paid.
one thing i dislike about figma as a developer is that it positions things as absolute
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
Super!
ooh, you can copy Frame properties😮
That’s right! You can copy frame properties with `cmd + opt + c` on Mac and paste them onto other frames!
@@sekeidesign I didn’t know this!!!!!! Super cool, thanks for sharing 🙌
Its nOT responsive, you dont respect the RATIO of the elements vertically..
Exactly, its not good representation with fill color. Do it with a portrait product image.
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.
I can do it without plugins 😝
Would love to know how
promosm
breakdown for us not everyone here understand this break it step by step let people know what you did am so confused
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!
Is there something in particular you are struggling with?
All good until you gotta pay $18 to use it
But you dont have to pay to use auto layout
It's a simulator.
Not the right tutorial. at some points it doesn't work
paid plugin