Why it worked
The video provides a clear, concise tutorial on a common design problem (managing typography) using specific tools, appealing to designers looking for efficiency and best practices.
Summary
This video demonstrates how to create a scalable typography system in Figma using the Typescale and Styler plugins. It shows how to generate text styles based on a base size and scale type, and then convert these into variables for easy management and editing.
On-screen text
How to create
Variable
Like this
In 1 minute
First, open Typescale plugin
Plugin 1: Typescale
Select a text with the typography (font) that you want
Choose a base size (e.g., 16px),
a scale type (e.g., Major Third),
and number of steps (e.g., 6).
Click Generate Text Styles
It will create heading styles like
H1, H2, H3, etc., based on your scale.
Now lets convert the text into variables (library)
Plugin 2: Styler
Choose "Create Variables from Styles."
Now you've created variable typography tokens 🎨
Variables are Ready to use
Select any text element
Go to the Design panel → Typography →
Link to your variable text style.
Now your typography is linked to design token,
easy to scale, edit, and manage!
Save for later!