@dxtmisha/wiki 0.57.3 → 0.57.6

package/src/media/functional/figma-code/classes/FigmaStorageData/FigmaStorageData.vi.mdx

@@ -0,0 +1,57 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma-code/Classes/FigmaStorageData - Container dữ liệu bộ nhớ'/>
+
+# Lớp `FigmaStorageData`
+
+Một container cấp thấp để quản lý các mục dữ liệu riêng lẻ bên trong các hệ thống lưu trữ của Figma (Bộ nhớ Client hoặc Dữ liệu Plugin). Nó theo dõi các giá trị cùng với thời gian cập nhật của chúng và xử lý logic hết hạn của bộ nhớ đệm (cache).
+
+## Các tính năng chính
+
+- **Theo dõi Cache** — Tự động xác định xem dữ liệu còn hiệu lực hay không dựa trên Thời gian tồn tại (TTL) có thể cấu hình.
+- **Giám sát cập nhật** — Lưu trữ mốc thời gian của lần cập nhật cuối cùng để tạo điều kiện kiểm tra độ tươi mới của dữ liệu.
+- **Sẵn sàng tuần tự hóa** — Cung cấp các phương thức để chuyển đổi dữ liệu sang và từ định dạng lưu trữ tiêu chuẩn (`FigmaStorageDataValue`).
+
+## Khởi tạo
+
+Khởi tạo bằng tên khóa và thời gian cache tùy chọn tính bằng giây.
+
+```typescript
+import { FigmaStorageData } from '@dxtmisha/figma-code'
+
+// Cache trong 1 giờ (3600 giây)
+const dataContainer = new FigmaStorageData<string>('user-name', 3600)
+```
+
+## Các phương thức
+
+### Kiểm tra trạng thái
+
+- `isNull(): boolean` — Kiểm tra xem giá trị hiện tại có phải là null hoặc undefined không.
+- `isCache(): boolean` — Kiểm tra xem dữ liệu có nằm trong thời gian tồn tại cho phép của cache không.
+- `isValue(): boolean` — Trả về true nếu giá trị được xác định và cache còn hiệu lực.
+
+### Truy cập dữ liệu (Accessors)
+
+- `get(): T | undefined` — Trả về giá trị hiện tại.
+- `getAge(): number | undefined` — Trả về mốc thời gian của lần cập nhật cuối cùng.
+- `getName(): string` — Trả về tên khóa lưu trữ duy nhất (có tiền tố).
+- `getCache(): number | undefined` — Trả về thời gian cache đã cấu hình.
+
+### Các phương thức sửa đổi (Modifiers)
+
+- `set(value?: T, age?: number): this` — Thiết lập thủ công cả giá trị và thời gian.
+- `setByObject(value?: FigmaStorageDataValue<T>): this` — Thiết lập dữ liệu từ một đối tượng lưu trữ.
+- `update(value?: T): this` — Cập nhật giá trị và đặt thời gian thành mốc thời gian hiện tại.
+- `remove(): this` — Xóa giá trị và thời gian.
+
+### Chuyển đổi (Conversion)
+
+- `toValue(): FigmaStorageDataValue<T>` — Chuyển đổi trạng thái hiện tại thành một đối tượng tương thích với bộ nhớ.
+
+## Các kiểu dữ liệu
+
+#### `FigmaStorageDataValue<T>`
+Cấu trúc được sử dụng để lưu trữ bền vững.
+- `value: T` — Dữ liệu thực tế.
+- `age: number` — Mốc thời gian (ms) khi dữ liệu được lưu.

package/src/media/functional/figma-code/classes/FigmaTopLevelFrames/FigmaTopLevelFrames.en.mdx

@@ -1,45 +1,42 @@
-import {Meta} from '@storybook/addon-docs/blocks'
+import { Meta, Source } from '@storybook/addon-docs/blocks'
 
-<Meta title='@dxtmisha/en/figma-code/Classes/FigmaTopLevelFrames - Top-Level Frame Management'/>
+<Meta title='@dxtmisha/en/figma-code/Classes/FigmaTopLevelFrames - Managing top-level frames'/>
 
-# FigmaTopLevelFrames Class
+# Class `FigmaTopLevelFrames`
 
