They’re more important than you might think! 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.

You don’t need to draw a box in order to type! To create the most flexible type box with the least effort: Once again, for the skimmers: you don’t need to draw a box in order to type. 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.įixed 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!įixed 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. 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. Most of the time, a text box set to fixed size is the root error that’s causing weirdness in your components. This makes auto height best for most larger blocks of text, where you’d like to ensure the width of the component stays consistent.įixed 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. You can see in this example that our component is keeping a fixed width, but gets taller as you add more text. This is probably the most common type of resizing in auto layout applications. Auto HeightĪuto height is good for when you want a consistent width, so longer type will continue downward. 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. 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. Quick PSA: you don’t need to draw a box in order to type. 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:Īuto width is also the default setting for freeform type. 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. Here’s a quick overview of the main uses for each resizing setting: Auto WidthĪuto Width means that the text block will always grow from left to right, in one long line with no wrapping. 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. Let’s look at three versions of this Auto Layout component with different resizing settings for the same text block.

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. 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. Is Auto Layout being weird again? Is the text block you have set to Fill Container not filling the container?ĭouble 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.

Tumblr 100 text blocks