Figma Responsive Auto layout using the Resizing Feature

Create Auto Layout Frames

  • Let’s pick the frame tool and create a rectangular frame with the dimensions of 1200W 1500H.
  • Change the frame name to Parent Frame.
  • Change the frame’s color from the default white to the following color: #B8B8B8.
  • Next, head to the Auto layout section in the right-hand sidebar.
  • Select the Alignment and padding icon in the right corner of the Auto layout section and set it to center.
  • Next, head to the Resizing section under the Auto layout panel.
  • Set the Width to Fixed width and Height to Fixed height.
  • Now, pick again the frame tool and draw a new frame within our Parent Frame with the dimensions of 800W 1000H.
  • Change the frame name to Child Frame.
  • Give it a Fill color of white, and transform it to Auto layout.

Auto Layout Resizing

  • Select the Child frame and head to the Resizing section under Auto layout in the right-hand sidebar.
  • Set the Child frame’s Resizing settings to Fill container width, and Fill container height.
  • Finally, select the parent frame and add a 100px padding in the Auto layout section.

Remove Auto Layout

Before you go

--

--

Figma Landing Page’s Design Resources Colors palettes, Typography Styles and ready to use Components. https://www.captain-design.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Raouf Belakhdar

Raouf Belakhdar

186 Followers

Figma Landing Page’s Design Resources Colors palettes, Typography Styles and ready to use Components. https://www.captain-design.com/