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

<Meta title='@dxtmisha/ru/# UI Figma/# Работа с фреймами'/>

# Работа с фреймами

Библиотека предоставляет инструменты для управления списком фреймов на текущей странице Figma и отслеживания выбранных элементов. Это позволяет строить сложные интерфейсы навигации и системы массового выбора внутри плагина.

## Бэкенд (Backend / plugin/code.ts)

Для автоматической синхронизации данных о фреймах необходимо инициализировать соответствующие обработчики на стороне плагина.

### Инициализация
```typescript
import { FigmaTopLevelFrames, FigmaFramesSelected } from '@dxtmisha/figma-code'

// Активация слушателей списка фреймов и управления выбором
FigmaTopLevelFrames.send()
FigmaFramesSelected.send()
```

## Интерфейс (UI / Iframe)

В интерфейсе доступны данные о всех фреймах страницы и инструменты для управления внутренним списком выбора плагина.

### Список фреймов страницы (Vue)
Позволяет получить список всех фреймов и секций в корне текущей страницы со скриншотами.

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

const { frames, loading } = useFigmaUiFrames()

/* frames.value содержит список объектов:
  {
    id: string,
    name: string,
    image: Uint8Array | string // Скриншот JPG
  }
*/
```

### Выбранные элементы плагина (Vue)
Механизм для отслеживания и изменения списка «выбранных» элементов внутри интерфейса плагина. Это состояние сохраняется глобально на уровне сессии плагина.

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

const { 
  selected,       // Список ID выбранных фреймов
  isSelected,     // Функция проверки: isSelected(id)
  toggleSelected, // Функция переключения: toggleSelected(id, boolean)
} = useFigmaUiSelected()

// Пример использования:
const active = isSelected('1:123')
const toggle = () => toggleSelected('1:123', !active.value)
```