-A static utility class for managing, caching, and communicating the list of top-level frames within the Figma plugin environment. It bridges the gap between the Figma document structure and the plugin UI via a dedicated messenger.
+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 Caching** — Efficiently manages a singleton-like cache of formatted frame data.
-- **Messenger Integration** — Simplifies bidirectional communication between the plugin and the UI regarding frame lists.
-- **Node Processing** — Leverages `FigmaFrame` to extract and format core node properties (ID, name, JPG export) for UI display.
+- **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.
 
-## Static Methods
+## Initialization
 
-### `getListData`
-
-Retrieves and caches the formatted list of top-level frames. It processes each main frame from the current page, extracting its ID, name, and exporting it to a JPG format.
-
-**Returns:** `Promise<UiFigmaFramesList>` — A promise that resolves to the array of formatted frame data.
+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
-const frames = await FigmaTopLevelFrames.getListData()
+import { FigmaTopLevelFrames } from '@dxtmisha/figma-code'
+
+// Setup listener for UI requests
+FigmaTopLevelFrames.send()
 ```
 
-### `send`
+## Methods
 
-Sets up a listener for frame requests using the plugin messenger. When the `UI_FIGMA_FRAMES_POST_NAME` message is received from the UI, it automatically fetches the latest data and posts it back.
+### Data Retrieval
 
-**Returns:** `void`
+- `static get(): Promise<UiFigmaFramesList>` — Retrieves, formats, and caches the list of top-level frames.
 
-```typescript
-FigmaTopLevelFrames.send()
-```
+### Communication
 
-## Types
+- `static send(): void` — Initializes `FigmaPluginMessenger` listeners to handle frame list requests from the UI.
 
-### `UiFigmaFramesList`
+## Data Types
 
-An array of objects representing the processed frame data for the UI.
-- `id: string` — Unique Figma node ID.
-- `name: string` — Display name of the frame.
-- `image: Uint8Array | string` — Exported JPG data.
-- `item: FigmaItem` — The wrapped `FigmaItem` instance for further operations.
+#### `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.

package/src/media/functional/figma-code/classes/FigmaTopLevelFrames/FigmaTopLevelFrames.ru.mdx

@@ -1,45 +1,42 @@
-import {Meta} from '@storybook/addon-docs/blocks'
+import { Meta, Source } from '@storybook/addon-docs/blocks'
 
 <Meta title='@dxtmisha/ru/figma-code/Classes/FigmaTopLevelFrames - Управление фреймами верхнего уровня'/>
 
-# Класс FigmaTopLevelFrames
+# Класс `FigmaTopLevelFrames`
 
-Статический утилитарный класс для управления, кэширования и передачи списка фреймов верхнего уровня в среде плагина Figma. Он служит связующим звеном между структурой документа Figma и UI плагина через выделенный мессенджер.
+Статический утилитарный класс для управления и синхронизации списка фреймов и секций верхнего уровня на текущей странице Figma. Он форматирует узлы в упрощенный список для отображения в интерфейсе плагина.
 
 ## Ключевые особенности
 
-- **Автоматическое кэширование** — эффективно управляет кэшем отформатированных данных фреймов по принципу синглтона.
-- **Интеграция с мессенджером** — упрощает двустороннюю связь между плагином и UI относительно списков фреймов.
-- **Обработка узлов** — использует `FigmaFrame` для извлечения и форматирования основных свойств узлов (ID, имя, экспорт в JPG) для отображения в UI.
+- **Автоматическая генерация списка** — Автоматически определяет фреймы и секции, находящиеся в корне текущей страницы.
+- **Визуальные данные** — Экспортирует скриншоты в формате JPG для каждого фрейма, обеспечивая визуальный предпросмотр в UI.
+- **Интеграция сообщений** — Метод `send()` настраивает слушателей для автоматического ответа на запросы списка фреймов из UI.
 
-## Статические методы
+## Инициализация
 
