Text alignment and vertical alignment in Figma - Cell-by-Cell Formula Trace

Concept Flow

 +---------+ +---------+
 |  Name   | |  Role   |
 +---------+ +---------+
 |  Alice  | | Manager |
 +---------+ +---------+
 |   Bob   | |Developer|
 +---------+ +---------+
 |  Carol  | | Designer|
 +---------+ +---------+

This shows a table with text in cells aligned horizontally center and vertically middle for balanced appearance.

Formula

Select cell text -> Apply horizontal center alignment -> Apply vertical middle alignment -> Final centered text

Step-by-step process to align text in cells both horizontally and vertically.

Step-by-Step Trace

Step	Action	Result	Explanation
1	Select cell content	Text string in cell	Start with the text inside each cell.
2	Apply horizontal alignment: center	Text centered horizontally	Text moves to center between left and right edges.
3	Apply vertical alignment: middle	Text centered vertically	Text moves to middle between top and bottom edges.
4	Final text position	Text centered both ways	Text is visually balanced and easy to read.

Text is now perfectly centered horizontally and vertically in each cell.

Variable Tracker

Variable	Value	Description
Cell Text	e.g. 'Alice'	Original text inside the cell
Horizontal Alignment	Center	Text aligned horizontally center
Vertical Alignment	Middle	Text aligned vertically middle
Final Position	Centered	Text position after alignment

Key Moments

What does horizontal center alignment do?

What does vertical middle alignment do?

Why center text horizontally and vertically?

Sheet Trace Quiz - 3 Questions

What does horizontal center alignment do to the text in a cell?

A Moves text to the center between left and right edges

B Moves text to the top of the cell

C Moves text to the bottom of the cell

D Moves text to the left edge

Key Result

Centering text horizontally and vertically in table cells improves readability and visual balance.

Transcript

We start by selecting the text inside each cell. Then we apply horizontal center alignment, which moves the text to the center between the left and right edges. Next, we apply vertical middle alignment, moving the text to the middle between the top and bottom edges. The final result is text perfectly centered both horizontally and vertically, making the table visually balanced and easy to read.

Practice

1. Which of the following best describes text alignment in Figma?

easy

A. It controls the horizontal placement of text within a text box.

B. It controls the vertical placement of text within a text box.

C. It changes the font size of the text.

D. It changes the color of the text.

Solution

1. Step 1: Understand text alignment meaning

   Text alignment refers to how text is positioned horizontally inside its container, such as left, center, or right.

2. Step 2: Differentiate from vertical alignment

   Vertical alignment controls vertical placement, not horizontal, so it is not text alignment.

3. Final Answer:

   It controls the horizontal placement of text within a text box. -> Option A

4. Quick Check:

   Text alignment = horizontal placement [OK]

Hint: Text alignment = horizontal, vertical alignment = vertical [OK]

Common Mistakes:

• Confusing vertical alignment with text alignment
• Thinking text alignment changes font size
• Mixing color changes with alignment

2. Which Figma property would you use to center text vertically inside a frame?

easy

A. Text Align: Center

B. Vertical Align: Bottom

C. Text Align: Left

D. Vertical Align: Middle

Solution

1. Step 1: Identify vertical alignment property

   Vertical alignment controls text placement from top to bottom inside a container.

2. Step 2: Choose the middle vertical alignment

   To center text vertically, use Vertical Align set to Middle.

3. Final Answer:

   Vertical Align: Middle -> Option D

4. Quick Check:

   Vertical center = Vertical Align: Middle [OK]

Hint: Vertical center uses Vertical Align: Middle [OK]

Common Mistakes:

• Using Text Align instead of Vertical Align
• Choosing Left or Bottom for vertical centering
• Confusing horizontal and vertical alignment

3. Given a text box with width 200px and height 100px, if you set Text Align: Right and Vertical Align: Bottom, where will the text appear?

medium

A. Text will appear centered both horizontally and vertically.

B. Text will appear at the top-left corner.

C. Text will appear at the bottom-right corner.

D. Text will appear at the bottom-left corner.

Solution

1. Step 1: Analyze horizontal alignment

   Text Align: Right places text at the right edge horizontally.

2. Step 2: Analyze vertical alignment

   Vertical Align: Bottom places text at the bottom edge vertically.

3. Final Answer:

   Text will appear at the bottom-right corner. -> Option C

4. Quick Check:

   Right + Bottom = bottom-right corner [OK]

Hint: Right + Bottom = bottom-right corner placement [OK]

Common Mistakes:

• Mixing up left and right alignment
• Confusing top and bottom vertical alignment
• Assuming center alignment by default

4. You set Text Align: Center but the text still appears left aligned. What is the most likely cause?

medium

A. The text box width is too small to show center alignment.

B. The text box is set to auto width, ignoring alignment.

C. The font size is too large.

D. Vertical alignment is set to Top.

Solution

1. Step 1: Understand auto width effect

   If the text box width is auto, it shrinks to fit text, so center alignment has no effect.

2. Step 2: Check other options

   Vertical alignment or font size do not affect horizontal centering. Small width limits space but does not force left alignment.

3. Final Answer:

   The text box is set to auto width, ignoring alignment. -> Option B

4. Quick Check:

   Auto width disables horizontal alignment effects [OK]

Hint: Auto width text boxes ignore horizontal alignment [OK]

Common Mistakes:

• Blaming vertical alignment for horizontal issues
• Assuming font size affects alignment
• Ignoring text box sizing settings

5. You want to create a dashboard label that is always centered horizontally and vertically inside a 300x100 px frame, regardless of text length. Which combination of settings is best?

hard

A. Set text box width and height to fixed 300x100, Text Align: Center, Vertical Align: Middle

B. Set text box width to auto, height fixed 100, Text Align: Left, Vertical Align: Top

C. Set text box width fixed 300, height auto, Text Align: Right, Vertical Align: Bottom

D. Set text box width and height to auto, Text Align: Center, Vertical Align: Middle

Solution

1. Step 1: Fix text box size to frame size

   To center text regardless of length, the text box must match the frame size (300x100 fixed).

2. Step 2: Apply center alignments

   Set Text Align to Center for horizontal centering and Vertical Align to Middle for vertical centering.

3. Final Answer:

   Set text box width and height to fixed 300x100, Text Align: Center, Vertical Align: Middle -> Option A

4. Quick Check:

   Fixed size + center align = perfect centering [OK]

Hint: Fixed size box + center alignments = centered text [OK]

Common Mistakes:

• Using auto width or height causing misalignment
• Choosing left or right text align for centering
• Ignoring vertical alignment for vertical centering