Auto Layout

Auto Layout automatically positions and sizes elements within a frame based on rules you define. Similar to CSS Flexbox and Grid, it creates responsive, maintainable layouts that adapt when content changes.

Enabling Auto Layout

1. Select a frame containing child elements
2. In the Properties Panel, find the Auto Layout section
3. Toggle Enable Auto Layout
4. Azyrom automatically infers initial layout settings from current positions

Note: Auto Layout only works on frames that contain child elements. The toggle will only appear for eligible frames.

Layout Modes

Row Layout

Arranges children horizontally from left to right:

• Perfect for navigation bars, button groups, and horizontal lists
• Primary axis: Horizontal
• Counter axis: Vertical
• Children are positioned left to right with defined spacing

Column Layout

Arranges children vertically from top to bottom:

• Ideal for forms, menus, and vertical lists
• Primary axis: Vertical
• Counter axis: Horizontal
• Children are positioned top to bottom with defined spacing

Grid Layout

Arranges children in a two-dimensional grid:

• Great for photo galleries, icon sets, and card layouts
• Configure columns and rows independently
• Control column gaps and row gaps separately
• Grid auto-wraps based on specified column count

Spacing Controls

Gap (Row/Column Modes)

• Spacing - Space between child elements
• Auto Gap - Automatically infer spacing from existing positions
• When Auto Gap is off, you can manually set a specific pixel value

Grid Gaps (Grid Mode)

• Column Gap - Horizontal space between grid columns
• Row Gap - Vertical space between grid rows
• Set independently for precise grid control

Padding

Space between the frame edge and its children:

• Padding Top - Space from top edge (0-100px)
• Padding Bottom - Space from bottom edge (0-100px)
• Padding Left - Space from left edge (0-100px)
• Padding Right - Space from right edge (0-100px)
• All padding values support design variable binding

Sizing Modes

Primary Axis Sizing

Controls how the frame sizes along its main direction:

• Hug Contents - Frame resizes to fit children + spacing + padding
• Fixed - Frame maintains its current size
• Fill Container - Frame expands to fill parent

Counter Axis Sizing

Controls how the frame sizes perpendicular to its main direction:

• Hug Contents - Frame height/width matches tallest/widest child
• Fixed - Frame maintains its current size
• Fill Container - Frame expands to fill parent

Child Sizing

Individual children can override sizing behavior:

• Fixed - Child maintains its specified size
• Hug - Child sizes to fit its own content
• Fill - Child expands to fill available space in parent

Grid Configuration

When Grid mode is active:

• Columns - Number of columns (1-12)
• Rows - Number of rows (0 = auto, calculates based on children)
• Column Gap - Horizontal spacing between columns
• Row Gap - Vertical spacing between rows
• Children automatically flow into grid cells

Advanced Options

Wrap Children

In Row/Column mode:

• Enable to allow children to wrap to next line when they exceed frame width/height
• Disable for single-line layouts
• Works like CSS flexbox wrap

Stroke Included

Determines if child strokes are included in layout calculations:

• Enabled - Strokes count toward child size (layout accounts for stroke width)
• Disabled - Only fill area counts (strokes extend beyond layout bounds)

Text Baseline Alignment

For layouts containing text elements:

• Enabled - Align text elements by their baseline instead of bounding box
• Disabled - Use standard box alignment
• Useful for aligning text with different font sizes

Stacking Order

Controls how overlapping elements are layered:

• First on Top - First child appears above subsequent children
• Last on Top - Last child appears above previous children
• Useful when children overlap due to negative spacing or constraints

Absolute Positioning

Children can opt out of auto layout:

• Select a child element within an auto layout frame
• In Properties Panel, set Layout Positioning to Absolute
• The element is now positioned manually and won't participate in auto layout flow
• Useful for overlays, badges, or elements that need fixed positions

Common Use Cases

Button with Icon

1. Create a frame with an icon and text
2. Enable Auto Layout in Row mode
3. Set spacing to 8px, padding to 12px horizontal / 8px vertical
4. Set both axes to "Hug Contents"
5. Button automatically sizes to fit content

Card Layout

1. Create a frame with image, title, description, and button
2. Enable Auto Layout in Column mode
3. Set spacing to 16px, padding to 24px
4. Set primary axis to "Hug Contents", counter axis to "Fixed" (e.g., 300px width)
5. Card height adapts to content while maintaining fixed width

Responsive Grid

1. Create a frame containing multiple items
2. Enable Auto Layout in Grid mode
3. Set columns to 3, rows to 0 (auto)
4. Set column/row gaps to 16px
5. Grid automatically wraps items into rows of 3

Navigation Bar

1. Create a frame with navigation items
2. Enable Auto Layout in Row mode
3. Set spacing to 24px, padding to 16px
4. Set primary axis to "Fill Container", counter axis to "Hug"
5. Navigation stretches full width while hugging content height

Tips and Best Practices

• Start Simple - Enable Auto Layout and let Azyrom infer initial settings from current positions
• Nest Layouts - Combine multiple auto layout frames for complex responsive designs
• Use Hug for Dynamic Content - Frames with "Hug Contents" automatically resize when content changes
• Fill for Responsive Elements - Use "Fill" sizing for elements that should expand with container
• Padding for Breathing Room - Add padding to create space between frame edges and content
• Grid for Uniform Items - Grid mode is perfect for galleries and icon sets
• Absolute for Exceptions - Use absolute positioning sparingly for elements that need manual placement
• Variable Binding - Bind spacing and padding to design variables for consistent spacing systems

Auto Layout vs Manual Layout

Feature	Auto Layout	Manual Layout
Position	Automatic based on rules	Manual x/y coordinates
Size	Can adapt to content	Fixed dimensions
Responsive	Automatically adapts	Requires manual updates
Content Changes	Layout updates automatically	Must reposition manually
Best For	UI components, lists, grids	Illustrations, precise layouts
Flexibility	Rule-based, predictable	Total control, any position

Keyboard Shortcuts

• Shift + A - Toggle Auto Layout on selected frame
• Alt + drag - Adjust spacing between items
• Alt + Shift + drag - Adjust padding

Related Topics

• Constraints - Control how elements resize within their parent
• Grid Panel - Layout grids for alignment
• Variables - Bind spacing and padding to design tokens
• Frames - Creating frames for layouts