Token Generator

Token Generator builds a full set of Figma variables and styles for your design system in a single click, so you can skip the manual setup and get straight to designing.

What it creates:

Foundations: Border Radius, Spacing, Opacity, and Stroke Width scalesTypography: font family, size, weight, and line height variables, linked directly to matching text styles. Pick any font already available in your Figma account, searchable, not locked to a preset pairLayout: grid styles for mobile, tablet, and desktop breakpointsEffects: background and layer blur styles, plus a full shadow elevation scaleColor: a complete palette with editable Primary and Secondary colors (add up to 2 more custom colors of your own), each generated as a perceptually even scale using OKLCH color math. Neutral, Success, Error, Info, and Warning use Tailwind CSS's palette, so your semantic colors are consistent and battle tested from the startSet your brand colors and fonts, hit generate, and get a ready-to-use token system, no manual variable creation required.