Penpot

О программе

Penpot – отзывчивый векторный редактор, работающий в онлайне, предназначенный по задумке испанских разработчиков для макетирования и прототипирования UX/UI дизайна и является аналогом Figma. Но по сути это просто универсальный векторный редактор с возможностями командной работы и именных комментариев. Проект Penpot состоит из страниц, страница состоит из кадров, кадр состоит из элементов. Есть бесплатный и платный доступ к сервису. Есть русский интерфейс. И, в отличие от Figma, есть возможность развернуть решение на локальном сервере предприятия.

Интерфейс

• Верхняя панель. Это панель инструментов, в которой находится большинство всех инструментов и всех операций.
• Слева. Иерархическое дерево проекта (закладка СЛОИ). Поддерживается принцип вложенности, т.е. страницы являются родительскими узлами для входящих в них кадров. Кадры являются родителями для остальных элементов. Рядом закладка РЕСУРСЫ для хранения часто используемых объектов.
• Центр. Основной холст на котором размещаются кадры и элементы. Внизу холста имеется возможность вывести палитру цветов, или палитру фaйлов, или список ресурсных шрифтов.
• Справа. Панель свойств выделенного объекта (закладка ДИЗАЙН). Здесь же закладка для перекрестных ссылок (ПРОТОТИП) и закладка для просмотра кода HTML, CSS, SVG (ОСМОТР).

Процесс работы

Тут всё как в обычном векторном редакторе. На верхней панели выбирается инструмент, создается фигура/линия/текст/картинка, она позиционируется в том числе относительно других элементов на холсте, на панели свойств задаются нужные параметры... Если выделить больше одного элемента, то над панелью свойств появляются кнопки относительного выравнивания на плоскости. На панели слоев можно регулировать положение элементов по глубине (по иллюзорной оси Z) просто перетаскивая их по иерархическому дереву.
Группировка выделенных элементов осуществляется традиционно ("ПКМ > Группа" или просто Ctrl+G). В дереве будет создана папка и выделенные элементы в неё помещены.
Полезный функционал маскирование (обрезка одного по контуру другого) также реализован: выделить два элемента, один из которых перекрывает другой, и "ПКМ > Маска" или просто Ctrl+M.
Прямоугольнику можно закруглять каждый угол индивидуально. Не быстро нашел эту кнопку – она располагается в верхней области свойств фигуры рядом с полем угла поворота.
В разделе ОГРАНИЧЕНИЕ панели свойств выделенный элемент можно закрепить на фиксированном расстоянии от одного из четырех краев кадра – бывает полезно.

Кадры

Одна из ключевых сущностей многих дизайнерских программ. В Penpot она называется Board (разработчики перевели как Кадр). В других похожих программах эта сущность может называться Artboard (Монтажная область), Frame (Фрейм). При работе со множеством кадров лучше переименовывать каждый Board для удобства ориентации в иерархии.
Надо привыкнуть, что часть функционала, которая в других программах применяется ко всей странице/холсту, в Penpot применяется к конкретному кадру. Например, экспортные шаблоны, о которых написано ниже. Или разметка холста – да, у каждого кадра может быть свой стиль гридов (системы вертикальных и горизонтальных линий), которая задается в разделе НАПРАВЛЯЮЩИЕ в свойствах кадра (почему-то переводчики назвали так этот раздел, хотя обычно под направляющими понимаются линии, вытягивающиеся на холст от вертикальной или горизонтальной линейки вручную, и такие линии в Penpot есть). По версии Penpot есть такие типы направляющих: Квадрат (это обычная ученическая клеточка), Колонки и Строки (это в терминологии веб-дизанеров модульная сетка).

Ресурсы

