import { Meta, Source } from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/en/figma-code/Classes/FigmaTopLevelFrames - Managing top-level frames'/>

# Class `FigmaTopLevelFrames`

A static utility class for managing and synchronizing the list of top-level frames and sections on the current Figma page. It formats the nodes into a simplified list for display in the plugin's UI.

## Key Features

- **Automated List Generation** — Automatically identifies frames and sections at the root of the current page.
- **Visual Data** — Exports JPG screenshots for each frame to provide a visual preview in the UI.
- **Message Integration** — The `send()` method sets up listeners to automatically respond to UI requests for the frame list.

## Initialization

Since this is a static class, no instantiation is required. Typically, you only need to call the communication setup in your main plugin file.

```typescript
import { FigmaTopLevelFrames } from '@dxtmisha/figma-code'

// Setup listener for UI requests
FigmaTopLevelFrames.send()
```

## Methods

### Data Retrieval

- `static get(): Promise<UiFigmaFramesList>` — Retrieves, formats, and caches the list of top-level frames.

### Communication

- `static send(): void` — Initializes `FigmaPluginMessenger` listeners to handle frame list requests from the UI.

## Data Types

#### `UiFigmaFramesList`
An array of objects representing top-level frames.
- `name: string` — The frame's name.
- `id: string` — The frame's unique ID.
- `image: Uint8Array | string` — The exported JPG screenshot of the frame.