-### `getListData`
-
-Получает и кэширует отформатированный список фреймов верхнего уровня. Он обрабатывает каждый основной фрейм с текущей страницы, извлекая его ID, имя и экспортируя его в формат JPG.
-
-**Возвращает:** `Promise<UiFigmaFramesList>` — Промис, который разрешается в массив отформатированных данных фреймов.
+Поскольку это статический класс, создание экземпляра не требуется. Как правило, достаточно вызвать настройку связи в основном файле плагина.
 
 ```typescript
-const frames = await FigmaTopLevelFrames.getListData()
+import { FigmaTopLevelFrames } from '@dxtmisha/figma-code'
+
+// Настройка слушателя для запросов из UI
+FigmaTopLevelFrames.send()
 ```
 
-### `send`
+## Методы
 
-Настраивает прослушиватель запросов фреймов с помощью мессенджера плагина. При получении сообщения `UI_FIGMA_FRAMES_POST_NAME` из UI, он автоматически получает актуальные данные и отправляет их обратно.
+### Получение данных
 
-**Возвращает:** `void`
+- `static get(): Promise<UiFigmaFramesList>` — Извлекает, форматирует и кэширует список фреймов верхнего уровня.
 
-```typescript
-FigmaTopLevelFrames.send()
-```
+### Связь
 
-## Типы
+- `static send(): void` — Инициализирует слушателей `FigmaPluginMessenger` для обработки запросов списка фреймов из UI.
 
-### `UiFigmaFramesList`
+## Типы данных
 
-Массив объектов, представляющих обработанные данные фреймов для UI.
-- `id: string` — уникальный ID узла Figma.
-- `name: string` — отображаемое имя фрейма.
-- `image: Uint8Array | string` — экспортированные данные JPG.
-- `item: FigmaItem` — экземпляр обертки `FigmaItem` для дальнейших операций.
+#### `UiFigmaFramesList`
+Массив объектов, представляющих фреймы верхнего уровня.
+- `name: string` — Имя фрейма.
+- `id: string` — Уникальный ID фрейма.
+- `image: Uint8Array | string` — Экспортированный скриншот фрейма в формате JPG.

package/src/media/functional/figma-code/classes/FigmaTopLevelFrames/FigmaTopLevelFrames.vi.mdx

@@ -1,45 +1,42 @@
-import {Meta} from '@storybook/addon-docs/blocks'
+import { Meta, Source } from '@storybook/addon-docs/blocks'
 
-<Meta title='@dxtmisha/vi/figma-code/Classes/FigmaTopLevelFrames - Quản lý frame cấp cao nhất'/>
+<Meta title='@dxtmisha/vi/figma-code/Classes/FigmaTopLevelFrames - Quản lý các frame cấp cao nhất'/>
 
-# Lớp FigmaTopLevelFrames
+# Lớp `FigmaTopLevelFrames`
 
-Một lớp tiện ích tĩnh (static utility class) dùng để quản lý, lưu trữ bộ nhớ đệm (cache) và truyền tải danh sách các frame cấp cao nhất trong môi trường plugin Figma. Nó đóng vai trò là cầu nối giữa cấu trúc tài liệu Figma và giao diện người dùng (UI) của plugin thông qua một messenger chuyên dụng.
+Một lớp tiện ích tĩnh để quản lý và đồng bộ hóa danh sách các frame và section cấp cao nhất trên trang Figma hiện tại. Nó định dạng các node thành một danh sách đơn giản hóa để hiển thị trong giao diện người dùng (UI) của plugin.
 
 ## Các tính năng chính
 
-- **Tự động lưu bộ nhớ đệm** — Quản lý hiệu quả bộ nhớ đệm của dữ liệu frame đã được định dạng theo mô hình singleton.
-- **Tích hợp Messenger** — Đơn giản hóa việc giao tiếp hai chiều giữa plugin và giao diện người dùng về danh sách các frame.
-- **Xử lý các Node** — Sử dụng `FigmaFrame` để trích xuất và định dạng các thuộc tính cốt lõi của node (ID, tên, xuất JPG) để hiển thị trên UI.
+- **Tạo danh sách tự động** — Tự động xác định các frame và section tại gốc của trang hiện tại.
+- **Dữ liệu hình ảnh** — Xuất ảnh chụp màn hình JPG cho mỗi frame để cung cấp bản xem trước trực quan trong UI.
+- **Tích hợp tin nhắn** — Phương thức `send()` thiết lập các trình lắng nghe để tự động phản hồi các yêu cầu từ UI về danh sách frame.
 