Для дизайнерского проекта важно всегда иметь под рукой на расстоянии одного-двух кликов какие-то часто используемые сущности. В Penpot для организации такого хранилища предусмотрена закладка РЕСУРСЫ (рядом с закладкой СЛОИ). Там можно хранить Компоненты, Цвета и Шрифты. Какой-то элемент или группа помещается в компоненты через контекстное меню при выделении: ПКМ > Создать компонент. Также можно добавить в компоненты ресурсы файла *.penpot с диска по кнопке [+] справа от слова КОМПОНЕНТЫ (как – см. ниже). Цвет добавляется в компонент по кнопке [+] справа от слова ЦВЕТА. Причем, последние применяемые в проекте цвета на панельке цветов и так размещены отдельно. Шрифты можно добавить по кнопке [+] справа от слова ТИПОГРАФИКА, потом выбрать шрифт из списка предустановленных. Имеется возможность загрузить шрифт с пользовательского диска: Дашборд > Шрифты > Добавить произвольный шрифт.
Добавление ресурсов из другого файла требует пояснения:

1. Зайти на страницу библиотек Penpot.
2. Зайти в наборы иконок по кнопке [Icon set].
3. Зайти на страницу описания набора.
4. Скачать файл с иконками по кнопке [Download file] или сразу не затягивая процесс нажать на [Use in Penpot.app].
5. На дашборде вашего аккаунта появится этот файл.
6. По кнопке [⫶] под баннером файла выбрать "Добавить как общую библиотеку".
7. Зайти в другой файл (проект) в вашем аккаунте.
8. Зайти на закладку РЕСУРСЫ.
9. Нажать кнопку MANAGE LIBRARY.
10. Напротив имени нового файла нажать [+].
11. Появится новая папка на закладке РЕСУРСЫ - теперь она ваша.

Компоненты

Компонент чем-то похож на кадр (является родительским узлом с возможностью самостоятельного экспорта, и маскирования того, что находится внутри него), но обладает такой особенностью – его можно переиспользовать. Создав компонент, его можно несколько раз перетащить на холст/кадр и если впоследствии модифицировать его первый экземпляр, то все последующие будут в реальном времени изменены как и первый. При этом, если изменить второй компонент, а потом изменить его первый экземпляр, то изменение первого не повлечет уже изменение второго, т.к. он был до этого изменен автономно.
При добавлении на страницу изображения с диска через РЕСУРСЫ > КОМПОНЕНТЫ > [+] картинка помещается в контейнер компонента. То есть, у картинки сразу есть родительский узел, изменяя размеры которого можно картинку маскировать. А чтобы изменить размеры самой картинки надо редактировать дочерний объект.

Плагины

Наличие плагинов – признак зрелости и популярности программы или сервиса. В Penpot плагины можно выбрать и добавить в свой аккаунт так: из меню [⫶] или по правой кнопке верхней панели инструментов. Появится окошко менеджера плагинов – в нем нажать на ссылку "больше плагинов". Пользователь будет перекинут на сайт с плагинами https://penpot.app/penpothub/plugins. Там он выбирает нужный и нажимает кнопку [Install] и дальше плывет по течению. Например, есть плагин для генерации диаграмм, для конвертации растра в вектор, для конвертации вектора в 3D... и другие интересные решения.

Экспорт

По умолчанию осуществляется экспорт только в PDF: кнопка [⫶] (три вертикальные точки) > Файл > Экспорт кадров в PDF > выбрать нужный кадр. Можно наладить экспорт и в другие форматы PNG, SVG... для каждого кадра или компонента: выделить Board > в свойствах кадра внизу нажать кнопку [+] напротив слова ЭКСПОРТ и выбрать формат. После этого возможность экспорт в этот формат появится в меню ([⫶] > Файл > Экспорт).

Ссылки

🌐 Перейти в редактор Penpot онлайн. Требуется регистрация. Можно по Гугл-аккаунту.
📗 Справка по работе в Penpot на английском на сайте разработчика.
📺 Получасовой обзор Penpot на английском на Рутубе.
📺 Про компоненты в Penpot на русском на Рутубе.

Анатолий Опарин / сентябрь, 2025