Skip to main content
Coreframe generates your entire design token foundation directly inside Figma, creating native Figma Variables — not just styles. Every value you configure becomes a reusable variable that components can bind to, modes can override, and developers can export to code. Instead of manually managing swatches and text styles, you define your system once and Coreframe handles the rest.

​
Token types

Colors

Brand, semantic, and component color palettes

Typography

Font family, size, weight, line height scales

Spacing

Consistent spacing scale for padding and gaps

Grid

Layout grid columns and gutters

Border

Border width tokens

Radius

Corner radius scale

Shadows

Elevation and shadow styles

Opacity

Opacity scale for overlays and disabled states

​
How tokens work in Figma

When Coreframe generates a token type, the values land in your Figma document as Figma Variables inside named collections (e.g., Color, Spacing, Component). This means you can:
  • Bind variables to any layer — attach a spacing variable to a component’s padding so resizing the scale updates every instance automatically.
  • Switch modes instantly — color tokens are created with both Light and Dark modes. Toggling a frame’s variable mode swaps the entire palette in one click.
  • Export to code — variables can be exported as JSON, CSS custom properties, or any format your dev tooling supports, keeping design and code in sync from day one.
Primitive tokens hold raw values (e.g., blue/500 → #3B82F6). Semantic tokens map those primitives to intent (e.g., action/primary). Component tokens go one level deeper, giving each UI element its own named slot (e.g., button/primary/background/default).
Most token types are generated as Figma Variables. Typography is an exception — it creates Figma text styles instead. Pro users can edit semantic and component token mappings for more granular control before generating.