Skip to main content
Coreframe is a Figma plugin that builds a complete design system for you — inside Figma, in minutes. Instead of manually creating color variables, spacing scales, typography styles, and component libraries from scratch (a process that typically takes days and is easy to get wrong), Coreframe generates the entire foundation for you: structured design tokens as native Figma variables, 40+ UI components with full variant sets, auto-generated in-canvas documentation pages, and developer-ready export files.

​
What Coreframe generates

Design Tokens

Colors, typography, spacing, grid, border, radius, shadows, and opacity — all created as native Figma variables, organized and ready to use.

Component Library

40+ production-ready UI components with variants, states, and token bindings — generated directly onto a dedicated Components page in your file.

In-Figma Documentation

Auto-generated documentation pages sit alongside your components in Figma, giving your team a living reference for every token and component.

Developer Exports

Export your token set as tokens.json, a Tailwind v3 config, or a Tailwind v4 CSS theme file — so developers can plug your design system straight into code.

​
How it works

1

Configure your design system

Open the plugin and set your brand colors, choose your typography scale and font families, and adjust spacing, grid, border, radius, shadow, and opacity settings to match your product’s needs.
2

Generate tokens and components

Click Generate on any token tab to create Figma variables instantly. Then switch to the Components tab and generate individual components or your full component library — Coreframe wires everything to your tokens automatically.
3

Export or share

Use the Developer tab to download tokens.json, a Tailwind v3 config, or a Tailwind v4 CSS theme. Share your Figma file with developers and they have everything they need to start building.

​
Free vs Pro

The free plan covers core token generation and the standard component set. Coreframe Pro unlocks the full feature set with a one-time purchase:
  • Individual color swatch editing — fine-tune every step in your color palette
  • Semantic token mapping — map primitive tokens to semantic roles (e.g. color/primary/default)
  • Component token mapping — bind component-level tokens to your semantic layer
  • Advanced typography editing — full control over every type scale detail
  • Unlock all Pro components — access the complete library of Pro-only UI components
  • Custom spacing & semantic mapping — define your own spacing scale and semantic aliases
  • Export to Tailwind theme (beta) — download a Tailwind v4 CSS theme or Tailwind v3 config generated from your Figma variables
Pro is a one-time purchase with lifetime access and all future updates included.
Ready to build your design system? Head to the Quickstart to install Coreframe and generate your first tokens in under five minutes.