Back to Plugins
Baseline (Beta)

Baseline (Beta)

A system-first way to create design tokens in Figma.

Plugin Preview

Baseline (Beta) preview

About this plugin

Baseline is a design system token generator built for designers who want clarity, consistency, and control at the foundation level of their products.Instead of locking you into predefined scales or rigid frameworks, Baseline lets you define your own system and converts it into structured Figma Variables you can actually maintain over time.🧱 What Baseline Helps You Do🎨 Build a Flexible Color SystemCreate semantic color tokens such as brand, feedback, and functional colors with full control over naming and scale structure.Rename color groups and shade labels to match your systemGenerate consistent light and dark mode color scalesPreview tokens before generating variablesAvoid hard-coded or inconsistent color usage🔤 Create a Clear Typography SystemDefine typography using meaningful roles, not arbitrary labels.Create roles like Body, Caption, Heading, and DisplayControl font family, weight, size, and line heightSet responsive sizes for desktop, tablet, and mobileGenerate clean typography tokens that map directly to Figma Variables📐 Define Spacing with IntentBuild spacing tokens using a consistent grid that scales across layouts.Choose between common grid systems (4px / 8px)Create semantic spacing tokens instead of random valuesKeep spacing consistent across components and layouts♿ Accessibility Built Into the WorkflowBaseline includes real-time WCAG contrast validation so accessibility is handled while defining tokens, not after designs are complete.Check contrast between text and background tokensValidate WCAG AA and AAA complianceMake accessibility decisions early, where they belong⚙️ Generate Figma Variables SafelyBaseline is designed for iteration, not one-time setup.Preview what will be generated before creating variablesCreate clean variable collections with predictable namingBuild systems that can evolve as products grow🔍 What Makes Baseline DifferentFully customizable naming no forced conventionsFocused only on tokens (colors, typography, spacing)Built for real product workflows, not demosAccessibility treated as a core requirement, not a featureDesigned to scale beyond a single file or project👥 Who Baseline Is ForProduct designers working on real applicationsTeams adopting Figma Variables seriouslyDesigners building scalable systems across multiple screensAnyone tired of rebuilding design systems from scratchIf you’re looking for instant UI kits or auto-generated layouts, Baseline may not be the right tool.

Plugin Details

Version11
CreatedDecember 31, 2025
Last UpdatedMarch 2, 2026
Categorydesign-tools-other
CreatorBhargav
Stats4 installs, 6 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • https://*.supabase.co
    • https://api.figma.com
    • https://api.web3forms.com
    • https://fonts.googleapis.com
    • https://fonts.gstatic.com
    • https://www.googleapis.com