# Возможности
## Файлы 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: `openpencil export design.fig -f jsx --style tailwind`
## Чат с ИИ
Нажмите ⌘J, чтобы открыть ИИ-ассистента. 90+ инструментов для создания фигур, стилизации, управления макетом, работы с компонентами и переменными, булевых операций, анализа дизайн-токенов и экспорта ассетов. Подключайте Anthropic, OpenAI, Google AI, OpenRouter или совместимый эндпоинт.
Вызовы инструментов отображаются как сворачиваемые записи. Визуальная проверка — ассистент рендерит свою работу и сравнивает с запросом. Полная поддержка отмены для всех операций ИИ.
См. [Чат с ИИ](/programmable/ai-chat) для настройки и информации о провайдерах.
## MCP-сервер
Подключайте Claude Code, Cursor, Windsurf или любой MCP-клиент для чтения и записи файлов `.fig` в headless-режиме. 90+ инструментов. Два транспорта: stdio и HTTP.
```sh
npm install -g @open-pencil/mcp
```
```json
{
"mcpServers": {
"open-pencil": {
"command": "openpencil-mcp"
}
}
}
```
См. [справочник инструментов MCP](/programmable/mcp-server) для полного списка.
## CLI
Инспекция, экспорт и анализ файлов `.fig` из терминала:
```sh
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
```
Когда запущено десктоп-приложение, можно не указывать файл и управлять живым редактором через RPC:
```sh
openpencil tree # Текущий документ
openpencil export -f png # Скриншот канваса
```
Все команды поддерживают `--json`. Установка: `npm install -g @open-pencil/cli`
## Совместная работа в реальном времени
P2P через WebRTC — сервер не нужен. Поделитесь ссылкой и редактируйте вместе.
- Живые курсоры с цветными стрелками и именами
- Аватары присутствия
- Режим следования — нажмите на участника, чтобы следовать за его областью видимости
- Локальное сохранение через IndexedDB
- Безопасные ID комнат через `crypto.getRandomValues()`
## Десктоп и веб
**Десктоп** — Tauri v2, ~7 МБ. macOS (подписан и нотаризован), Windows, Linux. Нативные меню, офлайн-режим, автосохранение.
**Веб** — работает на [app.openpencil.dev](https://app.openpencil.dev), устанавливается как PWA на мобильных устройствах с адаптированным интерфейсом.
**Homebrew:**
```sh
brew install open-pencil/tap/open-pencil
```
## Автоматическая подстановка Google Fonts
Когда шрифт недоступен локально, OpenPencil автоматически загружает его из Google Fonts. Ручная установка не требуется при открытии файлов .fig с незнакомыми шрифтами.