Text alignment and vertical alignment in Figma - Deep Dive

Overview - Text alignment and vertical alignment

What is it?

Text alignment and vertical alignment are ways to position text inside a box or container. Text alignment controls how text lines up horizontally—left, center, or right. Vertical alignment controls how text sits vertically—top, middle, or bottom. These settings help make text easy to read and visually balanced in reports or dashboards.

Why it matters

Without proper text alignment, reports and dashboards can look messy and confuse readers. Misaligned text makes it harder to compare numbers or understand labels quickly. Good alignment improves clarity, professionalism, and user experience, helping decision-makers trust and act on data faster.

Where it fits

Before learning text alignment, you should understand basic text boxes and layout in Figma. After mastering alignment, you can explore advanced typography, responsive design, and accessibility best practices for BI dashboards.

Mental Model

Core Idea

Text alignment and vertical alignment position text inside a container to make information clear and visually balanced.

Think of it like...

It's like arranging books on a shelf: you can line them up flush left, center them evenly, or push them to the right side. Vertically, you can place them on the top shelf, middle shelf, or bottom shelf to fit the space nicely.

┌─────────────────────────┐
│ Horizontal Alignment     │
│ ┌───────┐ ┌───────┐ ┌───────┐ │
│ │ Left  │ │Center │ │ Right │ │
│ └───────┘ └───────┘ └───────┘ │
│ Vertical Alignment       │
│ ┌───────┐               │
│ │ Top   │               │
│ │ Middle│               │
│ │ Bottom│               │
│ └───────┘               │
└─────────────────────────┘

Build-Up - 6 Steps

1

Foundation

Understanding horizontal text alignment

Concept: Learn how text aligns horizontally inside a box: left, center, or right.

In Figma, horizontal text alignment controls where the text starts inside its container. Left alignment means text starts at the left edge. Center alignment means text is centered horizontally. Right alignment means text ends at the right edge. You can change this in the Text properties panel.

Result

Text shifts horizontally inside its box, making it easier to read or match design style.

Knowing horizontal alignment helps you control how text lines up with other elements, improving readability and layout balance.

2

Foundation

Understanding vertical text alignment

Concept: Learn how text aligns vertically inside a box: top, middle, or bottom.

Vertical alignment controls where text sits inside its container from top to bottom. Top alignment places text at the top edge, middle centers it vertically, and bottom places it at the bottom edge. This is important when text boxes are taller than the text itself.

Result

Text moves up or down inside its box, helping align with other objects or fill space evenly.

Vertical alignment ensures text looks balanced vertically, especially in tables or cards with fixed heights.

3

Intermediate

Combining horizontal and vertical alignment

🤔Before reading on: do you think horizontal and vertical alignment settings affect each other or work independently? Commit to your answer.

Concept: Learn how horizontal and vertical alignment work together to position text precisely inside a container.

In Figma, you can set horizontal and vertical alignment independently. For example, text can be left-aligned horizontally and centered vertically. This combination lets you place text exactly where you want inside any shape or frame.

Result

Text appears exactly where intended, improving design precision and user focus.

Understanding that these alignments work independently lets you mix and match for perfect text placement.

4

Intermediate

Impact of container size on alignment

🤔Before reading on: does changing the container size affect text alignment behavior? Commit to your answer.

Concept: Explore how the size of the text box or container changes how alignment looks and behaves.

If the container is just big enough for the text, alignment changes may not be visible. But if the container is larger, alignment controls where text sits inside that space. For example, a tall box with top vertical alignment places text at the top, leaving empty space below.

Result

Text placement changes visibly as container size changes, affecting layout and spacing.

Knowing container size effects helps you design flexible layouts that adapt to different content lengths.

5

Advanced

Using alignment for multi-line and wrapped text

🤔Before reading on: do you think vertical alignment affects multi-line wrapped text the same way as single-line text? Commit to your answer.

Concept: Understand how alignment behaves when text wraps to multiple lines inside a container.

For multi-line text, horizontal alignment applies to each line individually. Vertical alignment controls the block of lines as a whole inside the container. For example, center vertical alignment centers the entire paragraph vertically, not each line separately.

Result

Text blocks appear balanced and aligned correctly, improving readability in paragraphs or labels.

Recognizing how alignment applies differently to multi-line text prevents layout surprises and improves text presentation.

6

Expert

Alignment challenges in responsive BI dashboards

🤔Before reading on: do you think fixed alignment settings always work well on different screen sizes? Commit to your answer.

Concept: Learn why text alignment needs special handling in dashboards that resize or adapt to different devices.

In responsive BI dashboards, containers and text sizes change dynamically. Fixed alignment can cause text to look off or overlap. Experts use flexible containers, auto-sizing text, and alignment rules that adapt to screen size. They also test alignment on multiple devices to ensure clarity.

Result

Dashboards remain readable and professional across devices, improving user trust and decision-making.

Understanding alignment in responsive design is key to building BI dashboards that work well everywhere, avoiding common UI failures.

Under the Hood

