26 KiB
26 KiB
Матрица совместимости с Figma
Пофункциональное сравнение возможностей Figma Design с текущим статусом реализации в OpenPencil.
::: tip Обозначения статуса ✅ Поддерживается — функция работает полностью · 🟡 Частично — основное поведение есть, некоторые подфункции отсутствуют · 🔲 Пока не реализовано :::
Покрытие: 94 из 158 функций Figma затронуты — 76 ✅ полностью, 18 🟡 частично, 64 🔲 пока нет. Обновлено: 2026-03-07.
Интерфейс и навигация
| Функция | Статус | Примечания |
|---|---|---|
| Панель инструментов | ✅ | Нижняя панель (стиль UI3): Выделение, Фрейм, Секция, Прямоугольник, Эллипс, Линия, Текст, Рука, Перо |
| Панель слоёв (левая боковая) | ✅ | Древовидное представление со сворачиванием, перетаскиванием, переключением видимости; изменяемая ширина |
| Панель страниц | ✅ | Добавление, удаление, переименование страниц; состояние области видимости для каждой страницы |
| Панель свойств (правая боковая) | ✅ | Секции: Внешний вид, Заливка, Обводка, Эффекты, Типографика, Макет, Позиция; изменяемая ширина |
| Масштабирование и панорамирование | ✅ | Ctrl + scroll, pinch, ⌘+ / ⌘− / ⌘0, space+drag, средняя кнопка мыши, инструмент «Рука» (H) |
| Линейки канваса | ✅ | Верхняя/левая линейки с полосами выделения и координатными метками |
| Цвет фона канваса | ✅ | Настройка фона для каждой страницы через панель свойств |
| Направляющие канваса | 🔲 | Figma поддерживает перетаскиваемые направляющие с линеек |
| Меню действий / палитра команд | 🔲 | Быстрый поиск действий Figma |
| Контекстное меню | ✅ | Правый клик: буфер обмена, z-порядок, группировка, компоненты, видимость, блокировка, перемещение на страницу |
| Горячие клавиши | 🟡 | Основные + компоненты + z-порядок + видимость/блокировка реализованы; Scale, Arrow, Pencil, отражение, форматирование текста пока нет |
| Поиск и замена | 🔲 | Поиск/замена текста по всему документу |
| Вид контуров слоёв | 🔲 | Каркасный вид всех слоёв |
| Пользовательские миниатюры файлов | 🔲 | Миниатюра генерируется при экспорте, но без выбора пользовательской |
| Настройки шага сдвига | 🔲 | По умолчанию 1px/10px; Figma позволяет настроить малый/большой шаг |
| Меню приложения (режим браузера) | ✅ | Меню Файл, Редактирование, Вид, Объект, Текст, Упорядочить; Tauri использует нативные меню |
| ИИ-инструменты | 🟡 | 90+ инструментов через Anthropic, OpenAI, Google AI, OpenRouter + MCP-сервер; нет генерации изображений ИИ и ИИ-поиска |
Слои и фигуры
| Функция | Статус | Примечания |
|---|---|---|
| Инструменты фигур (Прямоугольник, Эллипс, Линия, Многоугольник, Звезда) | ✅ | Все базовые типы; настраиваемое количество сторон многоугольника и внутренний радиус звезды |
| Фреймы | ✅ | Обрезка содержимого, независимая система координат |
| Группы | ✅ | ⌘G для группировки, ⇧⌘G для разгруппировки |
| Секции | ✅ | Заголовки, автоматическое включение перекрывающих узлов, адаптивный текст по яркости |
| Инструмент дуги (дуги, полукруги, кольца) | ✅ | arcData с начальным/конечным углом и внутренним радиусом |
| Инструмент «Карандаш» (рисование от руки) | 🔲 | Инструмент свободного рисования Figma |
| Маски | 🔲 | Маски фигур для обрезки слоёв |
| Типы слоёв и иерархия | ✅ | 17 типов узлов, плоская Map + дерево родитель-потомок |
| Выделение слоёв | ✅ | Клик, shift-клик, выделение рамкой |
| Выравнивание и позиция | ✅ | Позиция, поворот, размеры в панели свойств |
| Копирование и вставка объектов | ✅ | Стандартный буфер обмена + бинарный формат Figma Kiwi; Копировать как текст/SVG/PNG/JSX |
| Пропорциональное масштабирование | 🟡 | Shift-resize сохраняет пропорции; нет отдельного инструмента Scale (K) |
| Блокировка/разблокировка слоёв | ✅ | ⇧⌘L переключает блокировку; заблокированные узлы нельзя выделить/переместить с канваса |
| Переключение видимости слоя | ✅ | Иконка глаза в панели слоёв + горячая клавиша ⇧⌘H |
| Переименование слоёв | ✅ | Двойной клик для переименования в панели слоёв; Enter/Escape/blur для подтверждения |
| На передний/задний план | ✅ | Горячие клавиши ] и [; также в контекстном меню |
| Переместить на страницу | ✅ | Перемещение выделенных узлов между страницами через контекстное меню |
| Ограничения (адаптивное изменение размера) | 🔲 | Привязка краёв/центра при изменении размера родителя |
| Умное выделение (распределение/выравнивание) | 🔲 | Равномерное распределение и выравнивание множественного выделения |
| Направляющие макета (столбцы, строки, сетка) | 🔲 | Наложение столбцов/строк/сетки на фреймы |
| Измерение расстояний между слоями | 🔲 | Alt-наведение для показа расстояний |
| Массовое редактирование объектов | ✅ | Панель свойств для множественного выделения: позиция, размер, внешний вид, заливка, обводка, эффекты; общие значения отображаются, различающиеся показывают «Mixed» |
| Поиск совпадающих объектов | 🔲 | Поиск похожих слоёв |
| Копирование/вставка свойств | 🔲 | Копирование заливки/обводки/эффектов между слоями |
| Отношения родитель-потомок | ✅ | Полная иерархия с parentIndex, перенос через перетаскивание |
Векторные инструменты
| Функция | Статус | Примечания |
|---|---|---|
| Векторные сети | ✅ | Figma-совместимая модель, не простые контуры |
| Инструмент «Перо» | ✅ | Угловые точки, кривые Безье, открытые/замкнутые контуры |
| Редактирование векторных слоёв | 🟡 | Создание работает; расширенное редактирование вершин (изгиб, удаление точек, соединение) ограничено |
| Булевые операции (Объединение, Вычитание, Пересечение, Исключение) | 🔲 | Комбинирование фигур булевыми операциями |
| Сведение слоёв | 🔲 | Объединение векторных путей в один |
| Преобразование обводок в контуры | 🔲 | Команда Outline Stroke |
| Преобразование текста в контуры | 🔲 | Преобразование текста в векторные контуры |
| Инструмент построения фигур | 🔲 | Интерактивный булевый инструмент |
| Смещение контура | 🔲 | Вдвигание/выдвигание векторного контура |
| Упрощение контура | 🔲 | Уменьшение количества точек вектора |
Текст и типографика
| Функция | Статус | Примечания |
|---|---|---|
| Текстовый инструмент и редактирование | ✅ | Нативное редактирование на канвасе, phantom textarea, курсор/выделение/выделение слова, перетаскивание для выделения, двойной/тройной клик, стили (⌘B / I / U, кнопка S) |
| Рендеринг текста (Paragraph API) | ✅ | CanvasKit Paragraph для формирования, переноса строк, метрик |
| Загрузка шрифтов (системные) | ✅ | Inter по умолчанию, font-kit в Tauri с кешем OnceLock + предзагрузка, queryLocalFonts в браузере |
| Семейство и начертание шрифта | ✅ | FontPicker с виртуальной прокруткой, поиском, CSS-превью; выбор начертания в панели свойств |
| Размер шрифта и межстрочный интервал | ✅ | Редактируемые в секции типографики |
| Выравнивание текста | 🟡 | Базовое выравнивание; Figma имеет вертикальное выравнивание и режимы auto-width/height |
| Стили текста | 🟡 | Посимвольное жирный/курсив/подчёркивание/зачёркивание (⌘B / I / U, кнопка 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 |
| Переключение авто-макета (⇧A) | ✅ | Включение на фрейме или оборачивание выделения |
| Отступ (расстояние между дочерними) | ✅ | Настраиваемый в панели свойств |
| Паддинг (единый и по сторонам) | ✅ | Все четыре стороны независимо |
| Выравнивание содержимого (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 ограничения для дочерних авто-макета |
Компоненты и дизайн-системы
| Функция | Статус | Примечания |
|---|---|---|
| Создание компонентов | 🟡 | ⌥⌘K создаёт из фрейма/группы или оборачивает выделение; нет UI свойств компонентов |
| Наборы компонентов | 🟡 | ⇧⌘K объединяет компоненты; пунктирная фиолетовая рамка; нет редактирования свойств вариантов |
| Экземпляры компонентов | 🟡 | Создание экземпляра через контекстное меню с клонированием и сопоставлением componentId; живая синхронизация; нет UI редактирования переопределений |
| Варианты | 🔲 | Переключение вариантов и выбор по свойствам |
| Свойства компонентов | 🔲 | Boolean, text, instance swap свойства |
| Распространение переопределений | ✅ | Изменения главного компонента распространяются на все экземпляры; переопределения сохраняются |
| Переменные (color, number, string, boolean) | 🟡 | COLOR полный UI (диалог, TanStack Table, инлайн-редактирование, отмена/повтор, демо-коллекции); FLOAT/STRING/BOOLEAN определены, но без UI редактирования |
| Коллекции и режимы переменных | 🟡 | Коллекции, режимы, переключение activeMode работают; нет UI тем на переменных |
| Стили (цвет, текст, эффект, макет) | 🔲 | Переиспользуемые именованные пресеты стилей |
| Библиотеки (публикация, обмен, обновление) | 🔲 | Общие библиотеки компонентов/стилей |
| Отсоединение экземпляра | ✅ | ⌥⌘B преобразует экземпляр обратно во фрейм |
| Переход к главному компоненту | ✅ | Навигация к исходному компоненту, в том числе на другую страницу |
Прототипирование
| Функция | Статус | Примечания |
|---|---|---|
| Прототипные связи | 🔲 | Планируется на Фазу 6 |
| Триггеры (клик, наведение, перетаскивание и т.д.) | 🔲 | Планируется на Фазу 6 |
| Действия (переход, оверлей, прокрутка и т.д.) | 🔲 | Планируется на Фазу 6 |
| Анимации и переходы | 🔲 | Планируется на Фазу 6 |
| Smart Animate | 🔲 | Авто-анимация совпадающих слоёв |
| Оверлеи | 🔲 | Модальные окна/поповеры в прототипе |
| Прокрутка и переполнение | 🔲 | Прокручиваемые фреймы в прототипах |
| Потоки прототипа | 🔲 | Именованные начальные точки |
| Переменные в прототипах | 🔲 | Условная логика на переменных |
| Easing и пружинные анимации | 🔲 | Пользовательские кривые анимации |
| Просмотр и запуск прототипов | 🔲 | Полноэкранный просмотрщик прототипов |
Импорт и экспорт
| Функция | Статус | Примечания |
|---|---|---|
| Импорт файлов .fig | ✅ | Полный Kiwi-кодек: 194 определения, ~390 полей на NodeChange |
| Экспорт файлов .fig | ✅ | Кодирование Kiwi + сжатие Zstd + генерация миниатюры; COMPONENT/COMPONENT_SET маппятся в SYMBOL для round-trip |
| Сохранить / Сохранить как | ✅ | ⌘S / ⇧⌘S; нативные диалоги (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 |
| Паттерны трансформаций | 🔲 | Создание повторяющихся паттернов с трансформациями |