Type Flow: Automatic Style & Variable Generator

About this plugin

Type Flow is the ultimate utility for Design System architects and UI designers. It doesn't just generate styles; it builds a modern, scalable infrastructure using Figma Variables.

By automating the connection between your Text Styles and Variables (Tokens), Type Flow ensures your design system remains flexible, maintainable, and ready for development.

🔥 Key Features:

⚡ Variables-First Architecture: Automatically creates a "Typography" variable collection. It generates Float variables for sizes and line heights, and String variables for font families and weights.

🔗 Smart Binding: Every text style generated is automatically bound to its corresponding variable. Change the variable value later, and every style updates instantly.

🔄 Live Synchronization: Tweak your system on the fly. Adjust sizes or swap font families in the plugin UI and see your Figma file update immediately without breaking existing links.

✨ Pro Defaults (Ready-to-use): Comes with professionally tuned default settings for typography scales. You can generate a pixel-perfect system instantly or customize it to fit your brand.

🔤 Dual Font Support: Easily configure a Primary Font for Headings and a Secondary Font for Body text. The plugin handles the complex mapping for you.

How it works:

1. Select your Primary and Secondary fonts.
2. Adjust the scale for Titles, Headings, Body, and Labels using the visual sliders.
3. Click Generate to create the system, or Sync to update existing styles.

Perfect for:

1. Setting up new Design Systems.

1. Migrating from static Styles to Variables.

1. Testing typography pairings quickly.