# Learn Auto Layout for Web & UI Design in Figma This part will teach you how to use Auto Layout in Figma. Auto Layout is a great tool that helps you create designs that automatically adjust when things change, like when the text gets longer or the screen size is different. It makes designs flexible, easier to manage, and faster to create. This guide is perfect for beginners and students who want to make their UI designs responsive and organized ### Why is Auto Layout Important? 1. **Responsive**: Auto Layout adjusts your design automatically when the content changes, making sure everything fits perfectly. 2. **Saves Time**: You don't have to move elements manually; Auto Layout organizes everything for you. 3. **Consistent**: It keeps all elements aligned and spaced evenly, making your design look neat and professional. 4. **Scalable**: It makes it easier to manage large designs by keeping everything organized. ### Let us Start #### 1\. **Choose the Items** * First, select the elements you want to organize for our example we have three text ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728015045250/03119537-54b9-4aab-a3be-3ec5053f7a00.png align="center") #### 2\. **Apply Auto Layout** * Once you select the items, go to the right-hand side and click on the **Auto Layout** button. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728015109899/d9a45fa3-0477-48e4-9479-2cebc528592b.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728015657735/554a88cc-62a9-4dda-80c2-8a53c14f0a6f.gif align="center") #### 3\. **Set Direction: Horizontal or Vertical** * Decide if you want your items to line up **side by side (horizontal)** or **stacked on top of each other (vertical)**. * **Horizontal**: For things like navigation bars or lists in a row. * **Vertical**: For lists or forms where items are stacked. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728015793532/4f48f128-4c06-42eb-87e2-0eda964d408b.png align="center") --- **Button Wrap using Auto Layout** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728016123188/12c88d29-e7ac-4e3f-8360-e747fa617573.png align="center") ## **Button without auto layout:** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728016330519/e879b34c-9872-4359-a3c3-bdfa1a5d5c5c.gif align="center") The button size is fixed, and the text may not align correctly within the button if its content changes. --- ## **Button with auto layout:** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728016461083/d435e2f1-50f5-4cd8-8fed-d134387c90e9.gif align="center") the button adjusts to the size of its content automatically. How do you apply that? **follow this step:** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728017277523/a4aba91a-2f69-43ef-b7c8-0cbe75e5d529.gif align="center") --- ## **Add Padding**: Adjust padding to add space around we have padding horizontal and vertical ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728017801174/65ca4d37-2805-40c8-b522-10ff7ea8e951.png align="center") STEPS: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728017584592/37385285-3298-4a50-aaaf-a0eef8806df8.gif align="center") --- ## Auto layout alignment Auto Layout allows you to organize objects automatically, controlling the spacing and alignment of elements in your design. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728018036558/5cb16fa9-6d03-40b3-ae78-64429ecb8a7c.png align="center") **Steps:** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728018246772/e526337f-ac36-4a59-b528-038717cf6d0d.gif align="center") By using Auto Layout alignment, designers can maintain clean and organized layouts, especially when dealing with elements of different sizes. --- # Nested Auto Layout **Nested Auto Layout** in Figma, where multiple Auto Layouts are combined within a single component or frame. This feature allows designers to manage complex layouts in a more organized and responsive way. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728019719394/45322434-3947-4d81-af7b-8fb853024b6b.gif align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728021067186/427e7518-b136-4a04-9cee-4566526ef8a0.gif align="center") --- # **Resizing and Responsiveness**: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728021774974/45f806e3-e4ae-4bad-85aa-cc09df86082b.gif align="center") **Hug Contents**: * The image of the food on the left is set to "Hug Contents," meaning the frame around the image will adjust automatically to the size of the image. This ensures that the layout remains flexible when images with different dimensions are used. As seen in the rightmost example, the layout automatically adjusts to fit a new screen or content size. Auto Layout ensures that the text and button remain in the correct position while keeping the overall card design intact. **Step 1:** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728022059972/2cd8b59e-990a-4569-8665-92bfb27244cd.gif align="center") **Step 2:** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728022295480/1c458134-493f-4fd2-9e4e-8a642adfb358.gif align="center") **Step 3:** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728022714652/6d64eabf-f727-428f-8da4-05bf074f5d35.gif align="center") Step 4: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728024458452/5ac7c055-d48a-4e17-b8d1-8a3e13f22396.gif align="center") --- Auto Layout makes your design responsive and easy to manage. It helps you create professional designs without doing a lot of manual work. By using Auto Layout, you can save time and make your designs flexible across different screen sizes Reference: [Add auto layout to a design – Figma Learn - Help Center](https://help.figma.com/hc/en-us/articles/5731482952599-Add-auto-layout-to-a-design) Figma Link: [https://www.figma.com/design/m8VZriL1zHCYerZ68cfYtH/FIGMA-FUNDAMENTALS?node-id=47-2](https://www.figma.com/design/m8VZriL1zHCYerZ68cfYtH/FIGMA-FUNDAMENTALS?node-id=47-2)