How to create text hierarchy figma

FigmaHow-ToBeginner · 4 min read

How to Create Text Hierarchy in Figma: Simple Steps

To create text hierarchy in Figma, use different font sizes, weights, and colors to show importance. Arrange text with proper spacing and alignment so readers can easily scan and understand your content.

📐

Syntax

In Figma, text hierarchy is created by adjusting these properties:

Font Size: Larger sizes for titles, smaller for body text.
Font Weight: Bold for emphasis, regular for normal text.
Color: Darker colors for important text, lighter for less important.
Spacing: Use line height and letter spacing to improve readability.
Alignment: Left, center, or right to organize text visually.

css

/* Example CSS-like syntax to represent text hierarchy in Figma */
Title {
  font-size: 32px;
  font-weight: 700;
  color: #111111;
  line-height: 40px;
}
Subtitle {
  font-size: 24px;
  font-weight: 600;
  color: #333333;
  line-height: 32px;
}
Body {
  font-size: 16px;
  font-weight: 400;
  color: #555555;
  line-height: 24px;
}

💻

Example

This example shows how to create a simple text hierarchy in Figma by setting different font sizes, weights, and colors for title, subtitle, and body text.

text

1. Select the Text tool (T) in Figma.<br>2. Type your title text, then set font size to 32px, weight to Bold, and color to #111111.<br>3. Create subtitle text below, set font size to 24px, weight to Semi-Bold, and color to #333333.<br>4. Add body text below subtitle, set font size to 16px, weight to Regular, and color to #555555.<br>5. Adjust line spacing to 1.25x for all texts for better readability.<br>6. Align all text layers to the left for a clean layout.

Output

You will see a clear visual hierarchy: a large bold title, a smaller semi-bold subtitle, and a smaller regular body text, each with distinct colors and spacing.

⚠️

Common Pitfalls

Common mistakes when creating text hierarchy in Figma include:

Using too many font sizes or weights, which confuses the reader.
Choosing colors with low contrast, making text hard to read.
Not spacing text properly, causing clutter or too much empty space.
Aligning text inconsistently, which breaks flow and balance.

Always keep your hierarchy simple and consistent.

css

/* Wrong way: Too many font sizes and colors */
Title {
  font-size: 30px;
  font-weight: 700;
  color: #111111;
}
Subtitle {
  font-size: 28px;
  font-weight: 600;
  color: #222222;
}
Body {
  font-size: 26px;
  font-weight: 400;
  color: #333333;
}
/* Right way: Clear size difference and color contrast */
Title {
  font-size: 32px;
  font-weight: 700;
  color: #111111;
}
Subtitle {
  font-size: 24px;
  font-weight: 600;
  color: #333333;
}
Body {
  font-size: 16px;
  font-weight: 400;
  color: #555555;
}

📊

Quick Reference

Remember these tips for effective text hierarchy in Figma:

Use 2-3 font sizes maximum.
Bold or semi-bold for headings, regular for body.
High contrast colors for readability.
Consistent spacing and alignment.
Test your design by scanning it quickly to see if hierarchy is clear.

✅

Key Takeaways

Use different font sizes and weights to show text importance clearly.

Choose colors with good contrast to improve readability.

Keep spacing consistent to avoid clutter and improve flow.

Limit font variations to maintain a clean, easy-to-scan design.

Align text consistently for a balanced and professional look.