3ef554ab2d
- Replace the ambiguous Guide section with explicit overview, reference, and development routes while preserving legacy URLs with redirects - Route missing localized content to maintained canonical pages and emit SEO alternates only for real translations - Add parser-backed documentation integrity checks and make the optimized local build the default while retaining a complete production build
141 lines
10 KiB
Markdown
141 lines
10 KiB
Markdown
# Возможности
|
||
|
||
## Файлы Figma .fig
|
||
|
||
Открытие и сохранение нативных файлов Figma напрямую. Конвейер импорта/экспорта использует тот же бинарный кодек Kiwi, что и Figma — 194 определения схемы, ~390 полей на узел. Сохранение по <kbd>⌘</kbd><kbd>S</kbd>, «Сохранить как» по <kbd>⇧</kbd><kbd>⌘</kbd><kbd>S</kbd>.
|
||
|
||
**Копирование и вставка с Figma** — выделите узлы в Figma, <kbd>⌘</kbd><kbd>C</kbd>, переключитесь на OpenPencil, <kbd>⌘</kbd><kbd>V</kbd>. Заливки, обводки, авто-макет, текст, эффекты, радиусы скругления и векторные сети сохраняются. Работает в обоих направлениях.
|
||
|
||
## Рисование и редактирование
|
||
|
||
- **Фигуры** — Прямоугольник (<kbd>R</kbd>), Эллипс (<kbd>O</kbd>), Линия (<kbd>L</kbd>), Многоугольник, Звезда
|
||
- **Инструмент «Перо»** — векторные сети (не простые контуры), кривые Безье с касательными ручками
|
||
- **Текст** — нативное редактирование на канвасе с поддержкой IME, двойной щелчок для входа в режим редактирования
|
||
- **Форматированный текст** — посимвольное выделение жирным (<kbd>⌘</kbd><kbd>B</kbd>), курсивом (<kbd>⌘</kbd><kbd>I</kbd>), подчёркивание (<kbd>⌘</kbd><kbd>U</kbd>), зачёркивание
|
||
- **Авто-макет** — flexbox через Yoga WASM: направление, отступы, заполнение, выравнивание, размеры дочерних элементов. <kbd>⇧</kbd><kbd>A</kbd> для переключения
|
||
- **Компоненты** — создание (<kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd>), наборы компонентов (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>K</kbd>), экземпляры с поддержкой переопределений, живая синхронизация
|
||
- **Переменные** — дизайн-токены с коллекциями, режимами (Light/Dark), типами color/float/string/boolean, привязка переменных
|
||
- **Секции** — организационные контейнеры с автоматическим включением дочерних элементов и заголовками
|
||
|
||
## Панель свойств
|
||
|
||
Контекстно-зависимые вкладки Design | Code | AI:
|
||
|
||
- **Внешний вид** — непрозрачность, радиус скругления (общий или по углам), видимость
|
||
- **Заливка** — сплошная, градиентная (линейная/радиальная/угловая/ромбовидная), изображение
|
||
- **Обводка** — цвет, толщина, выравнивание (внутри/по центру/снаружи), толщина по сторонам, наконечник, соединение, штрих
|
||
- **Эффекты** — тень, внутренняя тень, размытие слоя, размытие фона, размытие переднего плана
|
||
- **Типографика** — выбор шрифта с виртуальной прокруткой и поиском, начертание, размер, выравнивание, кнопки стилей
|
||
- **Макет** — элементы управления авто-макетом при его включении
|
||
- **Экспорт** — масштаб, формат (PNG/JPG/WEBP/SVG), предпросмотр
|
||
|
||
## Рендеринг
|
||
|
||
Skia (CanvasKit WASM) — тот же движок рендеринга, что и у Figma:
|
||
|
||
- Градиентные заливки (линейная, радиальная, угловая, ромбовидная)
|
||
- Заливки изображениями с режимами масштабирования
|
||
- Эффекты с кешированием на уровне узлов
|
||
- Данные дуг (частичные эллипсы, кольца)
|
||
- Отсечение области видимости и переиспользование отрисовки
|
||
- Направляющие привязки с учётом поворота
|
||
- Линейки канваса с выделением выбранных элементов
|
||
- Подсветка при наведении по реальной геометрии
|
||
|
||
## Отмена/Повтор
|
||
|
||
Каждая операция отменяема — создание, удаление, перемещение, изменение размера, изменение свойств, смена родителя, изменение макета, операции с переменными. Используется паттерн обратных команд. <kbd>⌘</kbd><kbd>Z</kbd> / <kbd>⇧</kbd><kbd>⌘</kbd><kbd>Z</kbd>.
|
||
|
||
## Многостраничные документы
|
||
|
||
Добавление, удаление, переименование страниц. Каждая страница имеет независимое состояние области видимости. Двойной щелчок для переименования.
|
||
|
||
## Вкладки файлов
|
||
|
||
Открытие нескольких документов во вкладках. <kbd>⌘</kbd><kbd>T</kbd> новая вкладка, <kbd>⌘</kbd><kbd>W</kbd> закрыть, <kbd>⌘</kbd><kbd>O</kbd> открыть файл.
|
||
|
||
## Экспорт
|
||
|
||
- **Изображения** — PNG, JPG, WEBP с настраиваемым масштабом (0.5×–4×). Через панель, контекстное меню или <kbd>⇧</kbd><kbd>⌘</kbd><kbd>E</kbd>
|
||
- **SVG** — фигуры, текст со стилями, градиенты, эффекты, режимы наложения
|
||
- **Tailwind JSX** — HTML с утилитарными классами Tailwind v4, готовый для React или Vue
|
||
- **Копировать как** — текст, SVG, PNG (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>C</kbd>) или JSX через контекстное меню
|
||
|
||
CLI: `openpencil export design.fig -f jsx --style tailwind`
|
||
|
||
## Чат с ИИ
|
||
|
||
Нажмите <kbd>⌘</kbd><kbd>J</kbd>, чтобы открыть ИИ-ассистента. 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 с незнакомыми шрифтами.
|