Direction (horizontal, vertical) in Figma - Step-by-Step Guide

Introduction

Direction controls how items are arranged in a row or column. It helps organize dashboard elements either side-by-side or stacked up. This makes your report easier to read and understand.

When you want to place charts side-by-side to compare data horizontally.

When you need to stack filters or slicers vertically for easy scanning.

When arranging KPI cards in a row to save vertical space.

When creating a vertical list of categories or legends.

When designing responsive layouts that switch direction based on screen size.

Steps

Step 1: Select the frame or group containing your dashboard elements

- Layers panel or canvas

The frame or group is highlighted and ready for editing

Step 2: Click the 'Auto layout' button in the right sidebar

- Design panel > Auto layout section

The selected frame becomes an auto layout container with default direction

Step 3: Find the 'Direction' option in the Auto layout settings

- Design panel > Auto layout section

Direction controls appear showing horizontal and vertical icons

Step 4: Click the horizontal icon to arrange items side-by-side

- Direction option in Auto layout settings

Items inside the frame align in a row from left to right

Step 5: Click the vertical icon to stack items top to bottom

- Direction option in Auto layout settings

Items inside the frame align in a column from top to bottom

Step 6: Adjust spacing between items using the 'Spacing between items' input

- Auto layout section in Design panel

Space between each item changes visually on the canvas

💡 Use consistent spacing to keep your dashboard neat and balanced

Before vs After

Before

A frame with three charts stacked vertically with default spacing of 10 pixels

After

The same frame with charts arranged horizontally side-by-side with 20 pixels spacing

Settings Reference

Direction

📍 Design panel > Auto layout section

Controls whether items are arranged side-by-side or stacked

Default: Horizontal

Spacing between items

📍 Design panel > Auto layout section

Sets the space between each item in the layout

Default: 10

Common Mistakes

Forgetting to select the frame before applying auto layout direction

Direction controls only appear for frames or groups with auto layout enabled

Always select the container frame first, then enable auto layout and set direction

Setting direction but not adjusting spacing, causing items to appear too close

Default spacing may not suit your design, making elements look cluttered

Adjust spacing between items to create clear separation and improve readability

Summary

Direction controls how items are arranged horizontally or vertically in a frame.

Use horizontal direction to place items side-by-side and vertical to stack them.

Remember to select the frame and enable auto layout before changing direction.

Practice

1.

In Figma, what does setting the direction to horizontal do to the layout of items?

easy

A. Arranges items side by side from left to right

B. Stacks items from top to bottom

C. Overlaps items on top of each other

D. Randomly places items on the canvas

Solution

1. Step 1: Understand horizontal direction meaning

   Horizontal direction means arranging items side by side, moving left to right.

2. Step 2: Apply to Figma layout

   Setting direction to horizontal in Figma aligns items next to each other horizontally.

3. Final Answer:

   Arranges items side by side from left to right -> Option A

4. Quick Check:

   Horizontal = side by side [OK]

Hint: Horizontal means left to right arrangement [OK]

Common Mistakes:

• Confusing horizontal with vertical stacking
• Thinking horizontal overlaps items
• Assuming random placement

2.

Which of the following is the correct way to set a vertical direction for a frame in Figma?

frame.layoutMode = ?

easy

A. "horizontal"

B. "stack"

C. "vertical"

D. "inline"

Solution

1. Step 1: Recall Figma layoutMode property

   Figma uses layoutMode to set direction, accepting "horizontal" or "vertical".

2. Step 2: Choose vertical direction value

   To stack items top to bottom, set layoutMode = "vertical".

3. Final Answer:

   "vertical" -> Option C

4. Quick Check:

   Vertical direction = "vertical" string [OK]

Hint: Use exact string "vertical" for vertical layoutMode [OK]

Common Mistakes:

• Using "horizontal" instead of "vertical"
• Using invalid strings like "stack" or "inline"
• Omitting quotes around the string

3.

Given this Figma code snippet, what will be the visual arrangement of the child items?

frame.layoutMode = "horizontal";
frame.children = [item1, item2, item3];

medium

A. Items arranged side by side horizontally

B. Items arranged randomly inside the frame

C. Items overlapped in the same position

D. Items stacked vertically, one below another

Solution

1. Step 1: Identify layoutMode setting

   The code sets layoutMode to "horizontal", meaning items align left to right.

2. Step 2: Understand children arrangement

   Children in a horizontal layout appear side by side in the order listed.

3. Final Answer:

   Items arranged side by side horizontally -> Option A

4. Quick Check:

   layoutMode "horizontal" = side by side [OK]

Hint: layoutMode "horizontal" means side by side [OK]

Common Mistakes:

• Assuming vertical stacking despite horizontal setting
• Thinking items overlap
• Ignoring the order of children

4.

What is wrong with this Figma code if the intention is to stack items vertically?

frame.layoutMode = "horizontal";
frame.children = [itemA, itemB];

medium

A. The children must be wrapped in a group to stack vertically

B. Children array must be empty to stack vertically

C. The frame must have a fixed width to stack vertically

D. The layoutMode should be set to "vertical" instead of "horizontal"

Solution

1. Step 1: Analyze layoutMode setting

   The code sets layoutMode to "horizontal", which arranges items side by side.

2. Step 2: Correct direction for vertical stacking

   To stack items vertically, layoutMode must be "vertical".

3. Final Answer:

   The layoutMode should be set to "vertical" instead of "horizontal" -> Option D

4. Quick Check:

   Vertical stacking requires layoutMode = "vertical" [OK]

Hint: Use "vertical" layoutMode to stack items top to bottom [OK]

Common Mistakes:

• Leaving layoutMode as "horizontal"
• Thinking children array affects stacking
• Assuming grouping is required

5.

You want to create a dashboard in Figma where KPI cards are arranged in two rows, each row showing cards side by side. Which direction settings should you use?

hard

A. Set both main frame and row frames to horizontal

B. Set the main frame to vertical and each row frame to horizontal

C. Set the main frame to horizontal and each row frame to vertical

D. Set both main frame and row frames to vertical

Solution

1. Step 1: Understand dashboard layout requirement

   The dashboard has two rows stacked vertically, so the main frame stacks rows top to bottom.

2. Step 2: Arrange cards side by side in each row

   Each row should arrange cards horizontally side by side.

3. Step 3: Apply direction settings

   Set main frame layoutMode to "vertical" to stack rows, and each row frame layoutMode to "horizontal" for side-by-side cards.

4. Final Answer:

   Set the main frame to vertical and each row frame to horizontal -> Option B

5. Quick Check:

   Main vertical + rows horizontal = 2 rows with side-by-side cards [OK]

Hint: Main vertical stacks rows; rows horizontal arrange cards side by side [OK]

Common Mistakes:

• Setting main frame horizontal causing one row only
• Setting rows vertical stacking cards instead of side by side
• Using same direction for both frames