Возможности

Файлы Figma .fig

Открытие и сохранение нативных файлов Figma напрямую. Конвейер импорта/экспорта использует тот же бинарный кодек Kiwi, что и Figma — 194 определения схемы, ~390 полей на узел. Сохранение по ⌘S, «Сохранить как» по ⇧⌘S.

Копирование и вставка с Figma — выделите узлы в Figma, ⌘C, переключитесь на OpenPencil, ⌘V. Заливки, обводки, авто-макет, текст, эффекты, радиусы скругления и векторные сети сохраняются. Работает в обоих направлениях.

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

• Фигуры — Прямоугольник (R), Эллипс (O), Линия (L), Многоугольник, Звезда
• Инструмент «Перо» — векторные сети (не простые контуры), кривые Безье с касательными ручками
• Текст — нативное редактирование на канвасе с поддержкой IME, двойной щелчок для входа в режим редактирования
• Форматированный текст — посимвольное выделение жирным (⌘B), курсивом (⌘I), подчёркивание (⌘U), зачёркивание
• Авто-макет — flexbox через Yoga WASM: направление, отступы, заполнение, выравнивание, размеры дочерних элементов. ⇧A для переключения
• Компоненты — создание (⌥⌘K), наборы компонентов (⇧⌘K), экземпляры с поддержкой переопределений, живая синхронизация
• Переменные — дизайн-токены с коллекциями, режимами (Light/Dark), типами color/float/string/boolean, привязка переменных
• Секции — организационные контейнеры с автоматическим включением дочерних элементов и заголовками

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

Контекстно-зависимые вкладки Design | Code | AI:

• Внешний вид — непрозрачность, радиус скругления (общий или по углам), видимость
• Заливка — сплошная, градиентная (линейная/радиальная/угловая/ромбовидная), изображение
• Обводка — цвет, толщина, выравнивание (внутри/по центру/снаружи), толщина по сторонам, наконечник, соединение, штрих
• Эффекты — тень, внутренняя тень, размытие слоя, размытие фона, размытие переднего плана
• Типографика — выбор шрифта с виртуальной прокруткой и поиском, начертание, размер, выравнивание, кнопки стилей
• Макет — элементы управления авто-макетом при его включении
• Экспорт — масштаб, формат (PNG/JPG/WEBP/SVG), предпросмотр

Рендеринг

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 (⇧⌘C) или JSX через контекстное меню

CLI: open-pencil export design.fig -f jsx --style tailwind

Чат с ИИ

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

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

См. Чат с ИИ для настройки и информации о провайдерах.

MCP-сервер

Подключайте Claude Code, Cursor, Windsurf или любой MCP-клиент для чтения и записи файлов .fig в headless-режиме. 90+ инструментов. Два транспорта: stdio и HTTP.

bun add -g @open-pencil/mcp

{
  "mcpServers": {
    "open-pencil": {
      "command": "openpencil-mcp"
    }
  }
}

См. справочник инструментов MCP для полного списка.

CLI

Инспекция, экспорт и анализ файлов .fig из терминала:

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

Когда запущено десктоп-приложение, можно не указывать файл и управлять живым редактором через RPC:

open-pencil tree                     # Текущий документ
open-pencil export -f png            # Скриншот канваса

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

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

P2P через WebRTC — сервер не нужен. Поделитесь ссылкой и редактируйте вместе.

• Живые курсоры с цветными стрелками и именами
• Аватары присутствия
• Режим следования — нажмите на участника, чтобы следовать за его областью видимости
• Локальное сохранение через IndexedDB
• Безопасные ID комнат через crypto.getRandomValues()

Десктоп и веб

Десктоп — Tauri v2, ~7 МБ. macOS (подписан и нотаризован), Windows, Linux. Нативные меню, офлайн-режим, автосохранение.

Веб — работает на app.openpencil.dev, устанавливается как PWA на мобильных устройствах с адаптированным интерфейсом.

Homebrew:

brew install open-pencil/tap/open-pencil

Автоматическая подстановка Google Fonts

Когда шрифт недоступен локально, OpenPencil автоматически загружает его из Google Fonts. Ручная установка не требуется при открытии файлов .fig с незнакомыми шрифтами.