Smart Typography Builder

About this plugin

Stop manually creating text styles one by one. Smart Typography Builder empowers you to generate comprehensive, harmonious typography systems in seconds. Whether you're using Google Fonts, local fonts, or need a standard framework like Tailwind CSS or Bootstrap, this plugin handles the heavy lifting.🚀 Key Features⚡ Instant Typography SystemsGenerate complete type scales (Display, Headings, Body, Labels, Captions) with a single click. Create Figma text styles instantly and apply them to your designs with one-click actions.🎯 Smart Text Style ManagementCreate Text Styles: Convert your entire typography system into Figma text styles organized by categoryApply Styles Instantly: One-click style application to selected text layers from typography cardsFrom Selection: Automatically create text styles from selected text layers with intelligent duplicate detectionBulk Operations: Handle multiple text layers efficiently with smart style matching👀 Advanced Font Preview & DiscoveryInstantly visualize your installed fonts on the canvas with powerful filtering:Font Style Filters: Serif, Sans-Serif, Monospace, DisplayWeight Filters: Light weights, Bold weights, Variable fontsUsage Filters: Best for Headings, Body Text, or CodeSmart Search: Real-time search with custom preview textGenerate Previews: Create beautiful font comparison sheets on your canvas🔡 Comprehensive Font SupportGoogle Fonts: Access thousands of web fontsLocal Fonts: Use your installed system fontsIn-File Fonts: Quick access to fonts already used in your documentPopular Fonts: Curated list of widely-used typefacesVariable Fonts: Support for modern variable font technology🛠 Framework PresetsOne-click generation for industry-standard typography:Tailwind CSS: Complete Tailwind typography scale (text-xs to text-9xl)Bootstrap 5: Display headings, H1-H6, and body text stylesCustom: Build your own unique typography system📦 Figma Variables IntegrationAutomatically create and sync your typography tokens to Figma Variables for modern design system workflows. Perfect for design tokens and developer handoff.✨ Professional OrganizationSmart Grouping: Organized by categories with clean naming conventionsVisual Hierarchy: Clear distinction between primary, secondary, and utility actionsIntuitive Layout: Fixed action footer keeps important controls always accessibleCategory Navigation: Quick filtering by typography categories🌗 Modern InterfaceFully compatible with Figma's light and dark modesSmooth animations and transitionsResponsive layout optimized for plugin constraintsProfessional SaaS-style design💡 How to UseQuick Start (Builder Tab)Select Fonts: Choose primary (and optional secondary) fonts from searchable dropdownsChoose Framework: Select Custom, Tailwind CSS, or Bootstrap 5Customize: Fine-tune individual styles or use presets as-isBuild: Click "Build Typography" to generate a visual scale on your canvasCreate Styles: Click "Create Text Styles" to add styles to Figma's text styles panelSync Variables: Click "Create Variables" to register tokens in Figma VariablesFont Discovery (Preview Tab)Sync Fonts: Click "Sync Local Fonts" to load your installed fontsSearch & Filter: Use advanced filters to find the perfect typefacePreview: Customize preview text to test fonts with your contentGenerate: Select fonts and generate comparison sheets on your canvasSmart WorkflowsFrom Selection: Select text layers → Click "From Selection" → Automatically creates and applies text stylesApply Styles: Hover over any typography card → Click checkmark → Instantly applies style to selected textCategory Filtering: Click category filters in sidebar to focus on specific typography types🎯 Perfect ForDesign Systems & Style GuidesUI Kits & Component LibrariesBrand GuidelinesRapid PrototypingClient PresentationsDeveloper HandoffTypography ExplorationSave hours of manual work and maintain consistency across your designs with Smart Typography Builder.