Introduction
Learn what Coreframe is, how it works, and why it belongs in your design workflow.
Quickstart
Get up and running in minutes — install the plugin and generate your first design system.
Design Tokens
Explore how Coreframe structures colors, typography, spacing, and other core tokens.
Components
Browse the full component library that Coreframe generates directly inside your Figma file.
Get Started in Four Steps
1
Install the Plugin
Open Figma, search for Coreframe in the plugin marketplace, and install it to your workspace. Launch it from the Plugins menu in any Figma file.
2
Configure Your Tokens
Define your brand’s colors, typography, spacing, and other design tokens inside Coreframe’s token editor. You can start from a preset or build from scratch.
3
Generate Components
With your tokens in place, click Generate to let Coreframe build a fully structured component library — buttons, inputs, cards, and more — directly in your Figma file.
4
Export for Development
Use Coreframe’s developer export tools to output your tokens and components as CSS variables, JSON, or platform-specific code, ready to hand off to your engineering team.
What’s Inside Coreframe
Token System
Define and manage every design decision — colors, spacing, typography, and more — in a single, structured token layer that powers your entire system.
Component Library
Automatically generate a consistent, variant-rich component library built on your tokens, so every element stays in sync as your brand evolves.
Developer Exports
Output production-ready code in the format your team needs — CSS variables, design token JSON, or platform-specific configs — with a single click.