TYPOSYNC

About this plugin

TypoSync is a comprehensive typography system builder for Figma that helps designers create consistent, scalable type scales with automated local variables and text styles.

🎯 KEY FEATURES

• Automatic Type Scale Generation Generate harmonious type scales using numeric ratios (1.125–2.000) or the harmonic sequence. Set your base size and let TypoSync calculate the rest.

• Individual Typography Controls Fine-tune each style with custom letter-spacing and line-height values. Perfect for multilingual projects with different optical requirements.

• Drag & Drop Reordering Reorganize your type scale items intuitively. The order you set is preserved when creating variables and styles.

• Smart Variable Naming with Grouping Variables are automatically organized using slash notation (e.g., "h1/bold”, "h1/regular"). This creates visual grouping in Figma's variable panel for easy navigation.

• Local Variables Integration Automatically generate Figma local variables for fontFamily, fontWeight, fontSize, letterSpacing, and lineHeight.

• Text Styles Creation Create complete text styles bound to your local variables in one click. Variables and styles stay in sync with your type scale settings.

• Collection & Mode Management Organize typography systems using Figma's collection and mode structure. Load existing configurations, create new modes, or update existing ones.

📝 WORKFLOW

1. Set base size and scale ratio

2. Choose font family and weights

3. Name your styles (use slashes for grouping)

4. Customize letter-spacing and line-height

5. Register local variables

6. Apply text styles

Perfect for design systems, UI kits, and projects requiring consistent typography across multiple platforms.