1
Install from Figma Community
Open Figma Community in your browser or from within Figma. Search for Coreframe and click Open in Figma on the plugin listing. Figma will prompt you to install it — confirm, and it’s immediately available in your plugins menu.
2
Open the plugin
In any Figma file, go to the main menu (the Figma logo in the top-left corner) → Plugins → Coreframe. The plugin panel opens at the right of your canvas. You can also right-click anywhere on the canvas and select Plugins → Coreframe.
3
Configure your colors
In the Tokens tab, select Colors from the sidebar. Enter your brand’s primary color and let Coreframe generate a full color palette — including neutral, semantic, and state colors — automatically. Adjust individual swatches as needed before generating.
4
Generate your tokens
Click Generate on the Colors tab to create Figma variables for your entire color palette. Repeat for any other token categories you need — typography, spacing, grid, border, radius, shadows, and opacity — each with its own tab in the sidebar. Tokens are created as native Figma variables in your file.
5
Generate your components
Switch to the Components tab. Select any component from the list — or generate them all at once — and click Generate. Coreframe builds each component with full variant sets, binds them to your tokens, and places them on a dedicated Components page in your Figma file, alongside auto-generated documentation.
6
Your design system is ready
Your Figma file now contains a complete, token-bound design system. Share it with your team, use the components directly in your designs, or head to the Developer tab to export token files for your codebase.
Next steps
- Learn about all the token types Coreframe generates → Tokens overview
- Explore the full component library → Components overview