UI Token Starter Pack
Generate a clean token system in seconds.
Plugin 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
| Version | 4 |
|---|---|
| Created | May 13, 2026 |
| Last Updated | June 18, 2026 |
| Category | ui-kits |
| Creator | Roman |
| Stats | 1 installs, 2 likes |
| Pricing | Free |
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
More Like This
Discover other plugins in the ui-kits category.
UI Components Kit
pre-built UI component to be used in you design from Material UI , Chakra UI , and more ...
UI Kit
Turn technical debt into design consistency.
Design System Hub – Curated Library of 150+ UX Design Systems & Figma Libraries
Design System Hub – Curated Library of 150+ UX Design Systems & Figma Libraries