A Figma plugin for design system foundations
Scafforge generates the complete foundation layer of a design system — color primitives, semantic tokens, and canvas components — directly inside Figma. Select colors, assign semantic roles, pick a style, and generate variables plus components in one click.
Why it exists
Setting up a design system in Figma is repetitive work. You always need the same things: a color primitive collection, a semantic theme with Light and Dark modes, and a set of base components that reference those variables. Doing this manually takes hours and is easy to get inconsistent.
Scafforge automates exactly that setup — with Tailwind 4 as the color foundation and shadcn/ui as the semantic layer, because those are the standards most teams are already building on.
Ale Style TokensBeta
Classic shadcn/ui tokens work, but they carry ambiguity. muted, secondary, and accent often resolve to the same color. Half the tokens are -foreground suffixes. There's no consistent rule for which to use where.
Ale Style restructures the token set around three categories — fg/, bg/, border/ — with a clear intent and levelhierarchy. You never wonder which token to use. The category tells you what it controls. The intent tells you what it's for. The level tells you how prominent it is.
Variable collections
Tailwind / Primitives
Full Tailwind 4 color scale + black/white. One variable per shade.
Tailwind / Sizing
Font sizes, border radius, border widths, spacing, and opacity tokens.
shadcn / Themes
Semantic color tokens with Light + Dark modes. Classic or Ale Style.
shadcn / Components
Per-component token variables, aliased into the theme collection. Classic mode only.
Visual styles
License
Scafforge is source-available. The code is on GitHub for review and contribution, but redistribution, commercial use, and derivative works are not permitted without explicit written permission. Third-party components (Tailwind CSS, shadcn/ui, Lucide, Iconoir) are included under their respective open source licenses.
Created by
Alexandre Schrammel — designer and developer based in Brazil. Building tools at the intersection of design systems and developer experience.