60 Mins advanced
9. Advanced Tooling: Auto Layout
Module 9
The End of Absolute Positioning
Amateur designers drag boxes onto a canvas and leave them there. Professional UI Engineers build components that react to data. If a button's text changes from 'OK' to 'Confirm Transaction', the button must resize itself automatically. In Figma, this is called Auto Layout; in code, it is called Flexbox.
📦 Moving from Static to Dynamic
Absolute positioning (X/Y coordinates) breaks the moment your app is translated into another language or viewed on a smaller screen. Auto Layout solves this by treating containers as intelligent wrappers that understand their contents.
↔️ Direction & Spacing (Gap)
When you apply Auto Layout to a container, you must define its primary axis:
- Row (Horizontal): Elements sit side-by-side (e.g., a row of navigation icons).
- Column (Vertical): Elements stack on top of each other (e.g., a news feed).
- Gap: The strict, unchangeable space between items. Instead of manually pushing boxes 16px apart, you set a Gap of 16px, and the engine enforces it automatically.
📏 Resizing Rules: Hug vs. Fill
How should the container react when the screen size changes?
- Hug Contents: The container shrinks to wrap tightly around its children. (Used for Buttons).
- Fill Container: The element stretches to take up all available remaining space in its parent. (Used for flexible text inputs or responsive grid columns).
- Fixed: A hardcoded pixel dimension. Use this sparingly, mostly for specific icons or avatars.
Hands-On Tutorial: Auto Layout Refactor
In the Sandbox, you will find a broken, unresponsive user card component. Your mission is to refactor it using Auto Layout principles. You must configure the container to stack items vertically (Column direction), set a consistent Gap of 16px between the avatar and the text, apply a uniform Padding of 24px, and ensure the items are perfectly Center Aligned.
In the Sandbox, you will find a broken, unresponsive user card component. Your mission is to refactor it using Auto Layout principles. You must configure the container to stack items vertically (Column direction), set a consistent Gap of 16px between the avatar and the text, apply a uniform Padding of 24px, and ensure the items are perfectly Center Aligned.
Mission: Auto Layout Refactor
Click
W: AUTO
Layout Controls
Horizontal Padding10px
Vertical Padding10px
Knowledge Check
Ready to test your understanding of 9. Advanced Tooling: Auto Layout?