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

<Meta title='@dxtmisha/ru/# UI Figma/! О библиотеке'/>

# Экосистема UI Figma

Система `UI Figma` представляет собой комплексную инфраструктуру для разработки плагинов Figma. Она разработана для устранения барьера между «стороной кода» (backend плагина) и «стороной UI» (frontend), обеспечивая бесшовное взаимодействие, реактивное управление данными и полную типизацию.

В основе системы лежит трехуровневая архитектура, где каждый уровень отвечает за свою часть жизненного цикла плагина.

## Три уровня взаимодействия

### 1. Основа связи (@dxtmisha/figma)
Фундаментальный пакет, определяющий протоколы взаимодействия. Содержит:
- Константы типов сообщений.
- Общие типы данных и интерфейсы.
- Абстрактные классы мессенджеров для стандартизации обмена данными.
- Утилиты для маршрутизации сообщений между UI и песочницей Figma.

### 2. Логика плагина (@dxtmisha/figma-code)
Пакет, работающий в среде выполнения Figma (Sandbox). Это «мозг» плагина, имеющий прямой доступ к Figma API:
- **Анализ элементов**: Классы `FigmaItem` и `FigmaFrame` для глубокого исследования структуры документа.
- **Хранение данных**: `FigmaStorage` для работы с PluginData (хранение данных в самом файле документа).
- **Экспорт**: Инструменты для автоматизированного создания скриншотов и экспорта ресурсов.
- **Синхронизация**: Классы `FigmaTopLevelFrames` и `FigmaFramesSelected` для передачи актуального состояния документа в UI.

### 3. Реактивный интерфейс (@dxtmisha/figma-ref)
Пакет для разработки пользовательского интерфейса на Vue 3. Он превращает асинхронные ответы от плагина в удобные реактивные ссылки (composables):
- **Реактивные хранилища**: `useFigmaStorage` и `useFigmaClientStorage` для мгновенной связи данных UI с хранилищем Figma.
- **Наблюдатели**: `useFigmaUiFrames` для автоматического обновления списка доступных фреймов.
- **Управление выбором**: `useFigmaUiSelected` для связи выделенных элементов в UI со списком выбора в плагине.

## Возможности системы

**Бесшовное взаимодействие**
Разработчику больше не нужно вручную прописывать `postMessage` и слушатели событий. Система берет на себя маршрутизацию и проверку типов.

**Реактивность «из коробки»**
Использование Vue Composition API позволяет строить интерфейс плагина так же просто, как обычное веб-приложение, при этом данные будут автоматически сохраняться в документе Figma.

**Типобезопасность**
Все сообщения и структуры данных строго типизированы, что исключает ошибки при передаче данных между изолированными средами (UI и Sandbox).

## Преимущества использования

- **Ускорение разработки**: Готовая база для типичных задач (выделение, чтение настроек, скриншоты).
- **Чистая архитектура**: Четкое разделение ответственности между бизнес-логикой плагина и его интерфейсом.
- **Масштабируемость**: Легкое добавление новых функций за счет модульной структуры и использования паттерна Messenger.

## Git

[https://github.com/dxtmisha/dxt-ui/tree/main/packages/figma](https://github.com/dxtmisha/dxt-ui/tree/main/packages/figma)
