Customize a text style for multiple breakpoints
Written by Figma Man
Updated at June 19th, 2025
- Administration – Figma Learn
- Figma Design – Figma Learn
- Get started – Figma Learn
- FigJam – Figma Learn
- Community – Figma Learn
- Help – Figma Learn
- Work across Figma – Figma Learn
- Courses, tutorials, projects – Figma Learn
- Figma Slides – Figma Learn
- Figma Buzz – Figma Learn
- Figma Make – Figma Learn
- Figma Sites – Figma Learn
Table of Contents
Figma Sites was released in open beta at Config 2025. It is currently available on all paid plans, with a limited Starter plan experience coming soon. Learn more about what’s included in the beta.
In Figma, a text style is a reusable set of typography properties that can be applied to one or more text layers.
Text styles help you stay consistent across your designs by applying the same properties to each text layer. When you update a text style, every text layer using that style automatically updates, saving time and maintaining design consistency.
In Figma Sites, text styles have an additional capability: You can set different text style properties—such as font size, line height, letter spacing, or paragraph spacing—based on a webpage’s breakpoints. This means that you can define how a single style should adapt for different screen sizes or devices.
Example
Suppose you're designing a website with a main hero section that needs to display a heading and a paragraph of text. You want the text to be large and prominent on desktop screens but smaller on mobile devices.
By default, a text style looks the same across different breakpoints.
By customizing a text style for different breakpoints, you can make sure content looks great on any device.
Create a new text style with breakpoints
You can create a text style from any text layer that has the properties you want to use.
- Select a text layer.
- In the Typography section of the right sidebar, click Styles.
- Click the plus icon to create a new style.
- Give the style a name.
- Click Add new style breakpoint in the Breakpoint section.
- Choose an existing breakpoint in your file, or click Custom to choose your own breakpoint for this style.
- Adjust the font size, line height, letter spacing, and paragraph spacing for that breakpoint as needed.
- Click Add new style breakpoint to add another breakpoint, or click Create style when you’re done.
Now, when you use this text style on a webpage with multiple breakpoints, it will automatically adjust based on page’s breakpoint width.
Tip: Alternatively, you can create a new responsive text style by first customizing the text layer in each breakpoint on the canvas, then creating the style. Figma will automatically add your customized properties for each breakpoint to the new style.
Simply select the customized text layer in each breakpoint of your webpage, then follow the instructions above. All your text layers’ custom property values will automatically get added to your new style.
Add breakpoints to an existing text style
You can add breakpoints to text styles created in the file or ones from a library. If you add breakpoints to a text style from a library, these customizations will only be available in the current file—it’s not possible to publish them to a library.
- Select a text layer with the existing style applied.
- Click the name of the style in the Typography section of the right sidebar.
- Hover over the name of the style in the list and click Edit style.
- In the Breakpoint section, click Add new style.
- Choose an existing breakpoint in your file, or click Custom to choose your own breakpoint for this style.
- Adjust the font size, line height, letter spacing, and paragraph spacing for that breakpoint as needed.
- Click Add new style to add another breakpoint, or click Create style when you’re done.
Tip: If you want to reuse the text style’s breakpoint values across multiple files, you can create and use a variable. Since variable collections can be published in a library, this can help you keep the values consistent across multiple files.