Foundation

About this plugin

Foundation

Design 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 started

https://www.youtube.com/watch?v=iNjh0H4R_sk

🎯 What it is

1. A fast way to build a real design system: colors, spacing, typography, borders—ready to use.
2. A safe way to evolve it: update tokens as your product grows, without relinking anything.
3. A flexible bridge to code: export to JSON or Tailwind config files.

👻 Who it’s for

1. Designers: start with sensible defaults, then shape them to your brand without wrestling the tools.
2. Engineers: get clean, structured tokens you can trust—and a straightforward export to wire them into your app.
3. Product teams: ship faster with consistent decisions that scale across themes and densities.

🔥 What you can do

1. Generate a full system in minutes: no manual setup, no scattered styles.
2. Update safely: refine colors, sizes, or type later—your designs stay linked.
3. Design for reality: light and dark modes, with an optional 2x zoom mode to stress‑test density.

🤖 Core Features

Colors that scale

1. Start from your brand and get a complete, well‑structured palette
2. Backgrounds, surfaces, content, borders, overlays, shadows
3. Light and dark modes tuned to feel right in both
4. Data colors for charts and heatmaps that work in either mode

Smart spacing

1. Stable, pixel‑named tokens that make sense at a glance
2. Values adapt to your root size so your system scales together

Typography that behaves

1. Font sizes from your root and a simple type scale
2. Line heights from your multiplier, rounded to the nearest quarter of the root for clean rhythm
3. Independent fontSize and lineHeight tokens, plus ready‑to‑use text styles

Borders

1. Radius and width tokens with sensible steps that fit the rest of your system

Modes and density

1. Light and dark modes built in
2. Optional 1x/2x zoom preview to validate spacing and legibility

Exports

1. JSON for any codebase
2. Tailwind exports available if your team uses it

How it works

1. Set your brand colors
2. Configure sizes: Root (px), Type scale, Line height
3. Generate your tokens and start designing
4. Update any time—your components stay connected

Why it works

1. Stability: pixel‑named spacing stays readable and consistent
2. Rhythm: line heights land on a simple grid so layouts feel tidy
3. Clarity: names and groups are human‑friendly and practical
4. Scale: modes and density are built in from day one

Foundation 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.