Figma stores alignment settings as properties on text layers. When rendering, the engine calculates the text's bounding box inside its container. Horizontal alignment shifts the text block left, center, or right within the container width. Vertical alignment shifts the text block up, center, or down within the container height. For multi-line text, the engine treats the text block as a whole for vertical alignment and each line for horizontal alignment.

Why designed this way?

This separation allows maximum flexibility. Designers can control text placement precisely without changing the container size. Early design tools had limited alignment options, but modern tools like Figma separate horizontal and vertical alignment to support complex layouts and responsive designs.

┌─────────────────────────────┐
│       Text Container        │
│ ┌───────────────────────┐ │
│ │  Text Bounding Box     │ │
│ │ ┌───────────────────┐ │ │
│ │ │ Text Lines        │ │ │
│ │ └───────────────────┘ │ │
│ └───────────────────────┘ │
│ Horizontal alignment shifts →
│ Vertical alignment shifts ↓
└─────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does vertical alignment move each line of text individually or the whole block? Commit to your answer.

Common Belief: Vertical alignment moves each line of text up or down separately.

Reality: Vertical alignment moves the entire block of text as one unit inside the container.

Why it matters: Misunderstanding this causes unexpected text positioning, especially with paragraphs, leading to poor layout and readability.

Quick: If a text box is exactly the size of the text, will changing alignment visibly move the text? Commit to your answer.

Common Belief: Changing alignment always moves the text visibly inside its box.

Reality: If the container fits the text exactly, alignment changes have no visible effect because there is no extra space to shift into.

Why it matters: This misconception leads to confusion when designers think alignment settings are broken or ignored.

Quick: Does horizontal alignment affect vertical spacing between lines? Commit to your answer.

Common Belief: Horizontal alignment changes vertical spacing between lines.

Reality: Horizontal alignment only affects left-right positioning; vertical spacing is controlled separately by line height and vertical alignment.

Why it matters: Confusing these causes layout errors and inconsistent text appearance.

Quick: Can fixed alignment settings always guarantee perfect text layout on all screen sizes? Commit to your answer.

Common Belief: Yes, fixed alignment settings work perfectly on any device or screen size.

Reality: Fixed alignment can break layouts on different screen sizes; responsive design requires flexible alignment and container sizing.

Why it matters: Ignoring this leads to unreadable dashboards on mobile or small screens, hurting user experience.

Expert Zone

1

Vertical alignment behaves differently when text boxes have auto height versus fixed height, affecting how text flows in dynamic layouts.

2

In Figma, text alignment settings can interact with auto-layout frames, which can override or affect alignment behavior subtly.

3

When using rotated or transformed text layers, alignment calculations adjust differently, which can cause unexpected text positioning.

When NOT to use

Avoid relying solely on fixed text alignment in responsive BI dashboards. Instead, use auto-layout containers, flexible text sizing, and conditional visibility to handle different screen sizes and content lengths.

Production Patterns

Professionals use consistent alignment styles across dashboards for uniformity. They combine alignment with grid layouts and spacing tokens. They also test alignment on real devices and use Figma components with preset alignment to speed up design and maintain consistency.

Connections

Grid Layouts

Text alignment works hand-in-hand with grid layouts to organize content cleanly.

Understanding alignment helps you place text precisely within grid cells, improving overall layout harmony.

Typography

Alignment is a core part of typography, affecting how readable and attractive text appears.

Knowing alignment deepens your grasp of typography principles, enhancing your ability to design clear BI reports.

Human Visual Perception

Alignment leverages how humans naturally scan and group visual information.

Recognizing this connection helps you design dashboards that guide users’ eyes efficiently to key data.

Common Pitfalls

#1 Text appears off-center because vertical alignment is ignored in tall containers.

Wrong approach:

Text box with vertical alignment set to top but container is tall, expecting text to be centered.

// No vertical alignment change applied

Correct approach:

Set vertical alignment to middle to center text vertically inside the tall container.

// Vertical alignment: middle

Root cause:

Misunderstanding that vertical alignment must be explicitly set to control vertical text position.

#2 Text alignment changes have no visible effect because container size matches text size exactly.

Wrong approach:

Text box sized exactly to text with left alignment, then changed to center alignment but no visible change.

// Container width = text width

Correct approach:

Increase container width to see alignment effect.

// Container width > text width

Root cause:

Not realizing alignment shifts text only within extra container space.

#3 Using fixed alignment settings in a responsive dashboard causes text overlap on small screens.

Wrong approach:

Fixed left and top alignment with fixed container sizes on all screen sizes.

// Fixed alignment and container size

Correct approach:

Use auto-layout and flexible alignment settings that adapt to screen size.

// Responsive alignment and container sizing

Root cause:

Ignoring responsive design principles and container flexibility.

Key Takeaways

Text alignment controls horizontal and vertical positioning of text inside containers, improving readability and design balance.

Horizontal and vertical alignment work independently and can be combined for precise text placement.

Container size affects how alignment behaves; alignment shifts text only within extra space.

Multi-line text alignment treats the block as a whole vertically and each line horizontally.

Responsive BI dashboards require flexible alignment strategies to maintain clarity across devices.

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