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.