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

<Meta title='@dxtmisha/vi/# UI Figma/# Làm việc với Frame'/>

# Làm việc với Frame

Thư viện cung cấp các công cụ để quản lý danh sách các frame trên trang Figma hiện tại và theo dõi các phần tử được chọn. Điều này cho phép bạn xây dựng các giao diện điều hướng phức tạp và hệ thống chọn hàng loạt bên trong plugin của mình.

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

Để đồng bộ hóa dữ liệu frame tự động, các trình xử lý tương ứng phải được khởi tạo ở phía plugin.

### Khởi tạo
```typescript
import { FigmaTopLevelFrames, FigmaFramesSelected } from '@dxtmisha/figma-code'

// Kích hoạt trình lắng nghe cho danh sách frame và quản lý vùng chọn
FigmaTopLevelFrames.send()
FigmaFramesSelected.send()
```

## Giao diện (UI / Iframe)

Dữ liệu về tất cả các frame trên trang và các công cụ để quản lý danh sách vùng chọn nội bộ của plugin có sẵn trong giao diện.

### Danh sách Frame của trang (Vue)
Cho phép bạn lấy danh sách tất cả các frame và section tại thư mục gốc của trang hiện tại kèm theo ảnh chụp màn hình.

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

const { frames, loading } = useFigmaUiFrames()

/* frames.value chứa danh sách các đối tượng:
  {
    id: string,
    name: string,
    image: Uint8Array | string // Ảnh chụp màn hình JPG
  }
*/
```

### Các phần tử được chọn trong Plugin (Vue)
Một cơ chế để theo dõi và sửa đổi danh sách các phần tử "được chọn" trong giao diện của plugin. Trạng thái này được duy trì trên toàn cầu ở cấp độ phiên plugin.

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

const { 
  selected,       // Danh sách ID các frame được chọn
  isSelected,     // Hàm kiểm tra: isSelected(id)
  toggleSelected, // Hàm chuyển đổi: toggleSelected(id, boolean)
} = useFigmaUiSelected()

// Ví dụ sử dụng:
const active = isSelected('1:123')
const toggle = () => toggleSelected('1:123', !active.value)
```
