Архитектура
Обзор системы
mermaid graph TB subgraph Tauri["Tauri v2 Shell"] subgraph Editor["Editor (Web)"] UI["Vue 3 UI<br/>Toolbar · Panels · Properties<br/>Layers · Color Picker"] Skia["Skia CanvasKit (WASM, 7MB)<br/>Vector rendering · Text shaping<br/>Effects · Export"] subgraph Core["Core Engine (TS)"] SG[SceneGraph] --- Layout[Layout - Yoga] SG --- Selection Undo[Undo/Redo] --- Constraints Constraints --- HitTest[Hit Testing] end subgraph FileFormat["File Format Layer"] FigIO[".fig import/export"] --- Kiwi[Kiwi codec] Kiwi --- SVG[SVG export] end end MCP["MCP Server (90 tools, stdio+HTTP)"] Collab["P2P Collab (Trystero + Yjs)"] end
Макет редактора
Интерфейс следует макету Figma UI3 — панель инструментов внизу, навигация слева, свойства справа:
- Панель навигации (слева) — Дерево слоёв, панель страниц
- Канвас (центр) — Бесконечный холст с рендерингом CanvasKit, масштабирование/панорамирование
- Панель свойств (справа) — Контекстно-зависимые секции: Внешний вид, Заливка, Обводка, Типографика, Макет, Позиция
- Панель инструментов (внизу) — Выбор инструмента: Выделение, Фрейм, Секция, Прямоугольник, Эллипс, Линия, Текст, Перо, Рука
Компоненты
Рендеринг (CanvasKit WASM)
Тот же движок рендеринга, что и у Figma. CanvasKit обеспечивает GPU-ускоренную 2D-отрисовку с векторными фигурами, формирование текста через Paragraph API, эффекты (тени, размытия, режимы наложения) и экспорт (PNG, SVG). WASM-бинарник размером 7 МБ загружается при запуске и создаёт GPU-поверхность на HTML-канвасе.
Рендерер разбит на специализированные модули в packages/core/src/renderer/: обход сцены, оверлеи, заливки, обводки, фигуры, эффекты, линейки, подписи и удалённые курсоры.
Граф сцены
Плоская Map<string, Node> с ключами в виде строк GUID. Древовидная структура через ссылки parentIndex. Обеспечивает O(1) поиск, эффективный обход, проверку попадания и запросы по прямоугольным областям для выделения рамкой.
Граф порождает типизированные события через nanoevents: node:created, node:updated, node:deleted, node:reparented, node:reordered. Подсистемы подписываются на них вместо ручной привязки — редактор использует их для инвалидации рендера и синхронизации экземпляров компонентов с группировкой через microtask, система совместной работы — для распространения через Yjs.
См. справочник графа сцены для подробностей.
Движок макетов (Yoga WASM)
Yoga от Meta обеспечивает вычисление макета CSS flexbox и grid через форк с поддержкой CSS Grid. Тонкий адаптер сопоставляет имена свойств Figma с эквивалентами Yoga:
| Свойство Figma | Эквивалент Yoga |
|---|---|
stackMode: HORIZONTAL | flexDirection: row |
stackMode: VERTICAL | flexDirection: column |
stackSpacing | gap |
stackPadding | padding |
stackJustify | justifyContent |
stackChildPrimaryGrow | flexGrow |
Формат файлов (Kiwi Binary)
Использует бинарный кодек Kiwi от Figma с 194 определениями message/enum/struct. Импорт: разбор заголовка → декомпрессия Zstd → декодирование Kiwi → NodeChange[] → граф сцены. Экспорт выполняет обратный процесс с генерацией миниатюры.
См. справочник формата файлов для подробностей.
ИИ и инструменты
Инструменты определяются один раз в packages/core/src/tools/, разделённые по доменам: read, create, modify, structure, variables, vector, analyze. У каждого инструмента типизированные параметры и функция execute(figma, args). Адаптеры конвертируют их для:
- ИИ-чат — схемы valibot, мультипровайдер (Anthropic, OpenAI, Google AI, OpenRouter, совместимые эндпоинты)
- MCP-сервер — схемы zod, транспорты stdio + HTTP
- CLI — доступно через команду
eval
90+ основных инструментов + 3 инструмента управления файлами MCP. Включает XPath-запросы (query_nodes), инспекцию JSX (get_jsx, diff_jsx), семантическое описание (describe) и визуальную проверку (export_image возвращает изображения модели).
Отмена/Повтор
Паттерн обратных команд. Перед применением любого изменения затронутые поля сохраняются в снимок. Снимок становится обратной операцией. Группировка объединяет быстрые изменения (например, перетаскивание) в одну запись отмены.
Буфер обмена
Двусторонний буфер обмена, совместимый с Figma. Кодирует/декодирует бинарный формат Kiwi (тот же, что и файлы .fig) через нативные события copy/paste браузера. Обрабатывает масштабирование векторных путей, дочерние элементы экземпляров, определение наборов компонентов и применение переопределений.
P2P-совместная работа
Совместная работа в реальном времени через Trystero (WebRTC) + Yjs CRDT. Без серверного реле — сигнализация через публичные MQTT-брокеры, STUN/TURN для обхода NAT. Протокол Awareness обеспечивает живые курсоры, выделения и присутствие. Локальное сохранение через y-indexeddb.
RPC-мост CLI—приложение
Когда запущено десктоп-приложение, команды CLI подключаются к нему по WebSocket вместо загрузки файла .fig. Сервер автоматизации работает на 127.0.0.1:7600 (HTTP) и 127.0.0.1:7601 (WebSocket). Команды выполняются относительно состояния живого редактора, позволяя скриптам автоматизации и ИИ-агентам взаимодействовать с запущенным приложением.
Что дальше
Полный набор инструментов figma-use
MCP-сервер сейчас предоставляет 90 инструментов. Референсная реализация в figma-use содержит 118. Оставшиеся инструменты охватывают продвинутые ограничения макета, прототипные связи, расширенное редактирование свойств компонентов и массовые операции с документами.
CI-инструменты для дизайна
Headless CLI уже поддерживает analyze colors/typography/spacing/clusters. Далее: интеграция с GitHub Actions для автоматического линтинга дизайна и визуальной регрессии в пулл-реквестах.
Прототипирование
Переходы между фреймами, триггеры взаимодействия (клик, наведение, перетаскивание), управление оверлеями и полноэкранный режим предпросмотра.
Подпись кода для Windows
Бинарные файлы macOS подписаны и нотаризованы с версии v0.6.0. Подпись Windows Authenticode через Azure Code Signing планируется для устранения предупреждения SmartScreen.