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

<Meta title='@dxtmisha/en/# UI Figma/# Working with Frames'/>

# Working with Frames

The library provides tools for managing the list of frames on the current Figma page and tracking selected elements. This allows you to build complex navigation interfaces and bulk selection systems within your plugin.

## Backend (Backend / plugin/code.ts)

For automatic frame data synchronization, the corresponding handlers must be initialized on the plugin side.

### Initialization
```typescript
import { FigmaTopLevelFrames, FigmaFramesSelected } from '@dxtmisha/figma-code'

// Activate listeners for frame list and selection management
FigmaTopLevelFrames.send()
FigmaFramesSelected.send()
```

## Interface (UI / Iframe)

Data about all frames on the page and tools for managing the plugin's internal selection list are available in the interface.

### Page Frame List (Vue)
Allows you to retrieve a list of all frames and sections at the root of the current page with screenshots.

```typescript
import { useFigmaUiFrames } from '@dxtmisha/figma-ref'

const { frames, loading } = useFigmaUiFrames()

/* frames.value contains a list of objects:
  {
    id: string,
    name: string,
    image: Uint8Array | string // JPG screenshot
  }
*/
```

### Plugin Selected Elements (Vue)
A mechanism for tracking and modifying the list of "selected" elements within the plugin's interface. This state is preserved globally at the plugin session level.

```typescript
import { useFigmaUiSelected } from '@dxtmisha/figma-ref'

const { 
  selected,       // List of selected frame IDs
  isSelected,     // Check function: isSelected(id)
  toggleSelected, // Toggle function: toggleSelected(id, boolean)
} = useFigmaUiSelected()

// Example usage:
const active = isSelected('1:123')
const toggle = () => toggleSelected('1:123', !active.value)
```