-## Các phương thức tĩnh (Static Methods)
+## Khởi tạo
 
-### `getListData`
-
-Lấy và lưu vào bộ nhớ đệm danh sách các frame cấp cao nhất đã được định dạng. Nó xử lý từng frame chính từ trang hiện tại, trích xuất ID, tên và xuất nó sang định dạng JPG.
-
-**Trả về:** `Promise<UiFigmaFramesList>` — Một promise sẽ trả về mảng dữ liệu frame đã được định dạng.
+Vì đây là một lớp tĩnh, không cần khởi tạo thực thể. Thông thường, bạn chỉ cần gọi thiết lập giao tiếp trong tệp plugin chính của mình.
 
 ```typescript
-const frames = await FigmaTopLevelFrames.getListData()
+import { FigmaTopLevelFrames } from '@dxtmisha/figma-code'
+
+// Thiết lập trình lắng nghe cho các yêu cầu từ UI
+FigmaTopLevelFrames.send()
 ```
 
-### `send`
+## Các phương thức
 
-Thiết lập một listener cho các yêu cầu frame bằng cách sử dụng messenger của plugin. Khi nhận được thông báo `UI_FIGMA_FRAMES_POST_NAME` từ giao diện người dùng (UI), nó sẽ tự động lấy dữ liệu mới nhất và gửi ngược lại cho UI.
+### Truy xuất dữ liệu
 
-**Trả về:** `void`
+- `static get(): Promise<UiFigmaFramesList>` — Truy xuất, định dạng và lưu tạm danh sách các frame cấp cao nhất.
 
-```typescript
-FigmaTopLevelFrames.send()
-```
+### Giao tiếp (Communication)
 
-## Các kiểu dữ liệu (Types)
+- `static send(): void` — Khởi tạo các trình lắng nghe `FigmaPluginMessenger` để xử lý các yêu cầu danh sách frame từ UI.
 
-### `UiFigmaFramesList`
+## Các kiểu dữ liệu
 
-Một mảng các đối tượng đại diện cho dữ liệu frame đã được xử lý cho UI.
-- `id: string` — ID duy nhất của node Figma.
-- `name: string` — Tên hiển thị của frame.
-- `image: Uint8Array | string` — Dữ liệu JPG đã được xuất.
-- `item: FigmaItem` — Instance của `FigmaItem` để thực hiện các thao tác tiếp theo.
+#### `UiFigmaFramesList`
+Một mảng các đối tượng đại diện cho các frame cấp cao nhất.
+- `name: string` — Tên của frame.
+- `id: string` — ID duy nhất của frame.
+- `image: Uint8Array | string` — Ảnh chụp màn hình JPG đã xuất của frame.

package/src/media/functional/figma-code/functions/getFigmaFrameById/getFigmaFrameById.en.mdx

@@ -0,0 +1,28 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma-code/Functions/getFigmaFrameById - Get FigmaFrame by ID'/>
+
+# `getFigmaFrameById`
+
+Returns a `FigmaFrame` object by its identifier.
+
+**Parameters:**
+- `id: string` — The identifier (ID) of the Figma node.
+
+**Returns:**
+`Promise<FigmaFrame | undefined>` — A `FigmaFrame` object or `undefined` if the node was not found.
+
+## Examples
+
+```typescript
+import { getFigmaFrameById } from '@dxtmisha/figma-code'
+
+async function analyzeFrame(frameId: string) {
+  const frame = await getFigmaFrameById(frameId)
+
+  if (frame) {
+    const info = await frame.getMainItemsInfo()
+    console.log('Main items in frame:', info)
+  }
+}
+```

package/src/media/functional/figma-code/functions/getFigmaFrameById/getFigmaFrameById.ru.mdx

