If you watched my recent video on setting up color styles in Figma, today I’m going to show you how to do the same thing for your text styles. Setting up text styles has the same advantages as color styles: you can set them up once and then edit them globally throughout your designs in Figma.
Step 1: Organize Your Design
I’m using a design mockup from a recent project. Although the design is fully laid out, none of the text is connected to any text styles. To create cohesion and consistency in the design, we need to set up those text styles across the site.
Step 2: Create a New Frame for Text Styles
Switch over to your Assets page. When working in Figma, I always create a working design page and an assets page. On the assets page, create a new frame where you’ll insert and create your text styles.
Since I already have a design in mind, I’ll copy and paste some of the text over to outline the full text styles we’ll be creating.
Step 3: Set Up Heading Styles
Start with your main headings:
- Heading 1 (H1): Copy and paste the title from your homepage and set it as your H1. Adjust the size and style as needed.
- Heading 2 (H2): Copy the next heading from your design and set it as H2.
- Heading 3 (H3): Repeat the process for H3.
- Heading 4 (H4): If you don’t have an H4 in your design, duplicate the H3 and adjust the style accordingly.
- Heading 5 (H5): Although it’s rare to go below H4, set up an H5 if needed.
Step 4: Set Up Paragraph Styles
Next, create your paragraph styles:
- Body Paragraph: Copy a paragraph from your design and set it as your main body text.
- Subtext/Eyebrow Text: If you have subheadings or eyebrow text, copy and set that as well.
- Body Paragraph Small: Create a smaller version of your body paragraph for use in tighter spaces.
- Body Paragraph Large: For situations where you want text that’s larger than the body paragraph but smaller than a heading.
Step 5: Tweak the Styling
Now that you’ve copied your text over, make any necessary adjustments to the styling:
- Heading 3: Increase the size to 32 points.
- Heading 4: Set this at 26 points.
- Heading 5: Adjust this to around 20 points.
- Body Paragraph, Subtext, and Body Paragraph Small: Ensure these are set at appropriate sizes (e.g., 11 points for small text).
- Body Paragraph Large: Adjust this to 20 points.
Step 6: Create Global Text Styles
Once your styles are dialed in, it’s time to create the global text styles. Select each heading or paragraph, go to the Text Options panel on the right, and hover over the four dots. Click the Plus icon to create a style, then give it a name, such as “Heading 1” or “Body Paragraph.”
Repeat this process for each text style, naming them appropriately.
Step 7: Organize and Apply Text Styles
After creating the styles, you’ll see them listed under Local Styles on the right-hand side. You can drag and drop them to organize them in order of hierarchy.
Now, go back to your mockup and apply the newly created text styles to your design. Select your text elements and choose the corresponding style from the Text Options panel.
For multiple elements, you can select one, hold Shift, and select the others. Then, apply the text style to all selected elements at once.
Step 8: Edit Styles as Needed
If you need to adjust a style, select the text, click the style name, and use the Edit Style option. Any changes you make will automatically update across your entire design.
That’s it! You’ve now set up global text styles for your design, covering everything from headings (H1-H5) to body text and subtext. Just like with global color styles, setting up text styles makes the transition from design to development smooth and easy. All of your font sizes, line heights, and other details are already set, so you can focus on designing.
