> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getcoreframe.site/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Generate Figma UI Components with Coreframe

> Click any component card in Coreframe to generate it, bind it to your design tokens, and place it on the Components page in your Figma file.

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

<Steps>
  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>
</Steps>

<Tip>
  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.
</Tip>

## 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.

<Warning>
  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.
</Warning>

## 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.