Baseline - Design System Variables

About this plugin

Baseline builds production-ready Figma Variables in minutes. Create consistent Color, Typography, and Size systems with clear naming, Base/Alias collections, and presets you can trust.Key features:Color system: Generate structured tokens and alias themes for light/dark.Typography scale: Modular scale presets (Google, Tailwind, Ant Design, Major/Minor Third/Second, Golden Ratio), responsive families (caption → display), optional text styles.Size scale: Clean 4/8-px step scales with your prefix.Base & Alias collections: Predictable paths and overwrite-safe re-runs (no duplicate spam).Live preview & utilities: Google Font preview, px↔rem copy, toasts, light/dark UI.How it works:-> Pick your colors and make instant shade ramps-> Click Create Variable to create variables for individual color.-> Click Generate Color System to create Base collection variables for all colors and it also makes Alias collection color variables referencing the base variables.-> In Sizing Scale, pick from most popular scale sizes and hit Generate to add full scale system in your Base Collection.-> In Typography, Make your own TypeScale or Pick from popular Scale and hit Create Variables & Styles button to create Typography variables and also map them to matching Text Styles.Free vs ProFree: Create Color Shades and Individual Color VariablesPro: Unlock Color System, Size Scale and Typography Generation.Best forDesigners building scalable design systems who want clean tokens, fast.