Alignment within Auto Layout in Figma - Cell-by-Cell Formula Trace

Sample Data

This data represents three elements inside an Auto Layout frame in Figma with their widths and alignment settings.

Cell	Value
A1	Button
B1	Text
C1	Icon
A2	Width: 100
B2	Width: 200
C2	Width: 50
A3	Alignment: Left
B3	Alignment: Center
C3	Alignment: Right

Formula Trace

Auto Layout alignment calculation for elements with widths 100, 200, 50 and alignments Left, Center, Right

Step 1: Calculate total width of elements: 100 + 200 + 50

Step 2: Set container width (example) = 400

Step 3: Calculate leftover space: 400 - 350

Step 4: Align Button (Left): position X = 0

Step 5: Align Text (Center): position X = (container width - element width) / 2 = (400 - 200) / 2

Step 6: Align Icon (Right): position X = container width - element width = 400 - 50

Cell Reference Map

  A       B       C   
+-------+-------+-------+
|Button | Text  | Icon  |
| Width | Width | Width |
|  100  |  200  |  50   |
| Align | Align | Align |
| Left  |Center | Right |
+-------+-------+-------+

Cells A2, B2, C2 provide widths; A3, B3, C3 provide alignment settings for each element.

Result

Container width: 400
Positions:
Button (Left)  : X=0
Text (Center)  : X=100
Icon (Right)   : X=350

Final horizontal positions of elements inside the Auto Layout container based on their alignment settings.

Sheet Trace Quiz - 3 Questions

What is the total width of all elements combined?

A 400

B 350

C 300

D 450

Key Result

Auto Layout alignment positions elements based on container width minus element width and alignment type (Left=0, Center=centered, Right=container width - element width).