# Возможности ## Файлы 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](/user-guide/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 через контекстное меню. ```sh 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` без интерфейса. Доступно более 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 --cask openpencil ``` ## Резервная загрузка Google Fonts Если нужного шрифта нет на компьютере, OpenPencil автоматически загружает его из Google Fonts. При открытии `.fig` с незнакомыми шрифтами вручную устанавливать их не нужно.