last updated November 30,2021
Is Auto Layout being weird again? Is the text block you have set to Fill Container not filling the container?
Double checking that Hug Contents or Fill Container is configured through all nested components is often one of the most common ways to troubleshoot Figma components that aren’t behaving the way you intend. Lately, however, I’ve noticed a few times where everything seems to be configured correctly in the Auto Layout settings, but text is still wrapping in unpredictable ways. What gives?
Text resizing settings could be to blame! Here’s a quick guide to Figma’s three resizing settings and how they can affect your Auto Layout components.
Let’s look at three versions of this Auto Layout component with different resizing settings for the same text block. In this example, we have a component with a blue stroke outline, a fixed header (Did you know…), and a variable text block that will need to accommodate text of varying lengths.
Here’s a quick overview of the main uses for each resizing setting:
Auto Width
Auto Width means that the text block will always grow from left to right, in one long line with no wrapping. If we were to choose this in this example, our component would always stay in one line and would grow wider as we added more text.
In general, auto width is best for shorter text blocks (like links or labels) and is great if your design includes elements that you want at a consistent space next to your type, e.g., arrows after a link:
auto width is also the default setting for freeform type. Quick PSA: you don’t need to draw a box in order to type. This is the case in most design programs — Sketch, Adobe Illustrator, etc — but it is especially true in Figma, and especially if you want to use Auto Layout. If you just press the key t, click once anywhere on the workspace, and start typing, an auto width text block will be created with whatever you type.
Auto Height
auto height is good for when you want a consistent width, so longer type will continue downward. This is probably the most common type of resizing in auto layout applications.
You can see in this example that our component is keeping a fixed width, but gets taller as you add more text. This makes auto height best for most larger blocks of text, where you’d like to ensure the width of the component stays consistent.
Fixed Size
fixed size is the very least flexible way to display type in Figma, so it’s not ideal for most use cases where flexibility is key, like Auto Layout components.
Most of the time, a text box set to fixed size is the root error that’s causing weirdness in your components. Consider these instances below:
In the first instance, the component looks great, and even has some defined space for a few extra characters to grow! However, you can see that as we add more text, the text block itself (the light blue rectangle) stays at a consistent size, and our component’s overall dimensions remain consistent. At the same time, because the text block and component stay the same size, there isn’t any new space that’s created automatically for our longer text, which leads to overlapping text and general chaos, which probably isn’t the right choice for this component.
Fixed size is also the setting that’s enabled by default when you draw a text box and add type to it, which is why I’d recommend not to draw a text box in order to add type — you’re probably going to want to turn it off, so you’re adding more steps for yourself by putting in type that way!
Fixed size may have some uses if you have a very finite amount of space for text, and you’d need to edit content around these constraints — something like a yearbook or a newsletter, maybe — but this is not particularly common in digital product applications, and is a big hindrance when creating flexible UI components.
The takeaways?
Once again, for the skimmers: you don’t need to draw a box in order to type. You don’t need to draw a box in order to type! To create the most flexible type box with the least effort:
1. Press t
2. click once
3. start typing
If your auto layout settings are looking 💯 but your components are still 😱 — go back to basics and take a look at those three little resizing settings. They’re more important than you might think!
(Also, Diana Ross really is Ashlee Simpson’s mother in law.)
