Designilo

Sometimes in UI design or creative mockups, you might want to stretch or expand text to fit a specific space. While Figma doesn’t allow you to scale the text characters themselves horizontally or vertically like in some desktop tools (e.g., Illustrator or Photoshop), it does give you control over how text fits within a bounding box. This means you can stretch the text container and influence how the text wraps, aligns, or resizes based on the box size.

Here’s how to work with text stretching in Figma—and what to expect when you do.

🧱 Understanding Text Resizing in Figma

Figma offers three primary text resizing modes:

1. Auto Width – The text box expands horizontally to fit the text without wrapping.
2. Auto Height – The text wraps to fit a fixed width and expands vertically as needed.
3. Fixed Size – The text box has set width and height, and content can overflow or wrap within it.

To stretch text, you’ll want to switch to Fixed Size.

✅ How to Stretch Text Horizontally or Vertically

Step 1: Select the Text Layer

Click on the text box you want to stretch.

Step 2: Change the Resizing Mode

In the right-hand Design panel, under the Text section:

• Click the dropdown that says “Auto Width” or “Auto Height.”
• Choose “Fixed Size”

This will let you manually resize the text container without the box automatically adjusting itself.

Step 3: Resize the Text Box

Now you can:

• Drag the side handles to stretch the box horizontally (which will cause the text to wrap if needed).
• Drag the top/bottom handles to adjust vertical space.

Note: This changes the layout, not the letterforms. Figma does not distort or scale characters the way Illustrator does when you scale fonts.

🧠 Want to Visually Stretch Letters?

If you’re trying to distort the actual letter shapes (like squishing or expanding characters), Figma doesn’t support this natively. But here are workarounds:

Option 1: Convert Text to Outlines

1. Select the text.
2. Right-click > Outline Stroke
3. Now the text becomes vector shapes, which you can scale and distort freely.

⚠️ Warning: Once outlined, the text is no longer editable as a type layer.

Option 2: Use Letter Spacing or Font Variants

• Increase letter spacing (tracking) in the right panel to add horizontal spacing between characters.
• Some fonts offer condensed or extended styles designed for that stretched look.

🎨 Bonus: Responsive Text in Auto Layout

If you’re building UI components, use Auto Layout to stretch or wrap text within containers. Combined with padding and alignment, this can help build flexible buttons, labels, or cards that resize smartly as content changes.

Final Thoughts

While Figma doesn’t let you stretch text characters manually like vector tools do, it offers plenty of flexibility through fixed-size containers, letter spacing, and outlines. Whether you’re aiming for a fluid layout or a bold visual effect, understanding how text resizing works in Figma helps you control both readability and visual structure in your designs.