230 lines
26 KiB
Markdown
230 lines
26 KiB
Markdown
# Матрица совместимости с Figma
|
||
|
||
Пофункциональное сравнение возможностей Figma Design с текущим статусом реализации в OpenPencil.
|
||
|
||
::: tip Обозначения статуса
|
||
✅ Поддерживается — функция работает полностью · 🟡 Частично — основное поведение есть, некоторые подфункции отсутствуют · 🔲 Пока не реализовано
|
||
:::
|
||
|
||
**Покрытие:** 94 из 158 функций Figma затронуты — 76 ✅ полностью, 18 🟡 частично, 64 🔲 пока нет. Обновлено: 2026-03-07.
|
||
|
||
## Интерфейс и навигация
|
||
|
||
| Функция | Статус | Примечания |
|
||
|---------|--------|-------|
|
||
| Панель инструментов | ✅ | Нижняя панель (стиль UI3): Выделение, Фрейм, Секция, Прямоугольник, Эллипс, Линия, Текст, Рука, Перо |
|
||
| Панель слоёв (левая боковая) | ✅ | Древовидное представление со сворачиванием, перетаскиванием, переключением видимости; изменяемая ширина |
|
||
| Панель страниц | ✅ | Добавление, удаление, переименование страниц; состояние области видимости для каждой страницы |
|
||
| Панель свойств (правая боковая) | ✅ | Секции: Внешний вид, Заливка, Обводка, Эффекты, Типографика, Макет, Позиция; изменяемая ширина |
|
||
| Масштабирование и панорамирование | ✅ | <kbd>Ctrl</kbd> + scroll, pinch, <kbd>⌘</kbd><kbd>+</kbd> / <kbd>⌘</kbd><kbd>−</kbd> / <kbd>⌘</kbd><kbd>0</kbd>, space+drag, средняя кнопка мыши, инструмент «Рука» (H) |
|
||
| Линейки канваса | ✅ | Верхняя/левая линейки с полосами выделения и координатными метками |
|
||
| Цвет фона канваса | ✅ | Настройка фона для каждой страницы через панель свойств |
|
||
| Направляющие канваса | 🔲 | Figma поддерживает перетаскиваемые направляющие с линеек |
|
||
| Меню действий / палитра команд | 🔲 | Быстрый поиск действий Figma |
|
||
| Контекстное меню | ✅ | Правый клик: буфер обмена, z-порядок, группировка, компоненты, видимость, блокировка, перемещение на страницу |
|
||
| Горячие клавиши | 🟡 | Основные + компоненты + z-порядок + видимость/блокировка реализованы; Scale, Arrow, Pencil, отражение, форматирование текста пока нет |
|
||
| Поиск и замена | 🔲 | Поиск/замена текста по всему документу |
|
||
| Вид контуров слоёв | 🔲 | Каркасный вид всех слоёв |
|
||
| Пользовательские миниатюры файлов | 🔲 | Миниатюра генерируется при экспорте, но без выбора пользовательской |
|
||
| Настройки шага сдвига | 🔲 | По умолчанию 1px/10px; Figma позволяет настроить малый/большой шаг |
|
||
| Меню приложения (режим браузера) | ✅ | Меню Файл, Редактирование, Вид, Объект, Текст, Упорядочить; Tauri использует нативные меню |
|
||
| ИИ-инструменты | 🟡 | 90+ инструментов через Anthropic, OpenAI, Google AI, OpenRouter + MCP-сервер; нет генерации изображений ИИ и ИИ-поиска |
|
||
|
||
## Слои и фигуры
|
||
|
||
| Функция | Статус | Примечания |
|
||
|---------|--------|-------|
|
||
| Инструменты фигур (Прямоугольник, Эллипс, Линия, Многоугольник, Звезда) | ✅ | Все базовые типы; настраиваемое количество сторон многоугольника и внутренний радиус звезды |
|
||
| Фреймы | ✅ | Обрезка содержимого, независимая система координат |
|
||
| Группы | ✅ | <kbd>⌘</kbd><kbd>G</kbd> для группировки, <kbd>⇧</kbd><kbd>⌘</kbd><kbd>G</kbd> для разгруппировки |
|
||
| Секции | ✅ | Заголовки, автоматическое включение перекрывающих узлов, адаптивный текст по яркости |
|
||
| Инструмент дуги (дуги, полукруги, кольца) | ✅ | arcData с начальным/конечным углом и внутренним радиусом |
|
||
| Инструмент «Карандаш» (рисование от руки) | 🔲 | Инструмент свободного рисования Figma |
|
||
| Маски | 🔲 | Маски фигур для обрезки слоёв |
|
||
| Типы слоёв и иерархия | ✅ | 17 типов узлов, плоская Map + дерево родитель-потомок |
|
||
| Выделение слоёв | ✅ | Клик, shift-клик, выделение рамкой |
|
||
| Выравнивание и позиция | ✅ | Позиция, поворот, размеры в панели свойств |
|
||
| Копирование и вставка объектов | ✅ | Стандартный буфер обмена + бинарный формат Figma Kiwi; Копировать как текст/SVG/PNG/JSX |
|
||
| Пропорциональное масштабирование | 🟡 | Shift-resize сохраняет пропорции; нет отдельного инструмента Scale (K) |
|
||
| Блокировка/разблокировка слоёв | ✅ | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>L</kbd> переключает блокировку; заблокированные узлы нельзя выделить/переместить с канваса |
|
||
| Переключение видимости слоя | ✅ | Иконка глаза в панели слоёв + горячая клавиша <kbd>⇧</kbd><kbd>⌘</kbd><kbd>H</kbd> |
|
||
| Переименование слоёв | ✅ | Двойной клик для переименования в панели слоёв; <kbd>Enter</kbd>/<kbd>Escape</kbd>/blur для подтверждения |
|
||
| На передний/задний план | ✅ | Горячие клавиши ] и [; также в контекстном меню |
|
||
| Переместить на страницу | ✅ | Перемещение выделенных узлов между страницами через контекстное меню |
|
||
| Ограничения (адаптивное изменение размера) | 🔲 | Привязка краёв/центра при изменении размера родителя |
|
||
| Умное выделение (распределение/выравнивание) | 🔲 | Равномерное распределение и выравнивание множественного выделения |
|
||
| Направляющие макета (столбцы, строки, сетка) | 🔲 | Наложение столбцов/строк/сетки на фреймы |
|
||
| Измерение расстояний между слоями | 🔲 | Alt-наведение для показа расстояний |
|
||
| Массовое редактирование объектов | ✅ | Панель свойств для множественного выделения: позиция, размер, внешний вид, заливка, обводка, эффекты; общие значения отображаются, различающиеся показывают «Mixed» |
|
||
| Поиск совпадающих объектов | 🔲 | Поиск похожих слоёв |
|
||
| Копирование/вставка свойств | 🔲 | Копирование заливки/обводки/эффектов между слоями |
|
||
| Отношения родитель-потомок | ✅ | Полная иерархия с parentIndex, перенос через перетаскивание |
|
||
|
||
## Векторные инструменты
|
||
|
||
| Функция | Статус | Примечания |
|
||
|---------|--------|-------|
|
||
| Векторные сети | ✅ | Figma-совместимая модель, не простые контуры |
|
||
| Инструмент «Перо» | ✅ | Угловые точки, кривые Безье, открытые/замкнутые контуры |
|
||
| Редактирование векторных слоёв | 🟡 | Создание работает; расширенное редактирование вершин (изгиб, удаление точек, соединение) ограничено |
|
||
| Булевые операции (Объединение, Вычитание, Пересечение, Исключение) | 🔲 | Комбинирование фигур булевыми операциями |
|
||
| Сведение слоёв | 🔲 | Объединение векторных путей в один |
|
||
| Преобразование обводок в контуры | 🔲 | Команда Outline Stroke |
|
||
| Преобразование текста в контуры | 🔲 | Преобразование текста в векторные контуры |
|
||
| Инструмент построения фигур | 🔲 | Интерактивный булевый инструмент |
|
||
| Смещение контура | 🔲 | Вдвигание/выдвигание векторного контура |
|
||
| Упрощение контура | 🔲 | Уменьшение количества точек вектора |
|
||
|
||
## Текст и типографика
|
||
|
||
| Функция | Статус | Примечания |
|
||
|---------|--------|-------|
|
||
| Текстовый инструмент и редактирование | ✅ | Нативное редактирование на канвасе, phantom textarea, курсор/выделение/выделение слова, перетаскивание для выделения, двойной/тройной клик, стили (<kbd>⌘</kbd><kbd>B</kbd> / <kbd>I</kbd> / <kbd>U</kbd>, кнопка S) |
|
||
| Рендеринг текста (Paragraph API) | ✅ | CanvasKit Paragraph для формирования, переноса строк, метрик |
|
||
| Загрузка шрифтов (системные) | ✅ | Inter по умолчанию, font-kit в Tauri с кешем OnceLock + предзагрузка, queryLocalFonts в браузере |
|
||
| Семейство и начертание шрифта | ✅ | FontPicker с виртуальной прокруткой, поиском, CSS-превью; выбор начертания в панели свойств |
|
||
| Размер шрифта и межстрочный интервал | ✅ | Редактируемые в секции типографики |
|
||
| Выравнивание текста | 🟡 | Базовое выравнивание; Figma имеет вертикальное выравнивание и режимы auto-width/height |
|
||
| Стили текста | 🟡 | Посимвольное жирный/курсив/подчёркивание/зачёркивание (<kbd>⌘</kbd><kbd>B</kbd> / <kbd>I</kbd> / <kbd>U</kbd>, кнопка S); нет переиспользуемых именованных пресетов |
|
||
| Режимы размера текста (auto, fixed, hug) | 🔲 | Режимы auto-width, auto-height, fixed-size Figma |
|
||
| Маркированные и нумерованные списки | 🔲 | Форматирование списков в тексте |
|
||
| Ссылки в тексте | 🔲 | Гиперссылки в текстовом содержимом |
|
||
| Эмодзи и спецсимволы | 🔲 | Рендеринг эмодзи и специальных символов |
|
||
| Возможности OpenType | 🔲 | Лигатуры, стилистические альтернативы, табличные цифры |
|
||
| Вариативные шрифты | 🔲 | Настраиваемые оси шрифта (вес, ширина, наклон) |
|
||
| Поддержка CJK | 🔲 | Рендеринг китайского, японского, корейского текста |
|
||
| Поддержка RTL | 🔲 | Макет текста справа налево |
|
||
| Иконочные шрифты | 🔲 | Обработка глифов иконочных шрифтов |
|
||
|
||
## Цвет, градиенты и изображения
|
||
|
||
| Функция | Статус | Примечания |
|
||
|---------|--------|-------|
|
||
| Палитра цветов (HSV) | ✅ | Квадрат HSV, слайдер оттенка, слайдер прозрачности, ввод hex |
|
||
| Сплошные заливки | ✅ | Hex-цвет с непрозрачностью |
|
||
| Линейный градиент | ✅ | Точки градиента, ручки трансформации |
|
||
| Радиальный градиент | ✅ | Через шейдеры CanvasKit |
|
||
| Угловой градиент | ✅ | Поддержка sweep/conic-градиента |
|
||
| Ромбовидный градиент | ✅ | Четырёхточечный ромбовидный градиент |
|
||
| Заливки изображениями | ✅ | Декодирование из blob-данных с режимами масштабирования (fill, fit, crop, tile) |
|
||
| Заливки паттернами | 🔲 | Повторяющиеся изображения/паттерны |
|
||
| Режимы наложения | 🔲 | Режимы наложения слоёв и заливок (multiply, screen, overlay и т.д.) |
|
||
| Добавление изображений и видео | 🟡 | Заливки изображениями отрисовываются; нет drag-and-drop импорта и поддержки видео |
|
||
| Коррекция свойств изображения | 🔲 | Экспозиция, контраст, насыщенность и т.д. |
|
||
| Обрезка изображения | 🔲 | Интерактивная обрезка изображения |
|
||
| Пипетка | 🔲 | Выбор цвета с канваса |
|
||
| Редактирование цвета смешанного выделения | 🔲 | Изменение цветов разнородного выделения |
|
||
| Цветовые модели (RGB, HSL, HSB, Hex) | 🟡 | HSV + Hex в палитре; нет переключения HSL или RGB |
|
||
|
||
## Эффекты и свойства
|
||
|
||
| Функция | Статус | Примечания |
|
||
|---------|--------|-------|
|
||
| Тень | ✅ | Смещение, радиус размытия, цвет через фильтры CanvasKit |
|
||
| Внутренняя тень | ✅ | Вставная тень |
|
||
| Размытие слоя | ✅ | Гауссово размытие слоя |
|
||
| Размытие фона | ✅ | Размытие содержимого за слоем |
|
||
| Размытие переднего плана | ✅ | Размытие на переднем плане |
|
||
| Толщина обводки | ✅ | Настраиваемая в панели свойств |
|
||
| Наконечник обводки (круглый, квадратный, стрелка) | ✅ | `NONE`, `ROUND`, `SQUARE`, `ARROW_LINES`, `ARROW_EQUILATERAL` |
|
||
| Соединение обводки (miter, bevel, round) | ✅ | Все три типа соединений |
|
||
| Штриховые паттерны | ✅ | Паттерн dash-on/dash-off |
|
||
| Выравнивание обводки | ✅ | Inside/Center/Outside с clip-рендерингом, соответствующим поведению Figma |
|
||
| Индивидуальная толщина обводки по сторонам | ✅ | Top/Right/Bottom/Left с выпадающим селектором сторон |
|
||
| Радиус скругления | ✅ | Единый и поугловой с независимым переключателем в панели свойств |
|
||
| Сглаживание углов (стиль iOS) | 🔲 | Плавное скругление углов Figma |
|
||
| Множественные заливки/обводки на слое | 🔲 | Figma позволяет наслаивать заливки и обводки |
|
||
|
||
## Авто-макет
|
||
|
||
| Функция | Статус | Примечания |
|
||
|---------|--------|-------|
|
||
| Горизонтальный и вертикальный поток | ✅ | Движок Yoga WASM flexbox |
|
||
| Переключение авто-макета (<kbd>⇧</kbd><kbd>A</kbd>) | ✅ | Включение на фрейме или оборачивание выделения |
|
||
| Отступ (расстояние между дочерними) | ✅ | Настраиваемый в панели свойств |
|
||
| Паддинг (единый и по сторонам) | ✅ | Все четыре стороны независимо |
|
||
| Выравнивание содержимого (justify) | ✅ | Start, center, end, space-between |
|
||
| Выравнивание элементов (align) | ✅ | Start, center, end, stretch |
|
||
| Размеры дочерних (fixed, fill, hug) | ✅ | Режимы размера для каждого элемента |
|
||
| Перенос (wrap) | ✅ | Flex wrap для многострочного макета |
|
||
| Grid-поток авто-макета | ✅ | CSS Grid через форк Yoga — настройка колонок/строк, зазоры, объединение ячеек |
|
||
| Комбинированные потоки (вложенные) | ✅ | Вложенные авто-макеты с разными направлениями |
|
||
| Перетаскивание для переупорядочивания в авто-макете | ✅ | Визуальный индикатор вставки |
|
||
| Min/max ширина и высота | 🔲 | Figma поддерживает min/max ограничения для дочерних авто-макета |
|
||
|
||
## Компоненты и дизайн-системы
|
||
|
||
| Функция | Статус | Примечания |
|
||
|---------|--------|-------|
|
||
| Создание компонентов | 🟡 | <kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> создаёт из фрейма/группы или оборачивает выделение; нет UI свойств компонентов |
|
||
| Наборы компонентов | 🟡 | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>K</kbd> объединяет компоненты; пунктирная фиолетовая рамка; нет редактирования свойств вариантов |
|
||
| Экземпляры компонентов | 🟡 | Создание экземпляра через контекстное меню с клонированием и сопоставлением componentId; живая синхронизация; нет UI редактирования переопределений |
|
||
| Варианты | 🔲 | Переключение вариантов и выбор по свойствам |
|
||
| Свойства компонентов | 🔲 | Boolean, text, instance swap свойства |
|
||
| Распространение переопределений | ✅ | Изменения главного компонента распространяются на все экземпляры; переопределения сохраняются |
|
||
| Переменные (color, number, string, boolean) | 🟡 | `COLOR` полный UI (диалог, TanStack Table, инлайн-редактирование, отмена/повтор, демо-коллекции); `FLOAT`/STRING/BOOLEAN определены, но без UI редактирования |
|
||
| Коллекции и режимы переменных | 🟡 | Коллекции, режимы, переключение activeMode работают; нет UI тем на переменных |
|
||
| Стили (цвет, текст, эффект, макет) | 🔲 | Переиспользуемые именованные пресеты стилей |
|
||
| Библиотеки (публикация, обмен, обновление) | 🔲 | Общие библиотеки компонентов/стилей |
|
||
| Отсоединение экземпляра | ✅ | <kbd>⌥</kbd><kbd>⌘</kbd><kbd>B</kbd> преобразует экземпляр обратно во фрейм |
|
||
| Переход к главному компоненту | ✅ | Навигация к исходному компоненту, в том числе на другую страницу |
|
||
|
||
## Прототипирование
|
||
|
||
| Функция | Статус | Примечания |
|
||
|---------|--------|-------|
|
||
| Прототипные связи | 🔲 | Планируется на Фазу 6 |
|
||
| Триггеры (клик, наведение, перетаскивание и т.д.) | 🔲 | Планируется на Фазу 6 |
|
||
| Действия (переход, оверлей, прокрутка и т.д.) | 🔲 | Планируется на Фазу 6 |
|
||
| Анимации и переходы | 🔲 | Планируется на Фазу 6 |
|
||
| Smart Animate | 🔲 | Авто-анимация совпадающих слоёв |
|
||
| Оверлеи | 🔲 | Модальные окна/поповеры в прототипе |
|
||
| Прокрутка и переполнение | 🔲 | Прокручиваемые фреймы в прототипах |
|
||
| Потоки прототипа | 🔲 | Именованные начальные точки |
|
||
| Переменные в прототипах | 🔲 | Условная логика на переменных |
|
||
| Easing и пружинные анимации | 🔲 | Пользовательские кривые анимации |
|
||
| Просмотр и запуск прототипов | 🔲 | Полноэкранный просмотрщик прототипов |
|
||
|
||
## Импорт и экспорт
|
||
|
||
| Функция | Статус | Примечания |
|
||
|---------|--------|-------|
|
||
| Импорт файлов .fig | ✅ | Полный Kiwi-кодек: 194 определения, ~390 полей на `NodeChange` |
|
||
| Экспорт файлов .fig | ✅ | Кодирование Kiwi + сжатие Zstd + генерация миниатюры; `COMPONENT`/COMPONENT_SET маппятся в `SYMBOL` для round-trip |
|
||
| Сохранить / Сохранить как | ✅ | <kbd>⌘</kbd><kbd>S</kbd> / <kbd>⇧</kbd><kbd>⌘</kbd><kbd>S</kbd>; нативные диалоги (Tauri), File System Access API (Chrome/Edge), скачивание (Safari) |
|
||
| Буфер обмена Figma (вставка) | ✅ | Декодирование бинарного Kiwi из буфера обмена Figma |
|
||
| Буфер обмена Figma (копирование) | ✅ | Кодирование бинарного Kiwi, читаемого Figma |
|
||
| Импорт файлов Sketch | 🔲 | Парсинг файлов .sketch |
|
||
| Экспорт Image/SVG/PDF | 🟡 | Экспорт PNG/JPG/WEBP/SVG ✅; экспорт PDF 🔲 |
|
||
| История версий | 🔲 | Просмотр и восстановление предыдущих версий |
|
||
| Копирование ассетов между инструментами | ✅ | Буфер обмена Figma (бинарный Kiwi), копирование как текст/SVG/PNG/JSX |
|
||
|
||
## Plugin API и скриптинг
|
||
|
||
| Функция | Статус | Примечания |
|
||
|---------|--------|-------|
|
||
| Команда eval с Figma Plugin API | ✅ | Headless-выполнение JavaScript с глобальным объектом figma, соответствующим поверхности плагинов Figma |
|
||
|
||
## Совместная работа и Dev Mode
|
||
|
||
| Функция | Статус | Примечания |
|
||
|---------|--------|-------|
|
||
| Комментарии (прикрепление, обсуждение, разрешение) | 🔲 | Планируется на Фазу 6 |
|
||
| Мультиплеер в реальном времени | ✅ | P2P через Trystero + Yjs CRDT, курсоры, режим следования; сервер не нужен |
|
||
| Чат у курсора | 🔲 | Инлайн-чат у курсора |
|
||
| Ветвление и слияние | 🔲 | Ветки версий для файлов дизайна |
|
||
| Dev Mode (инспекция) | 🟡 | Вкладка Code показывает JSX-представление выделения; нет CSS-свойств и спецификаций для передачи |
|
||
| Code Connect | 🔲 | Связь дизайн-компонентов с кодом |
|
||
| Сниппеты кода | 🟡 | Экспорт JSX с подсветкой синтаксиса и копированием; нет сниппетов CSS/Swift/Kotlin |
|
||
| Экспорт Tailwind CSS v4 | ✅ | Экспорт как HTML с утилитарными классами Tailwind из панели Code, CLI или программно |
|
||
| Figma for VS Code | 🔲 | Интеграция с редактором кода |
|
||
| MCP-сервер | ✅ | @open-pencil/mcp с транспортами stdio + HTTP; 87 основных + 3 файловых = 90 инструментов |
|
||
| CLI-инструменты | ✅ | Headless CLI: info, tree, find, export, analyze, node, pages, variables, eval; MCP-сервер со stdio + HTTP |
|
||
|
||
## Figma Draw
|
||
|
||
| Функция | Статус | Примечания |
|
||
|---------|--------|-------|
|
||
| Инструменты иллюстрации | 🔲 | Специализированные инструменты рисования Figma Draw |
|
||
| Паттерны трансформаций | 🔲 | Создание повторяющихся паттернов с трансформациями |
|