Scafforge

Scafforge generates design system foundations built on Tailwind CSS 4 color primitives and shadcn/ui semantic tokens.

Pick your colors, assign semantic roles, choose a visual style, and generate everything — variables, tokens, and ready-to-use components — directly in Figma. Already generated? Use Rebuild to update components in-place without breaking a single instance. What you get: Color primitives from Tailwind 4's full palette (22 scales × 11 shades) with optional opacity variants — Figma doesn't allow combining a color variable with an opacity variable in a single fill, so Scafforge automatically generates pre-composed color+opacity variables (e.g. blue-500/50) that stay linked to their base color and just work. You can also add your own custom color scales, give them a name, and use them in semantic role assignments like any built-in scale. Semantic tokens with Light & Dark modes — choose between Classic (shadcn/ui flat tokens) or Ale Style, a simpler structure that groups tokens by function (fg/, bg/, border/) instead of shadcn's overlapping names like muted, accent, and secondary. The pattern is always category/intent-level — no ambiguity, no -foreground suffix soup.

Sizing tokens for radius, spacing, font sizes, border width, and opacity. Shadow effect styles and text styles matching Tailwind's scale.

16 component sets (Button, Input, Select, Checkbox, Switch, Card, Dialog, and more) built as Figma variants with proper variable bindings. Button icon-only variants use a swappable component instance so you can pick any icon directly from the properties panel. 5 visual styles — from classic shadcn/ui to compact and rounded alternatives. Full Lucide and Iconoir icon libraries fetched at runtime. Rebuild modeWhen we ship a new plugin version with improved components, Rebuild updates your existing component sets in-place — transplanting new structure into the existing shells so Figma node IDs are preserved and every instance across your file updates automatically. Select only the components you want to update. New variants are appended to existing sets; nothing else is touched. Select only the colors and components you need. Every generated variable uses proper Figma scopes so they appear in the right property pickers. Components are bound to your tokens — change a color role, and everything updates. Requires Figma Professional or higher for Light + Dark mode support. Ale Style tokens are currently in beta. Feedback, suggestions, and ideas are welcome at https://ale.design/