@@ -0,0 +1,28 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/figma-code/Functions/getFigmaFrameById - Получение FigmaFrame по ID'/>
+
+# `getFigmaFrameById`
+
+Возвращает объект `FigmaFrame` по его идентификатору.
+
+**Параметры:**
+- `id: string` — Идентификатор (ID) узла Figma.
+
+**Возвращает:**
+`Promise<FigmaFrame | undefined>` — Объект `FigmaFrame` или `undefined`, если узел не найден.
+
+## Примеры
+
+```typescript
+import { getFigmaFrameById } from '@dxtmisha/figma-code'
+
+async function analyzeFrame(frameId: string) {
+  const frame = await getFigmaFrameById(frameId)
+
+  if (frame) {
+    const info = await frame.getMainItemsInfo()
+    console.log('Основные элементы во фрейме:', info)
+  }
+}
+```

package/src/media/functional/figma-code/functions/getFigmaFrameById/getFigmaFrameById.vi.mdx

@@ -0,0 +1,28 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma-code/Functions/getFigmaFrameById - Lấy FigmaFrame bằng ID'/>
+
+# `getFigmaFrameById`
+
+Trả về một đối tượng `FigmaFrame` theo mã định danh của nó.
+
+**Tham số:**
+- `id: string` — Mã định danh (ID) của node Figma.
+
+**Trả về:**
+`Promise<FigmaFrame | undefined>` — Một đối tượng `FigmaFrame` hoặc `undefined` nếu không tìm thấy node.
+
+## Ví dụ
+
+```typescript
+import { getFigmaFrameById } from '@dxtmisha/figma-code'
+
+async function analyzeFrame(frameId: string) {
+  const frame = await getFigmaFrameById(frameId)
+
+  if (frame) {
+    const info = await frame.getMainItemsInfo()
+    console.log('Các mục chính trong frame:', info)
+  }
+}
+```

package/src/media/functional/figma-code/functions/getFigmaItemById/getFigmaItemById.en.mdx

@@ -0,0 +1,43 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma-code/Functions/getFigmaItemById - Get Figma item by ID'/>
+
+# `getFigmaItemById`
+
+An asynchronous utility for retrieving a Figma node by its ID and wrapping it in a `FigmaItem` class instance. This simplifies further interactions with the node, such as type checking, selection, or exporting.
+
+**Parameters:**
+- `id: string` — The identifier (ID) of the Figma node.
+
+**Returns:**
+`Promise<FigmaItem | undefined>` — A `FigmaItem` instance wrapping the node, or `undefined` if the node was not found.
+
+## Types
+
+### FigmaItem
+
+A wrapper class for Figma nodes that provides high-level methods for:
+- Checking node types (`isFrame()`, `isText()`, etc.).
+- Accessing parents and children.
+- Exporting to various formats.
+- Managing selection and viewport focus.
+
+## Examples
+
+<Source
+  language='typescript'
+  code={`
+import { getFigmaItemById } from '@dxtmisha/figma-code'
+
+async function highlightFrame(frameId: string) {
+  const item = await getFigmaItemById(frameId)
+
+  if (item && item.isFrame()) {
+    item.toSelection()
+    console.log('Selected frame:', item.getName())
+  } else {
+    console.log('Frame not found or is not a frame node')
+  }
+}
+  `}
+/>

package/src/media/functional/figma-code/functions/getFigmaItemById/getFigmaItemById.ru.mdx

@@ -0,0 +1,43 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/figma-code/Functions/getFigmaItemById - Получение элемента Figma по ID'/>
+
+# `getFigmaItemById`
+
+Асинхронная утилита для получения узла Figma по его идентификатору и оборачивания его в экземпляр класса `FigmaItem`. Это упрощает дальнейшую работу с узлом, такую как проверка типов, управление выделением или экспорт.
+
+**Параметры:**
+- `id: string` — Идентификатор (ID) узла Figma.
+
+**Возвращает:**
+`Promise<FigmaItem | undefined>` — Экземпляр `FigmaItem`, оборачивающий узел, или `undefined`, если узел не найден.
+
+## Типы
+
+### FigmaItem
+
+Класс-обертка для узлов Figma, предоставляющий высокоуровневые методы для:
+- Проверки типов узлов (`isFrame()`, `isText()` и т.д.).
+- Доступа к родительским и дочерним элементам.
+- Экспорта в различные форматы.
+- Управления выделением и фокусом вьюпорта.
+
+## Примеры
+
+<Source
+  language='typescript'
+  code={`
+import { getFigmaItemById } from '@dxtmisha/figma-code'
+
+async function highlightFrame(frameId: string) {
+  const item = await getFigmaItemById(frameId)
+
+  if (item && item.isFrame()) {
+    item.toSelection()
+    console.log('Выбран фрейм:', item.getName())
+  } else {
+    console.log('Фрейм не найден или не является узлом типа FRAME')
+  }
+}
+  `}
+/>

