Foundation

About this plugin

FoundationDesign systems shouldn’t be a hurdle. Foundation gives you a complete, clean set of tokens (variables) in Figma in seconds, and lets you evolve them without breaking your files. Think of it as the structure and clarity you love in Tailwind, made native for Figma.📹 Getting startedhttps://www.youtube.com/watch?v=iNjh0H4R_sk🎯 What it isA fast way to build a real design system: colors, spacing, typography, borders—ready to use.A safe way to evolve it: update tokens as your product grows, without relinking anything.A flexible bridge to code: export to JSON or Tailwind config files.👻 Who it’s forDesigners: start with sensible defaults, then shape them to your brand without wrestling the tools.Engineers: get clean, structured tokens you can trust—and a straightforward export to wire them into your app.Product teams: ship faster with consistent decisions that scale across themes and densities.🔥 What you can doGenerate a full system in minutes: no manual setup, no scattered styles.Update safely: refine colors, sizes, or type later—your designs stay linked.Design for reality: light and dark modes, with an optional 2x zoom mode to stress‑test density.🤖 Core FeaturesColors that scaleStart from your brand and get a complete, well‑structured paletteBackgrounds, surfaces, content, borders, overlays, shadowsLight and dark modes tuned to feel right in bothData colors for charts and heatmaps that work in either modeSmart spacingStable, pixel‑named tokens that make sense at a glanceValues adapt to your root size so your system scales togetherTypography that behavesFont sizes from your root and a simple type scaleLine heights from your multiplier, rounded to the nearest quarter of the root for clean rhythmIndependent fontSize and lineHeight tokens, plus ready‑to‑use text stylesBordersRadius and width tokens with sensible steps that fit the rest of your systemModes and densityLight and dark modes built inOptional 1x/2x zoom preview to validate spacing and legibilityExportsJSON for any codebaseTailwind exports available if your team uses itHow it worksSet your brand colorsConfigure sizes: Root (px), Type scale, Line heightGenerate your tokens and start designingUpdate any time—your components stay connectedWhy it worksStability: pixel‑named spacing stays readable and consistentRhythm: line heights land on a simple grid so layouts feel tidyClarity: names and groups are human‑friendly and practicalScale: modes and density are built in from day oneFoundation removes the busywork so you can focus on decisions. Whether you’re new to design systems or maintaining one at scale, it gives you a solid starting point—and the confidence to keep improving it.