Summary
If you're building a design system in Figma, starting with a solid text hierarchy is key. But instead of setting each style manually (painful and slow), here’s how to create an entire text system in under 5 minutes — using just 3 plugins.
Let’s get right into it 
1) Generate a Text Scale with Typescales
Plugin: Typescales
1.
Right-click anywhere on the Figma canvas
2.
Select Plugins → Manage Plugins
3.
Search for Typescales and click Run
4.
You'll see a panel pop up like this:
5.
Configure your base settings:
•
You can adjust these numbers based on the style you want to achieve. Try experimenting to see what works best for your project. Here's how I set mine as an example:
•
Base size: 16
•
Scale: 1.25
•
Line height: 1.2
•
I kept the other settings at their default values.
6.
Click Generate — and boom !
! 7.
The plugin will generate a vertical stack of text styles with calculated sizes.
2) Rename the Text Layers with Smart Variables
Now let’s rename these text layers to something meaningful like H1, H2, H3...
1.
Hold Command (or Ctrl) to click individual sublayers
2.
Use Shift to multi-select all text layers
3.
Drag them outside of the frame for easier access
4.
Select the header text layers (H1, H2, etc.).
5.
Right-click in the Layers panel and choose Rename.
6.
Use the format H$N in the rename panel.
•
$N assigns numbers in reverse order (top layer = H5, bottom = H1).
•
$n assigns numbers from top to bottom (H1 to H5).
7.
Press Rename to apply.
8.
Repeat the rename steps for title/body/caption text layers.
3) Create Bold Versions
Want bold styles too? Easy.
1.
Duplicate the entire set of text layers
2.
Select them all, and in the Typography panel, change font weight to Bold
3.
If needed, change font family.
4.
Then batch rename again:
•
Open rename dialog
•
Click "Current Name" (it auto-fills with $&)
•
Add " Bold" to the end → $& Bold
This keeps the original name and just adds "Bold" — super handy!
4) Turn Text into Styles with Text Styles Generator
Plugin: Text Styles Generator
Now that you’ve got all your text layers named and styled:
1.
Select the parent frame
2.
Run Text Styles Generator
3.
Click Generate Text Styles
That’s it. Your text elements are now proper Figma Text Styles, reusable across all projects!
5) Build a Typography Style Guide (Optional but Beautiful)
Plugin: Typography Style Guide
To make your system visually organized:
1.
Run the Typography Style Guide plugin
2.
It auto-generates a clean layout with all your text styles in use
Perfect for documentation or sharing with your team!
Quick Recap•
Use Typescales to generate a text hierarchy in 1 click
•
Batch rename with $N, $n, or $& to automate naming
•
Duplicate and tweak to create bold versions
•
Generate Figma Text Styles automatically
•
Document it all with a clean style guide
And there you go — a complete, scalable, and stylish text system ready to use in Figma, all done the easy way
If you're building a design system, this method saves hours and removes all guesswork. Plus, your future self (and teammates) will thank you. Happy designing!