Figma responsive component crash course

Key Takeaways

here's a crash course on creating responsive components in figma's frame is a header for a desktop web page we want to make it flexible or responsive enough to adapt seamlessly to an iPad or an even bigger screen make it a component selected all of these that I want on the left and I'm going to hit frame selection and turn on auto layout there want a gap like 40. now I'm going to do the same with these elements that I want to pin to the right frame selection Auto layout 40 pixels when I resize select this entire frame instead of a horizontal gap of 157 I'm going to change this to Auto that is going to automatically adjust the space between these two groups depending on the width of our component we can make this 1440. we can make a version for 1920 and we can make an iPad version as well you can use Auto layout to make almost any kind of component responsive go ahead and try it out for yourself