0
0
FigmaHow-ToBeginner · 3 min read

How to Align Text in Figma: Simple Steps for Beginners

To align text in Figma, select the text layer and use the Text alignment buttons in the right sidebar to choose left, center, right, or justified alignment. You can also use keyboard shortcuts or the top toolbar for quick access.
📐

Syntax

In Figma, text alignment is controlled by selecting a text layer and choosing one of the alignment options:

  • Left Align: Aligns text to the left edge.
  • Center Align: Centers text horizontally.
  • Right Align: Aligns text to the right edge.
  • Justify: Stretches text to align both left and right edges.

These options are found in the right sidebar under the Text section or in the top toolbar when a text layer is selected.

figma
Select text layer -> Right sidebar -> Text alignment buttons (Left, Center, Right, Justify)
💻

Example

This example shows how to align a text layer to the center in Figma:

figma
1. Select the text layer by clicking on it.
2. In the right sidebar, find the <code>Text</code> section.
3. Click the <code>Center Align</code> button (icon with centered lines).
4. The text will move to be horizontally centered within its text box.
Output
Text is horizontally centered inside the text box.
⚠️

Common Pitfalls

Common mistakes when aligning text in Figma include:

  • Not selecting the text layer first, so alignment buttons are disabled.
  • Trying to align text without adjusting the text box size, which can cause unexpected wrapping.
  • Confusing text alignment with object alignment; text alignment affects text inside the box, not the box position.

Always ensure the text box size fits your content and select the text layer before changing alignment.

figma
Wrong way:
- Select frame instead of text layer and try to align text.

Right way:
- Select text layer -> Use alignment buttons in right sidebar.
📊

Quick Reference

Alignment TypeEffectIcon Description
Left AlignText aligns to the left edgeLines aligned to left
Center AlignText centers horizontallyLines centered
Right AlignText aligns to the right edgeLines aligned to right
JustifyText stretches to both edgesLines stretched

Key Takeaways

Always select the text layer before changing alignment.
Use the right sidebar's text alignment buttons for quick changes.
Adjust the text box size to control how text wraps and aligns.
Text alignment affects text inside the box, not the box's position.
Center, left, right, and justify are the main alignment options in Figma.