Text alignment and vertical alignment in Figma - Step-by-Step Guide

Introduction

Text alignment and vertical alignment help you position text inside shapes or frames. This makes your dashboard or report look neat and easy to read by controlling where the text sits horizontally and vertically.

When you want the title of a chart to be centered above it for better focus

When you need labels inside bars or boxes to align left for consistency

When you want to vertically center text inside buttons or cards for balanced design

When you want to align text to the top of a frame to match other elements

When you want to justify paragraph text for a clean block look in reports

Steps

Step 1: Select the text layer

- Layers panel or canvas

The text layer is highlighted and ready for editing

Step 2: Open the Text section

- Right sidebar properties panel

Text formatting options appear, including alignment controls

Step 3: Click the horizontal alignment button

- Text section in the right sidebar (options: Left, Center, Right, Justify)

Text inside the selected layer aligns horizontally as chosen

Step 4: Click the vertical alignment button

- Text section in the right sidebar (options: Top, Middle, Bottom)

Text inside the frame or bounding box aligns vertically as chosen

Step 5: Adjust the text box size if needed

- Canvas by dragging text box edges

Text reflows and alignment updates visually inside the new box size

Before vs After

Before

Text inside a button is aligned left and sits at the top, making it look unbalanced

After

Text inside the button is centered horizontally and vertically, making the button look balanced and neat

Settings Reference

Horizontal text alignment

📍 Right sidebar > Text section

Controls how text lines up horizontally inside the text box

Default: Left

Vertical text alignment

📍 Right sidebar > Text section

Controls how text lines up vertically inside the text box or frame

Default: Top

Common Mistakes

Trying to vertically align text without a fixed height text box

Vertical alignment only works if the text box has a height larger than the text content

Resize the text box height first, then apply vertical alignment

Using justify alignment on short lines

Justify alignment can create uneven spacing on short lines, making text look odd

Use left, center, or right alignment for short text lines

Summary

Text alignment controls horizontal and vertical positioning of text inside boxes.

Use the right sidebar Text section to set alignment options in Figma.

Vertical alignment needs a text box taller than the text to work properly.