Typography Tokens
Font sizes, weights, and line heights from your Tailwind config or MUI typography variants are captured as design tokens.
How it works
Text utility classes (`text-sm`, `font-semibold`, `leading-tight`) are resolved against your Tailwind spacing and font scales and output as a structured token map. The plugin applies these when creating text nodes so font sizes match exactly between browser and Figma.
Usage
- 1
Typography tokens are extracted automatically when you run 'Generate Design System Page'.
- 2
Font size (`text-sm`, `text-xl`…), weight (`font-semibold`…), and line height (`leading-tight`…) are all captured.
- 3
Values are resolved against your actual Tailwind config, not hardcoded defaults.
- 4
Text nodes in Figma are created with the exact pixel values — no rounding or approximation.
- 5
Custom font families defined in your Tailwind config are also applied if the font is available in Figma.