package/src/media/functional/figma-code/functions/getFigmaItemById/getFigmaItemById.vi.mdx

@@ -0,0 +1,43 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma-code/Functions/getFigmaItemById - Lấy phần tử Figma bằng ID'/>
+
+# `getFigmaItemById`
+
+Một tiện ích bất đồng bộ để lấy một node Figma bằng ID của nó và bọc nó trong một thực thể lớp `FigmaItem`. Điều này giúp đơn giản hóa các tương tác tiếp theo với node, chẳng hạn như kiểm tra kiểu, quản lý lựa chọn hoặc xuất dữ liệu.
+
+**Tham số:**
+- `id: string` — Định danh (ID) của node Figma.
+
+**Trả về:**
+`Promise<FigmaItem | undefined>` — Một thực thể `FigmaItem` bọc node, hoặc `undefined` nếu không tìm thấy node.
+
+## Các kiểu dữ liệu
+
+### FigmaItem
+
+Một lớp bọc cho các node Figma cung cấp các phương thức cấp cao để:
+- Kiểm tra kiểu node (`isFrame()`, `isText()`, v.v.).
+- Truy cập các node cha và con.
+- Xuất dữ liệu sang nhiều định dạng khác nhau.
+- Quản lý lựa chọn và tiêu điểm khung nhìn (viewport).
+
+## Ví dụ
+
+<Source
+  language='typescript'
+  code={`
+import { getFigmaItemById } from '@dxtmisha/figma-code'
+
+async function highlightFrame(frameId: string) {
+  const item = await getFigmaItemById(frameId)
+
+  if (item && item.isFrame()) {
+    item.toSelection()
+    console.log('Đã chọn frame:', item.getName())
+  } else {
+    console.log('Không tìm thấy frame hoặc node không phải là frame')
+  }
+}
+  `}
+/>

package/src/media/functional/figma-code/functions/getFigmaItemByIdOrRoot/getFigmaItemByIdOrRoot.en.mdx

@@ -0,0 +1,30 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma-code/Functions/getFigmaItemByIdOrRoot - Get Figma node or document root'/>
+
+# `getFigmaItemByIdOrRoot`
+
+An asynchronous utility that retrieves a Figma node by its ID. If the ID is not provided or the node is not found, it falls back to the document root (`figma.root`). This is useful for operations that can target either a specific element or the entire document.
+
+**Parameters:**
+- `id?: string` — (Optional) The identifier (ID) of the Figma node.
+
+**Returns:**
+`Promise<T>` — The retrieved Figma node or `figma.root`.
+
+## Examples
+
+<Source
+  language='typescript'
+  code={`
+import { getFigmaItemByIdOrRoot } from '@dxtmisha/figma-code'
+
+async function getStorageNode(id?: string) {
+  // If id is provided, tries to get that node.
+  // Otherwise, returns figma.root.
+  const node = await getFigmaItemByIdOrRoot(id)
+  
+  console.log('Target node name:', node.name)
+}
+  `}
+/>

package/src/media/functional/figma-code/functions/getFigmaItemByIdOrRoot/getFigmaItemByIdOrRoot.ru.mdx

@@ -0,0 +1,30 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/figma-code/Functions/getFigmaItemByIdOrRoot - Получение узла Figma или корня документа'/>
+
+# `getFigmaItemByIdOrRoot`
+
+Асинхронная утилита, которая получает узел Figma по его ID. Если ID не указан или узел не найден, функция возвращает корень документа (`figma.root`). Это удобно для операций, которые могут быть направлены как на конкретный элемент, так и на весь документ в целом.
+
+**Параметры:**
+- `id?: string` — (Опционально) Идентификатор (ID) узла Figma.
+
+**Возвращает:**
+`Promise<T>` — Полученный узел Figma или `figma.root`.
+
+## Примеры
+
+<Source
+  language='typescript'
+  code={`
+import { getFigmaItemByIdOrRoot } from '@dxtmisha/figma-code'
+
+async function getStorageNode(id?: string) {
+  // Если id указан, пытается получить этот узел.
+  // В противном случае возвращает figma.root.
+  const node = await getFigmaItemByIdOrRoot(id)
+  
+  console.log('Имя целевого узла:', node.name)
+}
+  `}
+/>

