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 Pro

Free: Create Color Shades and Individual Color Variables

Pro: Unlock Color System, Size Scale and Typography Generation.

Best for

Designers building scalable design systems who want clean tokens, fast.