Text box resizing behavior in Figma

Whew — still with me? We've covered a lot, but we're almost through it all. Once your text styles are ready to go, I have one last useful tip.

When creating text boxes in Figma, there are three main resizing modes that can be applied to them:

  • Grow Horizontally (the default when you click once to make a new text box)
  • Grow Vertically
  • Fixed (the default when you click and drag to make a new text box)

At early stages of your project, there is a chance some of these properties may change. For example: if you had a text box set to grow horizontally, resizing it vertically would automatically change its mode to "Fixed". These things will always happen during the more exploratory phases of a design when you're less concerned with accuracy.

As you get closer to production and start to tighten up your design, I recommend setting text boxes to "Grow Vertically" wherever possible before going to production. Using this setting will ensure the height of the text boxes is sized based on the line height specified in your font-style. When you switch to this mode, a text box that is sized too tall for its contents will automatically resize to the height to fit.

Why is this important? When developers are inspecting your files, they need to be able to accurately take measurements between text objects and other objects on the canvas. If text boxes are not sized accurately, spacing between elements will undoubtably be off once implemented.

For example: In the video below we have a headline with a font size of 48px and a line height of 64px. The text box was resized manually in the example on top (which changed its resize behavior to fixed). Instead of having a height of 64px (defined by the line height), the height has been set to 74px by means of resizing.

When a developer inspects the file to understand how far apart the two text objects are, the distance is calculated from the bottom of the text box containing the headline, showing a distance of 6px. In code, the height of the headline will be calculated based on the line height (which in this case is 64px). So in reality, the elements are going to end up 10px closer together in production and appear to be visually inconsistent with what the designer intended.

In the second example, by setting the resizing behavior to "Grow Vertically" we can see the height is adjusted to respect the line height value of the text style. Now, when a developer inspects the distances between the two objects, they can see the spacing is 16px—a more accurate representation of the relationship between these elements as it would be in code.

If you want to learn more about resizing, our help article covers this in great detail, and if you want to learn more about our recent improvements to how we handle line height, make sure you check out this post.

Time to start chasing waterfalls 😅

I hope some of these considerations will be useful in setting up a strong and long lasting set of type styles as part of your design system. As always, feel free to share your tips, approaches and experiences in our online community on Spectrum.