Back to Plugins
UI Token Starter Pack

UI Token Starter Pack

Generate a clean token system in seconds.

Plugin Preview

UI Token Starter Pack preview

About this plugin

UI Token Starter PackGenerate a production-ready design token system in Figma — in seconds, not hours.Most token tools ask you to configure everything from scratch. UI Token Starter Pack works the other way: pick a preset, choose your base colors, and get a complete, structured token system ready to use.Built for freelancers, agencies, startup product teams, and anyone building SaaS apps, dashboards, or small design systems who needs a clean foundation fast.What gets generatedColorsPrimitive color palettes from your base colors (Neutral, Brand, Info, Error, Success, Warning + custom). Choose 8, 10, or 11 shades per color, with Step 50, Step 100, or Sequential naming.Semantic color tokensStructured semantic layers for Background, Surface, Text, Icon, Border, Actions, and Status — mapped to your primitives. Pairs are accessibility-optimized by default, so contrast ratios pass WCAG AA without manual checking.Light and dark modeFull light/dark semantic mappings in a single Semantics collection with two modes. Works on both paid and free Figma plans.SpacingClean scale from a base unit (2, 4, 6, or 8px). Compact, Standard, or System presets. Value-based, sequential, or t-shirt naming.TypographyFont variables and ready-to-use Figma text styles — Heading, Title, Body, Label, Caption, Button, and Link. Compact, Standard, or Large presets. Supports multiple font families assigned to different categories.Border RadiusSharp, Balanced, Rounded, or Soft presets. Tokens bound to Figma float variables.ElevationShadow tokens in Soft, Material, or Sharp presets, applied as Figma effect styles.Token StylesheetA visual preview page built automatically inside your Figma file — color swatches, spacing bars, typography table, radius chips, and shadow cards. Updates independently without re-running the full generator.How it works1. Select the modules you need2. Set your base colors and choose a preset3. Hit Generate — variables, styles, and the stylesheet page are created instantly4. Reopen the plugin anytime — your settings are remembered

Plugin Details

Version4
CreatedMay 13, 2026
Last UpdatedJune 18, 2026
Categoryui-kits
CreatorRoman
Stats1 installs, 2 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • https://fonts.googleapis.com
    • https://unpkg.com