Line height behavior
If you're using UI3, Figma's new design, some parts of this article might not match what you see in the product today. We appreciate your patience while we make updates. Learn more about Figma’s redesign →
What's New?
We changed how we calculate and display Line height in April, 2019. There are two aspects to these changes:
- We now calculate the line height percentages based on the Font Size. We used to calculate this based on the font's default Line height.
- We also addressed some issues relating to Line Height via an update in text rendering. You can update existing text layers so that they use the new rendering.
In Summary:
- Every text layer will now calculate line height percentage, as a percentage of the Font Size.
- We won't apply the updated text rendering approach to existing text layers.
- Any new text layers you create will use the updated text rendering.
- You can update text layers to use the new rendering, at any time and at your own pace.
For a detailed explanation of the changes, check out our blog post: Line Height Changes
I want to:
Tip! Learn more about Line height in our Explore Text Properties article.
Update Existing Text Layers
Any existing Text layers will continue to use the previous text rendering. This preserves the layout and positioning of existing designs.
To use the new rendering on existing Text layers, you will need to update the Text layers themselves. This allows you to work through existing designs at your own pace.
You can update a single Text object, or update many Text layers at once.
- Select the Text object(s) in the canvas.
- In the Properties Panel, open the Advanced Type menu by clicking on the three dots:
- Click the Update button in the bottom-right corner:
- The selected text will now use the new text rendering.
Tip! You can use the Select All Text Layers option to select every text layer on the page.
- Open the main menu. You can use the keyboard shortcuts:
- MacOS: Command-/
- Windows: Ctrl + /
- Search for Select All Text Layers:
- Click to select all text layers within the current page.
- You can then adjust the line height settings in the properties panel.
Update Text Styles
We will convert the line height value in any existing Styles to the new format. For example: Any styles that used a font's default line height (so, 100% on the old rendering) will be set to "Auto".
Changes to text rendering aren't applied to existing text layers. You will need to update any text layers that have styles applied.
If you want to change the line height of an existing style, you can edit the text ttyle.
Editing a Text Style
You can update text styles from the properties panel.
For Local Styles
- Click anywhere on the canvas to deselect any layers.
- You will see any Local Styles listed in the properties panel:
- Click the Edit Style icon to make changes to the style:
- Update the Line height to the desired value:
For Styles from other Files or Libraries
You can edit a style from any layer that uses that style.
- Select the text layer you want to update.
- Click on the text style in the properties panel:
- Click the Edit Style icon:
- Click the Go to main style to edit link:
- Update the Line height to the desired value:
You can update Text layers using the Updating Text Layers method above.
Revert to Previous Rendering
We're confident that you'll find the new approach to line height preferable. But, you can revert text layers to use the previous text rendering.
You will still be able to update these text layers to the new rendering in the future.
- Select the text object(s) in the canvas.
- In the properties panel, open the Advanced Type menu by clicking on the three dots:
- At the bottom of the advanced type menu, you'll see a message that shows the text layers uses the new rendering:
- Click the Revert button to revert to the previous rendering: