Numeric Tokens Generator

About this plugin

Transform your design workflow with a comprehensive design system generator that creates and manages typography, spacing, border radius, and shadow systems - all powered by Figma variables.

Key Features:

📝 Complete Typography System

1. Generate responsive typography scales with Material Design or Apple HIG guidelines
2. Smart font pairing validation for optimal readability
3. Automatic variable creation for font sizes and line heights
4. Support for custom type scales and base sizes
5. Responsive typography with desktop, tablet, and mobile variants (Pro)

↔️ Spacing System

1. Create consistent spacing scales based on 4px or 8px grids
2. Generate spacing variables for margins, padding, and layout
3. Customizable number of spacing increments
4. Visual preview of spacing values

⚪ Border Radius System

1. Build systematic border radius scales
2. Customizable base radius and increments
3. Visual preview of radius values
4. Perfect for maintaining consistent component shapes

🎭 Shadow System

1. Create elevation-based shadow systems
2. Customizable shadow properties (color, blur, spread)
3. Visual angle control for consistent light sources
4. Perfect for depth and hierarchy

📤 Export Options

1. Web: CSS, SCSS, JSON
2. Mobile: React Native, Flutter, Android XML, Swift
3. Variables-first approach for easy updates
4. Cross-platform consistency

📚 Auto-Documentation

1. Generate visual documentation for your design system
2. Automatic style guides with examples
3. Clear naming conventions
4. Easy team handoff

🔄 Smart Updates

1. Detect existing settings
2. Update system-wide changes through variables
3. Maintain consistency across your design files

Perfect for design system creators, UI designers, and teams looking to maintain consistent, scalable design systems across web and mobile platforms.