Direction (horizontal, vertical) in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ visualization

intermediate

Identify the correct horizontal layout for a dashboard

You want to arrange three KPI cards side by side in a single row in Figma. Which direction setting should you use?

A Set the frame's layout direction to vertical with equal spacing between items.

B Place the cards manually without using any layout direction.

C Use a grid layout with one row and three columns.

D Set the frame's layout direction to horizontal with equal spacing between items.

💡 Hint

Think about how items are arranged side by side in a row.

Horizontal layout arranges items side by side in a row. Setting the frame's layout direction to horizontal aligns the KPI cards in one row with equal spacing.

🧠 Conceptual

intermediate

Understanding vertical direction in dashboard design

Why is vertical direction often used for listing detailed data in BI dashboards?

A Because vertical direction allows stacking items top to bottom, making it easier to scan lists.

B Because vertical direction arranges items side by side, saving horizontal space.

C Because vertical direction hides less important data by default.

D Because vertical direction automatically groups data by categories.

💡 Hint

Think about how you read lists in real life, like a grocery list or emails.

Vertical direction stacks items from top to bottom, which matches how people naturally scan lists, making detailed data easier to read.

❓ dax_lod_result

advanced

Calculate total sales by horizontal categories

Given a sales table with columns: ProductCategory, SalesAmount, and Date, you want to create a measure that sums SalesAmount for each ProductCategory displayed horizontally in a matrix visual. Which DAX measure correctly calculates total sales by ProductCategory?

Figma

Total Sales by Category = CALCULATE(SUM(Sales[SalesAmount]), ALLEXCEPT(Sales, Sales[ProductCategory]))

A Total Sales by Category = SUMX(VALUES(Sales[ProductCategory]), Sales[SalesAmount])

B Total Sales by Category = CALCULATE(SUM(Sales[SalesAmount]), ALLEXCEPT(Sales, Sales[ProductCategory]))

C Total Sales by Category = CALCULATE(SUM(Sales[SalesAmount]), ALL(Sales[ProductCategory]))

D Total Sales by Category = SUM(Sales[SalesAmount])

💡 Hint

Think about keeping the filter on ProductCategory while summing sales.

ALLEXCEPT keeps the filter on ProductCategory, so the sum is calculated per category, suitable for horizontal categories in a matrix.

❓ data_modeling

advanced

Modeling data for vertical drill-down in reports

You want to enable vertical drill-down in a BI report from Year to Quarter to Month. Which data modeling approach supports this best?

A Create a date dimension table with columns Year, Quarter, and Month, and define a hierarchy in the model.

B Store Year, Quarter, and Month as separate unrelated tables.

C Use a single flat table with all dates as text strings without hierarchy.

D Create multiple fact tables for each time period without a date dimension.

💡 Hint

Think about how drill-down works in BI tools using hierarchies.

A date dimension with a defined hierarchy allows vertical drill-down from Year to Quarter to Month smoothly in reports.

🔧 Formula Fix

expert

Debugging incorrect horizontal alignment in Figma dashboard

You set a frame's layout direction to horizontal in Figma to align three charts side by side. However, the charts stack vertically instead. What is the most likely cause?

A The frame has auto layout disabled, so direction settings are ignored.

B The charts have fixed widths that exceed the frame's width, forcing vertical stacking.

C The frame's layout direction is actually set to vertical, not horizontal.

D The charts are grouped inside another frame with vertical layout.

💡 Hint

Check the frame's layout direction setting carefully.

If the frame's layout direction is vertical, items stack top to bottom. Setting it to horizontal aligns items side by side.

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