openpencil/packages/docs/ru/overview/features.md

Возможности

Файлы Figma

OpenPencil открывает и сохраняет .fig без предварительного преобразования. Импорт и экспорт используют бинарный кодек Kiwi из формата Figma: 194 определения схемы и около 390 полей для каждого объекта. Для сохранения нажмите ⌘S, для сохранения под новым именем — ⇧⌘S.

Копирование между Figma и OpenPencil: скопируйте объекты в одном редакторе и вставьте в другом. Сохраняются заливки, обводки, автоматическая компоновка, текст, эффекты, радиусы углов и векторные сети. Обмен работает в обе стороны.

Рисование и редактирование

• Фигуры: прямоугольник (R), эллипс (O), линия (L), многоугольник и звезда.
• Перо: векторные сети, кривые Безье и касательные рычаги.
• Текст: редактирование непосредственно на холсте и поддержка IME.
• Форматированный текст: полужирное начертание, курсив, подчёркивание и зачёркивание для отдельных диапазонов.
• Автоматическая компоновка: Flexbox и CSS Grid через Yoga WASM; направление, интервалы, отступы, выравнивание, размеры и дорожки сетки. Включается сочетанием ⇧A.
• Компоненты: создание компонентов и наборов, экземпляры, переопределения и автоматическая синхронизация.
• Переменные: токены дизайна с коллекциями, режимами Light и Dark, типами Color, Float, String и Boolean и привязками.
• Секции: контейнеры верхнего уровня, принимающие пересекающиеся объекты и показывающие подпись.

Панель свойств

Содержимое вкладок «Дизайн», «Код», «AI» и «Проверка» зависит от выделения.

• Внешний вид: прозрачность, общий или отдельный радиус углов и видимость.
• Заливка: сплошной цвет, линейный, радиальный, угловой и ромбический градиенты, а также изображения.
• Обводка: цвет, толщина, выравнивание внутри, по центру или снаружи, отдельная толщина сторон, концы, соединения и штрихи.
• Эффекты: внешняя и внутренняя тени, размытие слоя, фона и переднего плана.
• Типографика: выбор шрифта с поиском и виртуальной прокруткой, начертание, размер, выравнивание и кнопки форматирования.
• Компоновка: параметры автоматической компоновки.
• Экспорт: масштаб, форматы PNG/JPG/WEBP/SVG и предварительный просмотр.
• Код: Design JSX и Tailwind JSX для выделения; Design JSX можно редактировать с двусторонней синхронизацией — код обновляется при изменении слоёв. Элемент под курсором обводит свой слой на холсте, а проблемы дизайна подчёркиваются в том свойстве, которое их вызывает.
• Проверка: проверка дизайна страницы или выделения в реальном времени: низкий контраст, мелкие области нажатия, цвета без привязки к переменным, интервалы вне шкалы. Проблемы отмечаются на холсте, а переменную можно привязать одним щелчком (Checking Designs).

Отрисовка

OpenPencil использует Skia через CanvasKit WASM — тот же графический движок, что и Figma:

• линейные, радиальные, угловые и ромбические градиенты;
• заливки изображениями с разными режимами масштабирования;
• кеширование эффектов отдельных объектов;
• дуги, частичные эллипсы и кольца;
• отсечение объектов за пределами видимой области и повторное использование кистей;
• направляющие привязки с учётом поворота;
• линейки с отметками выделения;
• подсветка при наведении по фактической геометрии.

Отмена и повтор

Можно отменить создание и удаление, перемещение и изменение размера, изменение свойств и родителя, компоновку и операции с переменными. Сочетания: ⌘Z и ⇧⌘Z.

Несколько страниц

Страницы можно добавлять, удалять и переименовывать. Для каждой сохраняются собственные положение и масштаб области просмотра.

Несколько документов

Документы открываются во вкладках. ⌘T создаёт новую вкладку, ⌘W закрывает её, ⌘O открывает файл.

Экспорт

• Изображения: PNG, JPG и WEBP в масштабе от 0,5× до 4× через панель, контекстное меню или ⇧⌘E.
• SVG: фигуры, текст с диапазонами стилей, градиенты, эффекты и режимы наложения.
• Tailwind JSX: HTML с классами Tailwind v4 для React или Vue.
• Копировать как: текст, SVG, PNG или JSX через контекстное меню.

openpencil export design.fig -f jsx --style tailwind

Чат с ИИ

Нажмите ⌘J. Более 90 инструментов создают фигуры, меняют стили и компоновку, работают с компонентами и переменными, выполняют логические операции над фигурами, анализируют токены дизайна и экспортируют ресурсы. Можно подключить Anthropic, OpenAI, Google AI, OpenRouter или совместимую конечную точку.

Вызовы инструментов отображаются как сворачиваемые элементы временной шкалы. Для визуальной проверки помощник экспортирует результат и сопоставляет его с запросом. Все изменения ИИ можно отменить.

Настройка описана в разделе Чат с ИИ.

Сервер MCP

Claude Code, Cursor, Windsurf и другие клиенты MCP могут читать и изменять .fig без интерфейса. Доступно более 90 инструментов и два транспорта: stdio и HTTP.

npm install -g @open-pencil/mcp

Полный список находится в справочнике инструментов MCP.

CLI

openpencil tree design.fig              # Дерево объектов
openpencil find design.fig --type TEXT  # Поиск
openpencil export design.fig -f png     # Экспорт
openpencil analyze colors design.fig    # Анализ цветов
openpencil analyze clusters design.fig  # Повторяющиеся структуры
openpencil eval design.fig -c "..."     # Figma Plugin API

Если настольное приложение запущено, файл можно не указывать: CLI подключится по RPC к открытому документу.

Все команды поддерживают --json. Установка: npm install -g @open-pencil/cli или bun add -g @open-pencil/cli.

Совместная работа

Одноранговое соединение WebRTC не требует центрального сервера. Отправьте ссылку другим участникам и редактируйте документ вместе.

• Указатели участников с цветом и именем.
• Значки присутствия.
• Режим слежения за областью просмотра другого участника.
• Локальное сохранение в IndexedDB.
• Криптографически стойкие идентификаторы комнат через crypto.getRandomValues().

Настольная и веб-версии

Настольное приложение: Tauri v2, около 7 МБ, версии для macOS, Windows и Linux, системные меню, работа без сети и автосохранение.

Веб-приложение: app.openpencil.dev, установка как PWA и интерфейс для сенсорных экранов.

brew install --cask openpencil

Резервная загрузка Google Fonts

Если нужного шрифта нет на компьютере, OpenPencil автоматически загружает его из Google Fonts. При открытии .fig с незнакомыми шрифтами вручную устанавливать их не нужно.