Vertical Auto Layout in Figma is a powerful layout system used to arrange elements from top to bottom along the y-axis. It automatically manages the position, spacing, padding, alignment, and resizing of elements when content changes. Vertical Auto Layout is especially useful for forms, cards, lists, dashboards, articles, mobile screens, news feeds, timelines, menus, profile sections, notifications, and other interfaces where content naturally flows vertically.
Learn professional Figma UI/UX design concepts with JustAcademy Figma Training and build practical responsive interface projects. You can also Register for Figma Course Demo to understand the course structure and learning approach.
Vertical Auto Layout is an Auto Layout flow in Figma that automatically arranges child objects from top to bottom along the y-axis. When objects are added, removed, reordered, or resized, Figma automatically adjusts their position according to the defined gap, padding, alignment, and resizing settings.
Vertical Auto Layout
|
v
+--------------------------+
| Heading |
| |
| Description |
| |
| Input Field |
| |
| Password Field |
| |
| Login Button |
+--------------------------+
|
v
Elements flow from TOP to BOTTOM
For example, a login form normally contains a heading, description, email field, password field, and button. Since these elements naturally appear one below another, Vertical Auto Layout is an ideal choice.
Without Auto Layout, designers often need to manually move elements whenever text changes or a new element is added. Vertical Auto Layout removes much of this manual work by allowing Figma to calculate the position of child objects automatically.
The main characteristic of Vertical Auto Layout is that child objects follow the y-axis. New objects are added into the vertical flow, and existing objects move when the structure changes.
Y-Axis
|
v
+------------------+
| Heading |
+------------------+
|
v
+------------------+
| Description |
+------------------+
|
v
+------------------+
| Input |
+------------------+
|
v
+------------------+
| Button |
+------------------+
Figma's current documentation describes Vertical Auto Layout as a flow that places objects along the y-axis. Objects that are added, removed, or reordered continue to follow that vertical flow. :contentReference[oaicite:0]{index=0}
Auto Layout is based on a parent-child relationship. The parent is the Auto Layout frame, while the objects inside the frame are its children.
Vertical Auto Layout Frame
|
+-- Heading
+-- Description
+-- Email Field
+-- Password Field
+-- Button
The parent controls the overall flow, padding, gap, alignment, wrapping, and available space. Child objects can have their own resizing behavior.
| Feature | Regular Frame | Vertical Auto Layout |
|---|---|---|
| Automatic stacking | No | Yes |
| Vertical flow | Manual | Automatic |
| Spacing management | Manual | Automatic |
| Content resizing | More manual | Responsive |
| Adding elements | May require repositioning | Automatic |
| Removing elements | May require repositioning | Automatic |
| Padding | Manual positioning | Built-in |
| Long content | Can require manual adjustment | Can adapt automatically |
| Reusable components | More difficult | Easier |
Figma currently provides three Auto Layout flows: Vertical, Horizontal, and Grid. The correct flow depends on the structure of the content.
| Flow | Direction | Common Use |
|---|---|---|
| Vertical | Top to bottom | Forms, cards, lists, articles |
| Horizontal | Left to right | Navigation, buttons, tabs, toolbars |
| Grid | Rows and columns | Dashboards, galleries, bento layouts |
You can apply Auto Layout to an existing frame or to a selection of layers. Figma then allows you to choose Vertical, Horizontal, or Grid flow.
Figma's current guide confirms that Auto Layout can be added with Shift + A, through the right sidebar, or through the right-click menu. :contentReference[oaicite:1]{index=1}
You can create an empty frame first and then configure it as a Vertical Auto Layout frame before adding content.
Create Frame
|
v
Apply Auto Layout
|
v
Select Vertical Flow
|
v
Set Padding
|
v
Set Gap
|
v
Set Alignment
|
v
Add Child Elements
This workflow is useful when building reusable components, cards, forms, or page sections from scratch.
Suppose you already have a heading, description, input field, and button placed manually. Select all of them and press Shift + A. Figma creates an Auto Layout frame around the selected layers, after which you can select Vertical flow.
Before Auto Layout
Heading
Description
Input
Button
|
| Shift + A
v
After Auto Layout
+----------------------+
| Heading |
| Description |
| Input |
| Button |
+----------------------+
Padding is the space between the boundary of the parent Auto Layout frame and its child objects. It creates internal breathing room around the content.
+--------------------------------------+
| Top Padding |
| |
| Heading |
| |
| Description |
| |
| Button |
| |
| Bottom Padding |
+--------------------------------------+
Figma allows padding to be set uniformly, horizontally and vertically, or independently for top, right, bottom, and left sides. :contentReference[oaicite:2]{index=2}
Top padding defines the distance between the top edge of the parent frame and the first child.
+----------------------------+
| |
| Top Padding |
| |
| Heading |
| Description |
| Button |
+----------------------------+
Top padding is useful for cards, dialogs, forms, and content sections.
Bottom padding defines the distance between the last child and the bottom edge of the parent.
+----------------------------+
| Heading |
| Description |
| Button |
| |
| Bottom Padding |
| |
+----------------------------+
Left and right padding control the horizontal breathing room between children and the parent frame.
+--------------------------------------+
| 24px [ Content Area ] 24px |
+--------------------------------------+
Horizontal padding is particularly important for cards, forms, mobile screens, sidebars, and content containers.
Different padding values can be assigned to each side when the design requires asymmetric spacing.
| Side | Example |
|---|---|
| Top | 24px |
| Right | 16px |
| Bottom | 32px |
| Left | 16px |
Individual padding can be useful for specialized layouts, although consistent spacing tokens are generally easier to maintain across a design system.
Gap defines the distance between child objects inside an Auto Layout frame. In Vertical Auto Layout, the normal numeric gap controls the vertical distance between adjacent children.
[Heading]
|
16px
|
[Description]
|
16px
|
[Input]
|
16px
|
[Button]
A consistent gap creates a predictable visual rhythm and prevents designers from manually positioning each object.
A numeric gap specifies an exact amount of space between child objects.
| Gap | Typical Use |
|---|---|
| 4px | Very closely related elements |
| 8px | Compact spacing |
| 12px | Small component groups |
| 16px | Common component spacing |
| 24px | Major content groups |
| 32px | Large sections |
| 48px | Major page-level separation |
Instead of using a fixed number, Auto spacing distributes available space between objects. For vertical and horizontal flows, Figma provides Auto spacing options such as Between, Around, and Evenly. :contentReference[oaicite:3]{index=3}
Between distributes the available space between the child objects.
+----------------------------+
| Heading |
| |
| |
| Description |
| |
| |
| Button |
+----------------------------+
Around distributes space around each child object.
Evenly distributes available space equally across the relevant spaces.
Alignment determines where child objects sit along the cross-axis. Because Vertical Auto Layout flows vertically, its cross-axis is horizontal.
Left Center Right
+--------+ +--------+ +--------+
|Item | | Item | | Item|
|Item | | Item | | Item|
|Item | | Item | | Item|
+--------+ +--------+ +--------+
With numeric spacing, Figma provides nine alignment positions. When Auto spacing is used, the vertical flow provides Left, Center, and Right alignment options. :contentReference[oaicite:4]{index=4}
Left alignment places child objects against the left side of the available content area.
+--------------------------------+
| Heading |
| Description |
| Input |
| Button |
+--------------------------------+
Left alignment is commonly used for forms, articles, settings pages, cards, and dashboard content.
Center alignment places the children horizontally in the center of the parent.
+--------------------------------+
| |
| Heading |
| Description |
| [Button] |
| |
+--------------------------------+
Center alignment works well for onboarding screens, empty states, login screens, confirmation pages, and promotional sections.
Right alignment places child objects toward the right side of the parent.
+--------------------------------+
| Heading |
| Description |
| Button |
+--------------------------------+
Right alignment can be useful for numerical information, specialized dashboards, and specific editorial layouts.
Hug Contents allows an Auto Layout frame to resize itself according to its children while respecting padding and spacing. It is especially useful when the height of a component should grow automatically as its content changes.
Short Content:
+----------------------------+
| Heading |
| Description |
| Button |
+----------------------------+
Long Content:
+----------------------------+
| Heading |
| Longer description text |
| that needs more space |
| Additional content |
| Button |
+----------------------------+
Figma defines Hug Contents as a resizing behavior that keeps an Auto Layout frame at the smallest size needed to contain its children and spacing. :contentReference[oaicite:5]{index=5}
Fill Container allows a child layer to occupy the available space in its parent while respecting padding and other spacing settings.
+------------------------------------------+
| Heading |
| |
| [ Input Field ] |
| |
| [ Input Field ] |
| |
| [ Button ] |
+------------------------------------------+
Fill Container can be used on child objects inside Auto Layout frames and is particularly useful for full-width inputs, buttons, and content areas. :contentReference[oaicite:6]{index=6}
Fixed sizing maintains a specific dimension even when surrounding content changes.
Card Width = Fixed
Card Height = Hug Contents
Content changes
|
v
Card height adjusts
Card width remains controlled
Fixed dimensions are useful when a design requires a predictable width or height.
Minimum and maximum dimensions allow designers to control how far a frame or child can shrink or expand.
Minimum Height = 200px
Maximum Height = 600px
200px <= Component Height <= 600px
Figma supports minimum and maximum width and height settings alongside other resizing properties. :contentReference[oaicite:7]{index=7}
Forms are one of the most common applications of Vertical Auto Layout because their fields naturally appear in a top-to-bottom sequence.
+--------------------------------+
| Create Account |
| |
| Full Name |
| [__________________________] |
| |
| Email |
| [__________________________] |
| |
| Password |
| [__________________________] |
| |
| [Create Account] |
+--------------------------------+
A professional form field can be created as a nested Vertical Auto Layout component.
Form Field
|
+-- Label
|
+-- Input
|
+-- Helper Text / Error Message
This structure allows an error message to appear without manually moving the fields below it.
A login form can be created almost entirely with nested Auto Layout frames.
Login Form
|
+-- Heading
+-- Description
+-- Email Field
+-- Password Field
+-- Remember Me
+-- Login Button
+-- Forgot Password
+-- Sign Up Link
The main form uses Vertical Auto Layout, while smaller rows such as Remember Me can use Horizontal Auto Layout.
A registration form can combine Vertical and Horizontal Auto Layout.
Registration Form
|
+-- Heading
+-- Description
+-- Name Row
| +-- First Name
| +-- Last Name
+-- Email
+-- Password
+-- Confirm Password
+-- Terms
+-- Submit Button
The main structure flows vertically while the first-name and last-name fields can be arranged horizontally.
Cards are naturally suited to Vertical Auto Layout because content usually flows from image or heading to description, metadata, and actions.
+--------------------------------+
| [Image] |
| |
| Product Title |
| Product description goes here |
| and can contain more content. |
| |
| ₹999 |
| |
| [Add to Cart] |
+--------------------------------+
The card can use Hug Contents for height so it automatically grows when the description becomes longer.
Product Card
|
+-- Product Image
+-- Product Information
| |
| +-- Brand
| +-- Product Name
| +-- Rating
| +-- Price
|
+-- Actions
|
+-- Wishlist
+-- Add to Cart
The Product Information section can use Vertical Auto Layout, while the Actions section can use Horizontal Auto Layout.
A news card can contain an image, category, headline, summary, author, and date. Vertical Auto Layout allows the card to respond when a headline or summary becomes longer.
News Card
|
+-- Image
+-- Category
+-- Headline
+-- Summary
+-- Author Row
|
+-- Avatar
+-- Author
+-- Date
Social media posts are an excellent example of nested Vertical Auto Layout.
Post
|
+-- Profile Row
| +-- Avatar
| +-- Name
| +-- More
|
+-- Image
|
+-- Action Row
|
+-- Like Count
|
+-- Caption
|
+-- Comments
|
+-- Timestamp
Figma's documentation uses social media posts as an example of layouts where content naturally flows vertically. :contentReference[oaicite:8]{index=8}
A timeline is a natural Vertical Auto Layout structure because events appear sequentially from top to bottom.
Timeline
|
+-- Event 1
|
+-- Event 2
|
+-- Event 3
|
+-- Event 4
|
+-- Event 5
Each timeline item can be a reusable component containing its own icon, date, title, and description.
A to-do list is another simple example of Vertical Auto Layout.
+--------------------------------+
| My Tasks |
| |
| [ ] Complete Figma Course |
| [x] Create Wireframe |
| [ ] Design Dashboard |
| [ ] Review Prototype |
+--------------------------------+
When a task is added or removed, the remaining tasks automatically reposition themselves.
A notification center can use a Vertical Auto Layout parent with individual notification components.
Notifications
|
+-- Notification 1
+-- Notification 2
+-- Notification 3
+-- Notification 4
+-- Notification 5
Removing one notification causes the following notifications to move into the available space automatically.
A settings page can be organized into vertically stacked sections.
Settings
|
+-- Profile Section
| +-- Name
| +-- Email
|
+-- Security Section
| +-- Password
| +-- Two-Factor Authentication
|
+-- Notification Section
| +-- Email Notifications
| +-- Push Notifications
|
+-- Save Button
Article pages are naturally vertical because their content flows from title to metadata, image, paragraphs, headings, and related content.
Article
|
+-- Category
+-- Title
+-- Subtitle
+-- Author
+-- Date
+-- Hero Image
+-- Introduction
+-- Section 1
+-- Section 2
+-- Section 3
+-- Related Articles
A landing page can use a Vertical Auto Layout frame as its main structure.
Landing Page
|
+-- Header
+-- Hero Section
+-- Features
+-- Testimonials
+-- Pricing
+-- FAQ
+-- CTA
+-- Footer
Each section can be a nested Auto Layout frame with its own padding, gap, alignment, and resizing behavior.
Frequently Asked Questions are usually displayed as a vertical list.
FAQ
|
+-- Question 1
+-- Question 2
+-- Question 3
+-- Question 4
+-- Question 5
Each FAQ item can contain a question row and answer content inside a nested Auto Layout frame.
An accordion can use Vertical Auto Layout to manage expanded and collapsed content.
Accordion Item
|
+-- Question Row
| +-- Question
| +-- Arrow
|
+-- Answer Content
When the answer is shown, the component grows vertically and pushes the content below it downward.
A profile card can contain an avatar, name, role, biography, statistics, and actions.
Profile Card
|
+-- Avatar
+-- Name
+-- Role
+-- Bio
+-- Statistics
+-- Actions
The Statistics and Actions sections can use Horizontal Auto Layout inside the Vertical parent.
Pricing cards are generally structured vertically.
Pricing Card
|
+-- Plan Name
+-- Price
+-- Billing Period
+-- Description
+-- Feature List
+-- CTA Button
The feature list itself can use another Vertical Auto Layout frame.
A feature list can contain vertically stacked feature rows.
Features
|
+-- [✓] Unlimited Projects
+-- [✓] Team Collaboration
+-- [✓] Advanced Analytics
+-- [✓] Priority Support
Each individual feature row can use Horizontal Auto Layout while the complete list uses Vertical Auto Layout.
Vertical Auto Layout is particularly valuable for text-heavy interfaces. Headings, paragraphs, captions, and other text layers can stack automatically.
Article Section
|
+-- Heading
|
+-- Paragraph
|
+-- Paragraph
|
+-- Subheading
|
+-- Paragraph
When a paragraph becomes longer, the elements below it can move downward automatically.
Long text needs special attention in Auto Layout. Fixed-size text boxes can cause clipping or overlap when the content becomes longer.
Short Text
|
+-- Heading
+-- Short Description
+-- Button
Long Text
|
+-- Heading
+-- Longer Description
| that needs more
| vertical space
+-- Button
For fluid Auto Layout designs, avoid unnecessary fixed-size text boxes. Figma recommends suitable text resizing because fixed-size text layers may not expand when content grows and can cause overlap. :contentReference[oaicite:9]{index=9}
Images can be placed inside vertical cards and content sections.
+----------------------------+
| |
| IMAGE |
| |
+----------------------------+
| Title |
| Description |
| Button |
+----------------------------+
The image can use a fixed height while the text section can use Hug Contents.
Card
|
+-- Image
|
+-- Content
|
+-- Category
+-- Title
+-- Description
+-- Action
This pattern is common for e-commerce products, blogs, news articles, courses, and portfolio projects.
Nested Auto Layout means placing an Auto Layout frame inside another Auto Layout frame. This is essential for creating complex responsive interfaces.
Main Vertical Frame
|
+-- Header Horizontal Frame
| +-- Logo
| +-- Navigation
|
+-- Content Vertical Frame
| +-- Heading
| +-- Description
| +-- Cards
|
+-- Footer Horizontal Frame
+-- Links
+-- Social Icons
Figma explains that nested Auto Layout frames can combine vertical, horizontal, and grid flows, with each nested frame having its own padding, gap, and resizing behavior. :contentReference[oaicite:10]{index=10}
A Vertical Auto Layout parent can contain Horizontal Auto Layout children.
Vertical Parent
|
+-- Heading
|
+-- Horizontal Action Row
| +-- Cancel
| +-- Save
|
+-- Description
|
+-- Horizontal Information Row
+-- Icon
+-- Details
This is a common pattern for forms, dialogs, cards, dashboards, and settings screens.
Large screens can be divided into multiple vertical Auto Layout sections.
Page
|
+-- Header Section
| +-- Title
| +-- Subtitle
|
+-- Form Section
| +-- Field
| +-- Field
| +-- Field
|
+-- Action Section
+-- Button
This structure makes large designs easier to maintain because each section can have independent spacing and padding.
Components can use Vertical Auto Layout to create reusable cards, forms, alerts, menus, and content blocks.
Card Component
|
+-- Image
+-- Title
+-- Description
+-- Action
When component content changes, the Auto Layout frame can resize according to its configuration.
Figma components are frames, so Auto Layout can be applied to them. The main component and its instances have different editing capabilities for layers, padding, gap, and other properties. :contentReference[oaicite:11]{index=11}
Vertical Auto Layout works well with component variants such as Default, Active, Disabled, Expanded, Collapsed, Loading, Error, and Success.
| Variant | Example |
|---|---|
| Default | Normal content |
| Expanded | Additional content visible |
| Collapsed | Additional content hidden |
| Loading | Spinner and loading message |
| Error | Error message displayed |
| Success | Success confirmation displayed |
An alert can contain an icon, title, description, and action button.
Alert
|
+-- Icon
+-- Title
+-- Description
+-- Action Button
When the description becomes longer, the alert can expand vertically without requiring manual repositioning.
Form validation messages are a strong use case for Vertical Auto Layout.
Email Field
|
+-- Label
+-- Input
+-- Error Message
When the error message appears, the content below the field moves down automatically.
A success state can be designed as a vertical stack.
Success State
|
+-- Success Icon
+-- Heading
+-- Description
+-- Continue Button
Empty states often use a centered vertical structure.
+--------------------------------+
| |
| [Illustration] |
| |
| No Projects |
| |
| Create your first project |
| |
| [Create Project] |
| |
+--------------------------------+
The parent can use Vertical Auto Layout with center alignment.
Modal dialogs can use Vertical Auto Layout to stack their title, message, content, and action area.
Modal
|
+-- Title
+-- Description
+-- Content
+-- Action Row
+-- Cancel
+-- Confirm
The Action Row can use Horizontal Auto Layout inside the Vertical parent.
Sidebars can use Vertical Auto Layout to stack navigation groups.
Sidebar
|
+-- Logo
+-- Main Navigation
| +-- Dashboard
| +-- Projects
| +-- Reports
|
+-- Workspace
| +-- Team
| +-- Settings
|
+-- User Profile
Mobile interfaces frequently use vertical structures because users normally consume content from top to bottom.
Mobile Screen
|
+-- Header
+-- Hero
+-- Search
+-- Categories
+-- Product List
+-- Footer
Each major section can be implemented as a nested Auto Layout frame.
Onboarding screens commonly contain an illustration, heading, description, pagination, and action button.
Onboarding
|
+-- Illustration
+-- Heading
+-- Description
+-- Pagination
+-- Continue Button
Vertical Auto Layout helps maintain consistent spacing when the content changes.
Checkout pages naturally consist of vertically stacked sections.
Checkout
|
+-- Contact Information
+-- Shipping Address
+-- Delivery Method
+-- Payment Method
+-- Order Summary
+-- Place Order
Each section can use nested Auto Layout while the overall page uses Vertical Auto Layout.
An e-commerce product details page can use Vertical Auto Layout for its content hierarchy.
Product Details
|
+-- Product Image
+-- Brand
+-- Product Name
+-- Rating
+-- Price
+-- Description
+-- Size Selection
+-- Quantity
+-- Add to Cart
+-- Delivery Information
Chat messages can be arranged vertically inside a conversation container.
Conversation
|
+-- Message 1
+-- Message 2
+-- Message 3
+-- Message 4
+-- Message 5
Each message bubble can have its own nested Auto Layout for message text, timestamp, reactions, and attachments.
Comments naturally stack vertically.
Comments
|
+-- Comment 1
| +-- User
| +-- Text
| +-- Actions
|
+-- Comment 2
| +-- User
| +-- Text
| +-- Actions
|
+-- Comment 3
Dropdown menus and side menus can use Vertical Auto Layout to stack menu items.
Menu
|
+-- Dashboard
+-- Profile
+-- Settings
+-- Help
+-- Logout
Each menu item can use Horizontal Auto Layout internally for its icon and label.
Dropdown
|
+-- Item
| +-- Icon
| +-- Label
|
+-- Item
| +-- Icon
| +-- Label
|
+-- Item
+-- Icon
+-- Label
The dropdown itself uses Vertical Auto Layout, while individual items can use Horizontal Auto Layout.
Vertical Auto Layout also supports Wrap. With Vertical Wrap enabled, objects flow from top to bottom and move into a new column when they reach the available height of the frame.
Column 1 Column 2
+--------+ +--------+
| Item 1 | | Item 4 |
| Item 2 | | Item 5 |
| Item 3 | | Item 6 |
+--------+ +--------+
Figma explains that Vertical Wrap fills the frame from top to bottom and then continues into a new column. It is useful for fixed-height multi-column layouts such as checkbox lists, product blurbs, and bios. Vertical Wrap is not masonry; objects remain in Auto Layout order. :contentReference[oaicite:12]{index=12}
Vertical Auto Layout is highly useful for responsive design because content can naturally push following elements downward when its height changes.
Desktop
+-----------------------------+
| Heading |
| Description |
| Form |
| Actions |
+-----------------------------+
Mobile
+-----------------------------+
| Heading |
| Description |
| Form |
| Actions |
+-----------------------------+
Responsive behavior depends on correctly combining flow, padding, gap, alignment, and resizing properties.
A common professional pattern is Fixed Width combined with Hug Contents for Height.
Card Width = Fixed
Card Height = Hug Contents
Content grows
|
v
Height grows automatically
Width remains controlled
This is useful for cards, notifications, articles, messages, and product information.
A content section can fill the available width while its height grows according to its content.
+------------------------------------------+
| Heading |
| Description |
| Additional content |
| Button |
+------------------------------------------+
This pattern is useful for responsive forms, cards, and page sections.
When using Vertical Wrap, the fixed height of the frame determines when items move into the next column.
Fixed Height
|
v
+--------+--------+
| Item 1 | Item 4 |
| Item 2 | Item 5 |
| Item 3 | Item 6 |
+--------+--------+
^
|
New column
Vertical Auto Layout is important when creating scalable design systems. Components can define consistent padding, gap, and content behavior and then be reused throughout multiple screens.
| Component | Recommended Flow |
|---|---|
| Form Field | Vertical |
| Button | Horizontal |
| Card | Vertical |
| Menu | Vertical |
| Navigation Item | Horizontal |
| Alert | Vertical |
| Modal | Vertical |
| Action Group | Horizontal |
Design systems often use predefined spacing values such as 4px, 8px, 12px, 16px, 24px, and 32px. Using consistent values for Auto Layout gaps and padding helps maintain visual consistency.
Spacing Tokens
4px = XS
8px = SM
12px = Small
16px = Medium
24px = Large
32px = XL
48px = XXL
When creating reusable components, define the structure so it can accommodate different content lengths.
Reusable Card
|
+-- Image
+-- Content
| +-- Title
| +-- Description
| +-- Metadata
|
+-- Action
Auto Layout makes it easier to reuse the same component with different text, images, and content.
Figma variables can be used with design systems to manage reusable values such as spacing, colors, typography, and dimensions. Auto Layout can then use consistent values throughout components and screens.
This reduces repetitive manual changes and supports scalable design systems.
Auto Layout can affect prototype behavior because an Auto Layout parent can resize according to its content. If you need scrolling overflow and clipping, an Auto Layout content frame can be placed inside a regular frame that acts as the viewport.
Figma explains that content-driven Auto Layout parents resize to fit their objects, while a regular outer frame can be used when a clipped scrolling viewport is required. :contentReference[oaicite:13]{index=13}
Viewport Frame
|
+-- Scrollable Content Frame
|
+-- Header
+-- Card 1
+-- Card 2
+-- Card 3
+-- Card 4
+-- Card 5
The inner content can use Vertical Auto Layout while the outer regular frame defines the visible viewport.
Manual positioning makes the layout difficult to maintain when content changes.
Fixed heights can cause clipping when text or content becomes longer.
Incorrect text resizing can cause overlap between layers.
Inconsistent spacing creates an unprofessional visual rhythm.
Incorrect alignment can make content appear visually unbalanced.
Complex screens become difficult to maintain when every element is controlled by one huge frame.
Too many fixed dimensions can reduce responsiveness.
Always test realistic content instead of relying only on short placeholder text.
Identify Content
|
v
Group Related Elements
|
v
Apply Auto Layout
|
v
Choose Vertical Flow
|
v
Set Padding
|
v
Set Gap
|
v
Set Alignment
|
v
Configure Width and Height
|
v
Configure Hug / Fill / Fixed
|
v
Add Nested Auto Layout
|
v
Create Component
|
v
Test Long Content
|
v
Test Responsive Behavior
|
v
Reuse Across Screens
Create a complete responsive login form using Vertical Auto Layout.
+--------------------------------+
| Welcome Back |
| Sign in to continue |
| |
| Email |
| [__________________________] |
| |
| Password |
| [__________________________] |
| |
| [ ] Remember Me |
| |
| [ Login ] |
| |
| Forgot Password? |
| |
| Create an Account |
+--------------------------------+
Create a reusable e-commerce product card using Vertical Auto Layout.
Product Card
|
+-- Image
+-- Brand
+-- Product Name
+-- Rating
+-- Price
+-- Discount
+-- Add to Cart
Recommended structure:
Create a responsive news card.
News Card
|
+-- Image
+-- Category
+-- Headline
+-- Description
+-- Author Row
+-- Read More
Use Vertical Auto Layout for the main card and Horizontal Auto Layout for the author row.
Create a profile card containing an avatar, name, role, description, statistics, and actions.
Profile Card
|
+-- Avatar
+-- Name
+-- Role
+-- Bio
+-- Statistics Row
+-- Action Buttons
The Statistics Row and Action Buttons can use Horizontal Auto Layout nested inside the vertical parent.
Create a pricing card using Vertical Auto Layout.
Pricing Plan
|
+-- Plan Name
+-- Price
+-- Description
+-- Feature List
| +-- Feature 1
| +-- Feature 2
| +-- Feature 3
| +-- Feature 4
|
+-- CTA Button
Set the feature list to Vertical Auto Layout so additional features can be added without manually moving the CTA button.
Create a reusable FAQ accordion component.
FAQ Item
|
+-- Question Row
| +-- Question
| +-- Arrow
|
+-- Answer
| +-- Paragraph
|
+-- Related Link
When the answer becomes visible, the component should grow vertically and move following content downward.
Create a dashboard using a vertical page structure.
Dashboard
|
+-- Header
+-- Filter Section
+-- Statistics Section
| +-- Card
| +-- Card
| +-- Card
|
+-- Analytics Section
+-- Recent Activity
+-- Table
+-- Footer
Use Horizontal Auto Layout for the statistics row and Vertical Auto Layout for the overall page structure.
Create a mobile shopping screen using Vertical Auto Layout.
Shopping Screen
|
+-- Header
+-- Search Bar
+-- Category Section
+-- Banner
+-- Product Section
| +-- Product Card
| +-- Product Card
| +-- Product Card
|
+-- Recommendation Section
+-- Footer
Create a notification center with a vertically stacked notification list.
Notification Center
|
+-- Header
+-- Notification 1
+-- Notification 2
+-- Notification 3
+-- Notification 4
+-- Notification 5
+-- Mark All as Read
When a Vertical Auto Layout behaves unexpectedly, inspect its properties systematically.
Problem
|
+-- Check Flow
|
+-- Check Padding
|
+-- Check Gap
|
+-- Check Alignment
|
+-- Check Width
|
+-- Check Height
|
+-- Check Hug / Fill / Fixed
|
+-- Check Min / Max
|
+-- Check Text Resizing
|
+-- Check Nested Frames
|
+-- Check Wrap
|
+-- Test Long Content
| Property | Purpose |
|---|---|
| Vertical Flow | Arranges children from top to bottom |
| Padding | Controls space around children |
| Gap | Controls space between children |
| Auto Spacing | Distributes available space dynamically |
| Alignment | Controls horizontal positioning of children |
| Hug Contents | Sizes the frame according to its content |
| Fill Container | Allows a child to occupy available space |
| Fixed | Maintains a fixed dimension |
| Wrap | Moves children into additional columns when required |
| Min Height | Prevents excessive shrinking |
| Max Height | Prevents excessive expansion |
| Nested Auto Layout | Creates complex responsive structures |
| Action | Mac | Windows |
|---|---|---|
| Add Auto Layout | Shift + A | Shift + A |
| Suggest Auto Layout | Control + Shift + A | Control + Alt + Shift + A |
| Remove Auto Layout | Option + Shift + A | Alt + Shift + A |
| Set Alignment | Arrow Keys | Arrow Keys |
| Set Edge Alignment | W / A / S / D | W / A / S / D |
| Toggle Auto Gap | X | X |
| Set Hug Contents | Double-click edge | Double-click edge |
| Set Fill Container | Option + Double-click edge | Alt + Double-click edge |
Figma's current shortcut documentation confirms Shift + A for adding Auto Layout, Control + Shift + A on Mac and Control + Alt + Shift + A on Windows for Suggest Auto Layout, and Option/Alt + Shift + A for removing Auto Layout. :contentReference[oaicite:14]{index=14}
Vertical Auto Layout is a layout flow that automatically arranges child objects from top to bottom along the y-axis.
Shift + A is used to add Auto Layout.
It automatically manages vertical positioning, spacing, and resizing when content changes.
Vertical Auto Layout flows from top to bottom along the y-axis, while Horizontal Auto Layout flows from left to right along the x-axis.
Padding is the space between the parent Auto Layout frame boundary and its child objects.
Gap controls the distance or distribution between child objects.
Hug Contents makes an Auto Layout frame size itself according to its child objects and spacing.
Fill Container allows a child object to occupy available space inside its Auto Layout parent.
Fixed sizing maintains a specified width or height regardless of content changes.
Vertical Wrap allows objects to flow from top to bottom and continue in a new column when the available height is reached.
Nested Auto Layout means placing one Auto Layout frame inside another to create complex responsive layouts.
Forms naturally flow from top to bottom, so fields can be stacked and automatically repositioned when content changes.
It allows the card height to grow or shrink according to its content.
Yes. Components are frames, so Auto Layout can be applied to them.
Longer text can require additional height and may cause overlap or clipping if the text layer is configured incorrectly.
Question: You are designing a profile card with an avatar, name, description, statistics, and button. The description can have different lengths. How would you create it?
Answer: Create a Vertical Auto Layout parent and place the avatar, name, description, statistics section, and action section inside it. Use Hug Contents for the card height, consistent gaps between sections, and nested Horizontal Auto Layout for statistics and actions. Configure the description with an appropriate text resizing behavior so the card can grow naturally.
Vertical Auto Layout
|
+-- Flow = Vertical
| |
| +-- Top to Bottom
|
+-- Padding
|
+-- Gap
|
+-- Alignment
|
+-- Resizing
| |
| +-- Hug Contents
| +-- Fill Container
| +-- Fixed
|
+-- Wrap
|
+-- Min / Max
|
+-- Nested Auto Layout
|
+-- Components
|
+-- Responsive Design
Vertical Auto Layout is one of the most important Figma skills for creating structured, responsive, and maintainable user interfaces. It automatically arranges elements from top to bottom and manages their spacing, padding, alignment, and resizing behavior. Instead of manually repositioning content whenever a heading becomes longer, a field is added, or an item is removed, designers can allow the layout to respond automatically.
Vertical Auto Layout is especially useful for forms, cards, articles, lists, dashboards, news feeds, timelines, notifications, menus, profile pages, pricing sections, mobile screens, modals, FAQ sections, and reusable components. When combined with Horizontal Auto Layout, nested frames, Hug Contents, Fill Container, Fixed sizing, Wrap, components, variants, and design-system spacing, it becomes a powerful foundation for professional UI design.
For structured Figma learning and practical UI/UX projects, explore JustAcademy Figma Training. You can also Register for Figma Course Demo to get started with professional Figma training.
