Typescale[r] — by FireFrames.io — Build type scales in Figma

About this plugin

Typescale[r] builds production-ready typography systems in Figma — not just a preview frame, but real Text Styles, Variables, and responsive modes you can use in your designs immediately. ✦ Ratio-based scales 8 mathematical ratios (Minor Second → Golden Ratio) with fine-grained control over scales above and below your base size. Switch between Heading (H1, H2…), Size (XXL, XL…), and Display naming conventions on the fly. ✦ Responsive Desktop + Mobile Toggle mobile on and configure an independent base size, ratio, and per-step overrides. Generated as separate Text Style folders OR as a single Variables collection with Desktop/Mobile modes — so one style adapts across breakpoints automatically. ✦ ShadCN / Tailwind-ready variables Variables mode outputs a Typography collection with Tailwind-style tokens: text/h1/font-size, text/base/line-height, text/xl/letter-spacing. Works beautifully with ShadCN setups and design token pipelines. ✦ Style variants — generated, not faked Select variants globally (Bold, Italic, Bold Italic Underline, etc.) and Typescale[r] generates real Text Styles for every step. Set per-step variants individually, or lock them globally — global always supersedes individual. ✦ Multi-select editing Shift or ⌘-click multiple scale rows, change font or weight in bulk with a floating action bar. Detects shared values vs Mixed (like Figma's native inspector) so you never accidentally overwrite. ✦ Per-step overrides Any step can override global font, weight, line-height, and letter-spacing. Searchable font picker with 1000+ Google Fonts. Line height defaults to AUTO but accepts explicit pixel values. ✦ Print to Canvas Generate a polished preview frame with the actual Text Styles applied — ready to drop into your design system documentation. ✦ Scan existing styles Audit your file's current text styles and export a clean style guide. 100% free. No account, no sign-in, no paywalls — just fireframes.io.