Figma Responsive Auto layout using the Resizing Feature
Tags: figmatutorial, figmatips, figma, uidesign
Published: 2022-01-21 00:36:07

---
title: Figma Responsive Auto layout using the Resizing Feature
published: true
date: 2022-01-05 19:55:00 UTC
tags: figmatutorial,figmatips,figma,uidesign
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/0*b1wTNbaBA25W6uaV.jpg)

In this quick post, we’ll take you through how to create a responsive layout using the sizing feature in Figma.

### Create Auto Layout Frames

To begin, we’ll start by creating a simple frame and transform it to Auto layout.

- 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**.

![](https://cdn-images-1.medium.com/max/1024/0*Z-GecFcE725TC7Fa.png)

- Next, head to the **Auto layout** section in the right-hand sidebar.

![](https://cdn-images-1.medium.com/max/486/0*v9tniEoeHPbuNiVe.png)

![](https://cdn-images-1.medium.com/max/480/0*WaowflTrJPsP72Ro.png)

- Select the **Alignment and padding** icon in the right corner of the Auto layout section and set it to  **center**.

![](https://cdn-images-1.medium.com/max/480/0*Z0u8gl17h0XX6uZL.png)

- Next, head to the **Resizing** section under the **Auto layout**  panel.

![](https://cdn-images-1.medium.com/max/478/0*kx8e63DPYyK_kTh9.png)

- Set the Width to **Fixed width** and Height to **Fixed height.**

![](https://cdn-images-1.medium.com/max/1024/0*DXvPB-zenAbE1gci.png)

- 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**.

![](https://cdn-images-1.medium.com/max/562/0*JSl3JqTj-VMUbXp3.png)

When we resize the Parent frame, the Child frame’s width remains fixed by default. The goal of this exercise is to have the Child frame resize in response to the size of its Parent frame.

### Auto Layout Resizing

In order to make our **Child frame** responsive to it’s **Parent frame** , we’ll use the resizing feature.

- Select the **Child frame** and head to the **Resizing** section under Auto layout in the right-hand sidebar.

![](https://cdn-images-1.medium.com/max/478/0*waN3cagfwB9Ggu9n.png)

- Set the Child frame’s Resizing settings to **Fill container** width, and **Fill container** height.

![](https://cdn-images-1.medium.com/max/1024/0*loNZvByZHNEqO2IC.png)

- Finally, select the parent frame and add a 100px padding in the **Auto layout**  section.

![](https://cdn-images-1.medium.com/max/482/0*9yUCUVL_fFI7HogB.png)

![](https://cdn-images-1.medium.com/max/1024/0*RMuxGJS0PYHllu4P.png)

If now we resize the **Parent frame** , the **Child frame** will also resize.

![](https://cdn-images-1.medium.com/max/1024/0*2wf08aN1tB-MDLUd.png)

### Remove Auto Layout

To remove auto layout from your frame, select your Auto layout frame and head to the right-hand sidebar in the Auto layout section. Hit the — icon in the right corner of the Auto layout section.

![](https://cdn-images-1.medium.com/max/488/0*DDrPbRMi-b3DTllR.png)

That’s everything about the Auto layout feature in this post. in the next posts we’ll cover more concerning Figma auto layout.

### Before you go

Feel free to visit our website [**captain-design.com**](https://www.captain-design.com/) where we are sharing generously, ready for commercial use [**Figma and HTML templates**](https://www.captain-design.com/).

You’ll find three things to help you kickstart your next project’s design :

- [**200+ free Figma templates**](https://www.captain-design.com/templates/) **.**
- [**Free Html + Bootstrap 5 templates**](https://www.captain-design.com/templates/tag/html) **.**
- [**Amazing Figma Plugins and UI kits**](https://www.captain-design.com/uikit/) **.**

_Originally published at_ [_https://www.captain-design.com_](https://www.captain-design.com/blog/figma-responsive-auto-layout-using-the-resizing-feature/) _on January 5, 2022._