Text Tool Deep Dive

Introduction

Typography is a core pillar of UI design — and Figma gives you a powerful set of tools to control every aspect of it. Whether you’re designing a landing page, a mobile app, or a design system, understanding how the Text Tool works will help you create clean, readable, and scalable interfaces.

1. The Text Tool: Basics First

Image Placeholder: Toolbar showing the “T” text icon and sample input on canvas

Activate the Text Tool by pressing T or clicking the T icon in the toolbar. Click anywhere on the canvas to start typing.

Once you’ve added text, you’ll unlock a rich set of typography controls in the right-hand Properties Panel, including:

• Font family
• Font weight (Regular, Medium, Bold, etc.)
• Font size
• Line height (leading)
• Letter spacing (tracking)
• Paragraph spacing
• Text alignment (left, center, right, justified)
• Text decoration (underline, strikethrough)
• Text casing (uppercase, lowercase, title case)

These settings can be combined to build clean type systems that reflect brand voice and UI purpose.

2. Understanding Auto Width, Auto Height, and Fixed Text Boxes

Image Placeholder: Three examples side by side showing each text resizing mode

Figma gives you three text box behaviors — and understanding the difference is crucial for layout and scaling:

• Auto Width: The text box expands horizontally as you type. Great for buttons, labels, and chips.
• Auto Height: The box expands vertically to fit content but keeps fixed width. Ideal for body text, headlines, or descriptions.
• Fixed Size: The box doesn’t resize with content. Use this when you want controlled overflow, multi-line input behavior, or precise alignment.

You can change these modes via the dropdown in the Properties Panel, next to the resizing icons.

Pro Tip: Use Auto Layout with Auto Width text for dynamic components like buttons or badges.

3. Building a Type Hierarchy in Figma

Image Placeholder: Example type hierarchy with labeled heading, subheading, body, caption

Strong design starts with strong typography. A type hierarchy guides your user’s eye and establishes structure across your UI.

Here’s a simple type hierarchy example:

• H1 (32–48px): Page titles
• H2 (24–32px): Section headings
• H3 (18–24px): Subheadings
• Body (14–16px): Paragraph content
• Caption (12px): Annotations or meta text

You can save these as Text Styles in Figma for easy reuse and consistency across files and components.

4. Scaling and Responsiveness Tips

Image Placeholder: Text resizing within an Auto Layout frame with constraints visible

• Use Auto Layout frames to allow text to grow with padding and alignment.
• Set text constraints inside Frames (e.g., “Left & Right” or “Top & Bottom”) to maintain positioning on resize.
• For responsive design, combine Auto Width/Height with smart layout logic, especially in components.

Bonus Tip: Watch out for fixed-size text boxes in responsive layouts — they can clip or overflow when resized. Stick to auto sizing when flexibility is key.

Conclusion

Text might look simple — but mastering typography in Figma will drastically improve the clarity and professionalism of your designs. Learn to use the Text Tool’s properties, choose the right sizing behavior, and create consistent hierarchies. With these foundations, your UI will not only look better but function more effectively.