Tokenly

✨ Generate a full design system — tokens and components — without leaving Figma.

Most design-system plugins stop at color styles. Tokenly goes further: set your brand color, typeface, and a few scale preferences, and it builds out variables, text styles, effect styles, and real, fully-stated component sets — all in a few clicks.

🧩 What it generates🎨 Color — a 50–900 scale from your primary color, with optional secondary and grey, plus unlimited custom color groups. Published as Figma Variables.

🔤 Typography — a type scale from any ratio (minor third, golden ratio, or custom), with per-size overrides and the ability to add fully custom sizes. Published as Text styles.

📐 Spacing & Radius — formula-based scales (linear or geometric) with manually-added values on top. Published as Variables.

🌗 Shadows — a full elevation system with independent X/Y offset, blur, spread, opacity, and color per step, plus a one-click "apply to all" for quick re-tinting. Published as Effect styles.

🧱 Components — Buttons, Inputs, Toggles, Checkboxes, Radios, Tabs, and Badges, each built with its complete state set (hover, focus, disabled, error where relevant), laid out in a proper variant grid — not stacked on top of each other.

⚙️ How it worksEvery tab in the plugin mirrors what it publishes — set your values, see them update live, then hit that tab's Publish button. Re-publishing after a tweak updates your existing styles/variables/components by name instead of duplicating them, so you can iterate freely. 🔁📌 Good to know🅰️ Typography needs your chosen font installed locally to render correctly in Figma — it'll fall back to Inter otherwise.

🧬 Built for Figma's Variables system, so it needs a plan/file that supports variables.