package/src/media/functional/figma-code/functions/getFigmaItemByIdOrRoot/getFigmaItemByIdOrRoot.vi.mdx

@@ -0,0 +1,30 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/figma-code/Functions/getFigmaItemByIdOrRoot - Lấy node Figma hoặc gốc tài liệu'/>
+
+# `getFigmaItemByIdOrRoot`
+
+Một tiện ích bất đồng bộ lấy một node Figma bằng ID của nó. Nếu ID không được cung cấp hoặc không tìm thấy node, nó sẽ trả về gốc của tài liệu (`figma.root`). Điều này hữu ích cho các hoạt động có thể nhắm vào một phần tử cụ thể hoặc toàn bộ tài liệu.
+
+**Tham số:**
+- `id?: string` — (Tùy chọn) Định danh (ID) của node Figma.
+
+**Trả về:**
+`Promise<T>` — Node Figma được truy xuất hoặc `figma.root`.
+
+## Ví dụ
+
+<Source
+  language='typescript'
+  code={`
+import { getFigmaItemByIdOrRoot } from '@dxtmisha/figma-code'
+
+async function getStorageNode(id?: string) {
+  // Nếu id được cung cấp, cố gắng lấy node đó.
+  // Ngược lại, trả về figma.root.
+  const node = await getFigmaItemByIdOrRoot(id)
+  
+  console.log('Tên node đích:', node.name)
+}
+  `}
+/>

package/src/media/functional/figma-code/functions/makeFigmaFrameSelection/makeFigmaFrameSelection.en.mdx

@@ -0,0 +1,21 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/figma-code/Functions/makeFigmaFrameSelection - Tracking selection'/>
+
+# `makeFigmaFrameSelection`
+
+Activates a global listener for the `selectionchange` event in Figma. It is used to synchronize the state of selected elements between the Figma sandbox (Backend) and the plugin's UI (Frontend).
+
+This function is designed to be used in the Figma plugin's code (Backend). It automatically subscribes to user selection changes. Each time the selection changes, data about the selected elements (including names, IDs, and JPG screenshots) are collected and sent to the User Interface (UI) via the `FigmaPluginMessenger`. This eliminates the need to manually set up event listeners and handle image exports for each selected object.
+
+**Returns:**
+`void`
+
+## Examples
+
+```typescript
+import { makeFigmaFrameSelection } from '@dxtmisha/figma-code'
+
+// Initialization in the plugin code (Backend)
+makeFigmaFrameSelection()
+```

package/src/media/functional/figma-code/functions/makeFigmaFrameSelection/makeFigmaFrameSelection.ru.mdx

@@ -0,0 +1,21 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/figma-code/Functions/makeFigmaFrameSelection - Отслеживание выделения'/>
+
+# `makeFigmaFrameSelection`
+
+Активирует глобальный слушатель события `selectionchange` в Figma. Используется для синхронизации состояния выбранных элементов между песочницей Figma (Backend) и интерфейсом плагина (Frontend).
+
+Функция предназначена для использования на стороне кода (Backend) плагина Figma. Она автоматически подписывается на изменения выделения пользователя. При каждом изменении данные о выбранных элементах (включая имена, идентификаторы и скриншоты в формате JPG) собираются и отправляются в пользовательский интерфейс (UI) через `FigmaPluginMessenger`. Это избавляет от необходимости вручную настраивать слушатели событий и обрабатывать экспорт изображений для каждого выбранного объекта.
+
+**Возвращает:**
+`void`
+
+## Примеры
+
+```typescript
+import { makeFigmaFrameSelection } from '@dxtmisha/figma-code'
+
+// Инициализация в коде плагина (Backend)
+makeFigmaFrameSelection()
+```