#Figma/Auto-Layout

Basics

• When using multiple elements, Auto Layout will be applied.
• Shortcut: Shift + A

Nested Component

• Nested Auto Layout can contain multiple Auto Layout frames inside it.
• Auto Layout can be applied to individual elements as well.

How to use directions in Auto Layout?

• Vertical Layout
• Horizontal Layout
• Wrap

Padding in Auto Layout

• Horizontal Padding
• Vertical Padding
• Individual Side Padding

Alignment (Positioning)

• Top - Start/Center/End
• Middle - Start/Center/End
• Bottom - Start/Center/End

How to use Include/Exclude Strokes in Auto Layout?

• This property doesn't work with inside stroke.
• Go to settings options in Auto Layout. In the first option (Strokes), you will find a dropdown for Include in layout or Exclude in layout.

How to use canvas stacking (z-index)?

• Go to settings options in Auto Layout. In the second option (Canvas Stacking), you will find a dropdown for First on top or Last on top.

Text Baseline

• Go to settings options in Auto Layout. In the third option (Text Baseline), check the tick symbol to activate the text baseline.
• This is used to align the baseline of the text or object.

Absolute Positioning

• Select the element that you want to adjust the position for, even if it’s inside an Auto Layout.
• To move an element, first select it, then choose the Absolute Positioning option, and move it to any place.

Auto Layout Behaviors

• Fixed – Fixes the content's width/height. The element size remains fixed.
• Hug – The content width/height will adjust based on the element size.
• Fill Container – Automatically adjusts the layout height and width by increasing or decreasing the filled content. This is used for responsive design.