TypeGrid — AI-Powered Typography for Figma

About this plugin

TypeGrid helps you create perfect typescales aligned to a baseline grid.

Generate a typescale: Choose your base font size, ratio, and number of steps. The plugin instantly creates a preview of your typescale.

Create Text Styles and automatically bind them to Variables in one click!

AI-powered line heights: Get intelligent line height recommendations powered by OpenAI or Anthropic. Enable or disable AI with a toggle, or switch to manual ratio mode. Your API key stays on your device — we never see or store it.

Apply a baseline grid: Set your baseline unit and rounding mode, and the plugin ensures your text layers align perfectly to the grid.

5 naming conventions:

1. Semantic (H1, H2, Body, Small)
2. T-Shirt sizes (4xl, 3xl, base, sm)
3. Design Tokens DTCG (text/size/4xl)
4. Tailwind (text-4xl, leading-4xl)
5. Custom patterns with placeholders

Custom Pattern Builder: Create your own naming system using placeholders like `{scale}`, `{semantic}`, `{size}`, `{font}`, and `{weight}`. Perfect for matching your existing design tokens.

Create Text Styles and bind automatically to Variables in one click!

Preview with custom fonts: See how your typescale looks with any font installed on your system. Smart defaults select Regular, Medium, and Bold weights.

Refreshed UI: New Ink & Paper design with dark mode support and full accessibility (keyboard navigation, screen reader support, reduced motion).

Settings that stick: Your AI preferences and settings are remembered across sessions.

Save time and ensure consistency — automate the tedious process of creating and managing typescales and baseline grids.