Skip to main content
Coreframe generates each UI component on demand — browse the grid, click a card, and Coreframe scaffolds that component set, binds it to your design tokens, and places it on a dedicated page inside your Figma file. You can generate every component in the library by working through the grid at your own pace, or pick only the components your project needs.

​
Generate components

1

Generate your design tokens first

Make sure you have already run the token generation step. Components bind directly to your Figma variables, so the token collection needs to exist before components are placed. If you haven’t done this yet, head to the Tokens tab and generate your token set.
2

Open the Components tab

In the Coreframe plugin panel, click the Components tab. You’ll see a searchable grid of every available component, organized by category.
3

Browse and filter the component grid

Use the search bar or the category filter pills — Forms, Navigation, Feedback, Data Display, Overlays, and Layout — to explore what’s available. Each card shows a live preview thumbnail and the variant count for that component.
4

Click a component card to generate it

Click any component card to generate that component. Coreframe builds the full variant matrix for that component and places it on the Components page in your Figma file. A spinner appears on the card while generation is in progress.
5

Coreframe creates a Components page

The first time you generate a component, Coreframe creates a page named Components in your Figma file. Subsequent generations add to the same page, grouped by category in a structured layout.
6

Review the documentation frames

Alongside each component set, Coreframe auto-generates a documentation frame showing the component name, a short description, and a variant overview. These frames are ready to share with developers or stakeholders directly inside Figma.
Generate tokens first. Components bind to your Figma variables — if variables don’t exist, Coreframe creates fallback values, but your components won’t update automatically when you change a token value later.

​
Regenerating components

You can re-click any component card at any time — for example, after updating your token values or adding a new color palette. Coreframe finds the existing component set by name and replaces it with a freshly generated version.
Regenerating overwrites the existing component set with the same name. Any local overrides or detached instances will not be updated — only the main component set is replaced.

​
Component dependencies

Some components are composed from other Coreframe components. For example, a Card may include nested Button, Badge, and Avatar instances, and a Modal may depend on Button and Spinner. Coreframe resolves these dependencies automatically: if a required base component hasn’t been generated yet, Coreframe generates it first before building the dependent component. You never have to manage generation order manually.