c3412a44fc
* docs: polish localized documentation - Rewrite Russian documentation for natural terminology and current source parity\n- Continue the Polish editorial pass across guides and SDK references\n- Refresh shared localized SDK API data imports * docs(pl): complete editorial pass - Rewrite the remaining advanced Vue SDK references\n- Refresh the Figma compatibility matrix against the canonical source\n- Align terminology and behavior across every Polish documentation page * docs(de): complete editorial pass - Rewrite German guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix * docs(es): complete editorial pass - Rewrite Spanish guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix * docs(fr): complete editorial pass - Rewrite French guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix * docs: correct localized terminology - Replace unnecessary English prose with natural localized terminology\n- Derive documentation aliases from named directory roots\n- Preserve English only for identifiers, APIs, and exact product terms * docs(it): continue editorial pass - Rewrite Italian user guides and automation documentation\n- Update Vue SDK composables and component references\n- Restore current AI, export, component, and variable behavior * docs(it): complete editorial pass - Finish Italian advanced SDK and reference documentation\n- Refresh the Penpot comparison and Figma compatibility matrix\n- Replace literal machine translations with natural technical prose * docs(pl): refine property panel terminology * docs: refine remaining localized prose - Replace overfitted English prose in Polish feature documentation\n- Rewrite the Russian property-list reference in natural terminology * docs(ru): rewrite Penpot comparison naturally - Replace remaining English prose with natural Russian\n- Preserve code identifiers and library names only where required * docs: rewrite localized feature overviews naturally - Replace avoidable English prose in German, Spanish, and French\n- Keep identifiers and product names unchanged * docs(de): refine property panel terminology * docs: refine Spanish and French SDK terminology * docs(ru): continue full prose audit - Rewrite homepage, setup, navigation, and guide index naturally\n- Restore missing zoom shortcuts * docs(ru): audit user and automation guides - Rewrite selection, collaboration, and automation prose naturally\n- Preserve API identifiers while localizing ordinary terminology * docs(ru): audit CLI inspection and analysis * docs(ru): audit Vue SDK overview and guides * docs(ru): audit Vue SDK API prose - Localize ordinary component and composable terminology\n- Preserve API symbols and code identifiers * docs(ru): audit advanced and gradient API references * docs(ru): finish advanced API prose audit * docs(ru): audit JSX renderer guide * docs(ru): audit CLI export and scripting guides * docs(pl): audit Penpot comparison prose * docs(pl): audit selection and automation guides * docs(pl): audit homepage and variable guides * docs(pl): audit vector, layers, and Pen guides * docs(pl): audit Auto layout and shape guides * docs(pl): audit context menu and export guides * docs(pl): audit JSX and analysis guides * docs(pl): audit AI Chat guide * docs(pl): audit components and CLI inspection * docs(pl): audit scripting and SDK overview prose * docs(pl): audit SDK API indexes * docs(pl): audit SDK component references * docs(pl): audit SDK composable references * docs(ru): refine usePosition terminology * docs(pl): audit advanced SDK references * docs(pl): audit Figma compatibility matrix * docs(pl): finish residual SDK terminology audit * docs(pl): finish component terminology audit * docs(pl): finish SDK guide terminology audit * docs(de): begin full user guide prose audit * docs(de): audit navigation, Pen, and layers guides * docs(de): audit Auto Layout, shapes, menu, and export * docs(de): audit components, text, and vector guides * docs(de): audit variables and automation overview * docs(de): audit AI Chat and collaboration guides * docs(de): audit CLI inspection, analysis, and export * docs(de): audit scripting and JSX guides * docs(de): audit Vue SDK overview and guides * docs(de): audit SDK API indexes * docs(de): audit SDK component references * docs(de): audit SDK composable references * docs(de): audit advanced SDK references * docs(de): audit Penpot comparison prose * docs(de): audit Figma compatibility reference * docs(es): begin full user guide prose audit * docs(es): audit document organization guides * docs(es): audit editing workflow guides * docs(es): audit automation and collaboration prose * docs(es): audit CLI inspection and export guides * docs(es): audit CLI scripting guide * docs(es): audit JSX and feature overview prose * docs(es): audit Penpot comparison prose * docs(es): audit SDK overview and guides * docs(es): begin SDK component reference audit * docs(es): audit SDK navigation component references * docs(es): audit SDK color and layout components * docs(es): begin SDK composable reference audit * docs(es): audit SDK property composable references * docs(es): audit SDK editor composable references * docs(es): begin advanced SDK reference audit * docs(es): audit advanced SDK state references * docs(es): complete advanced SDK reference audit * docs(es): audit Figma compatibility reference * docs(es): complete residual terminology sweep * docs(fr): begin full prose second audit * docs(fr): audit AI and variables prose * docs(fr): audit core user guide prose * docs(fr): audit editing workflow guides * docs(fr): audit CLI and JSX prose * docs(fr): audit Penpot comparison prose * docs(fr): audit SDK overview and guides * docs(fr): begin SDK API reference audit * docs(fr): audit SDK navigation component references * docs(fr): audit SDK color and layout components * docs(fr): begin SDK composable reference audit * docs(fr): audit SDK property composable references * docs(fr): audit editor composables and advanced APIs * docs(fr): audit advanced SDK state references * docs(fr): complete advanced SDK reference audit * docs(fr): audit Figma compatibility reference * docs(fr): complete residual terminology sweep * docs(it): begin full prose second audit * docs(it): audit document workflow guides * docs(it): audit editing and automation prose * docs(it): audit CLI and JSX prose * docs(it): audit Penpot comparison and SDK guides * docs(it): begin SDK API reference audit * docs(it): audit SDK component and state references * docs(it): audit residual SDK references * docs(it): audit Figma compatibility reference * docs(it): complete residual terminology sweep * docs(i18n): verify residual locale terminology
124 lines
9.8 KiB
Markdown
124 lines
9.8 KiB
Markdown
# Возможности
|
||
|
||
## Файлы Figma
|
||
|
||
OpenPencil открывает и сохраняет `.fig` без предварительного преобразования. Импорт и экспорт используют бинарный кодек Kiwi из формата Figma: 194 определения схемы и около 390 полей для каждого объекта. Для сохранения нажмите <kbd>⌘</kbd><kbd>S</kbd>, для сохранения под новым именем — <kbd>⇧</kbd><kbd>⌘</kbd><kbd>S</kbd>.
|
||
|
||
**Копирование между Figma и OpenPencil:** скопируйте объекты в одном редакторе и вставьте в другом. Сохраняются заливки, обводки, автоматическая компоновка, текст, эффекты, радиусы углов и векторные сети. Обмен работает в обе стороны.
|
||
|
||
## Рисование и редактирование
|
||
|
||
- **Фигуры:** прямоугольник (<kbd>R</kbd>), эллипс (<kbd>O</kbd>), линия (<kbd>L</kbd>), многоугольник и звезда.
|
||
- **Перо:** векторные сети, кривые Безье и касательные рычаги.
|
||
- **Текст:** редактирование непосредственно на холсте и поддержка IME.
|
||
- **Форматированный текст:** полужирное начертание, курсив, подчёркивание и зачёркивание для отдельных диапазонов.
|
||
- **Автоматическая компоновка:** Flexbox и CSS Grid через Yoga WASM; направление, интервалы, отступы, выравнивание, размеры и дорожки сетки. Включается сочетанием <kbd>⇧</kbd><kbd>A</kbd>.
|
||
- **Компоненты:** создание компонентов и наборов, экземпляры, переопределения и автоматическая синхронизация.
|
||
- **Переменные:** токены дизайна с коллекциями, режимами Light и Dark, типами Color, Float, String и Boolean и привязками.
|
||
- **Секции:** контейнеры верхнего уровня, принимающие пересекающиеся объекты и показывающие подпись.
|
||
|
||
## Панель свойств
|
||
|
||
Содержимое вкладок «Дизайн», «Код» и «ИИ» зависит от выделения.
|
||
|
||
- **Внешний вид:** прозрачность, общий или отдельный радиус углов и видимость.
|
||
- **Заливка:** сплошной цвет, линейный, радиальный, угловой и ромбический градиенты, а также изображения.
|
||
- **Обводка:** цвет, толщина, выравнивание внутри, по центру или снаружи, отдельная толщина сторон, концы, соединения и штрихи.
|
||
- **Эффекты:** внешняя и внутренняя тени, размытие слоя, фона и переднего плана.
|
||
- **Типографика:** выбор шрифта с поиском и виртуальной прокруткой, начертание, размер, выравнивание и кнопки форматирования.
|
||
- **Компоновка:** параметры автоматической компоновки.
|
||
- **Экспорт:** масштаб, форматы PNG/JPG/WEBP/SVG и предварительный просмотр.
|
||
|
||
## Отрисовка
|
||
|
||
OpenPencil использует 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 или JSX через контекстное меню.
|
||
|
||
```sh
|
||
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` без интерфейса. Доступно более 90 инструментов и два транспорта: stdio и HTTP.
|
||
|
||
```sh
|
||
npm install -g @open-pencil/mcp
|
||
```
|
||
|
||
Полный список находится в [справочнике инструментов MCP](/programmable/mcp-server).
|
||
|
||
## CLI
|
||
|
||
```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
|
||
```
|
||
|
||
Если настольное приложение запущено, файл можно не указывать: 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](https://app.openpencil.dev), установка как PWA и интерфейс для сенсорных экранов.
|
||
|
||
```sh
|
||
brew install open-pencil/tap/open-pencil
|
||
```
|
||
|
||
## Резервная загрузка Google Fonts
|
||
|
||
Если нужного шрифта нет на компьютере, OpenPencil автоматически загружает его из Google Fonts. При открытии `.fig` с незнакомыми шрифтами вручную устанавливать их не нужно.
|