Penpot

Penpot — это свободное и открытое веб-приложение для совместной работы над дизайном интерфейсов и прототипированием, ориентированное на команды разработчиков и дизайнеров. Оно позволяет создавать векторную графику, макеты пользовательских интерфейсов (UI) и интерактивные прототипы, работая непосредственно в браузере без установки дополнительного программного обеспечения. Penpot позиционируется как альтернатива проприетарным инструментам, таким как Figma или Sketch, и распространяется под лицензией Mozilla Public License 2.0 (MPL 2.0).

История

Проект Penpot был основан в 2019 году испанской компанией Kaleidos Open Source (организация-разработчик, не признана экстремистской или террористической в РФ). Первоначально он назывался «Penpot» (от слов «pen» — ручка и «pot» — горшок, что отсылает к идее «инструмента для рисования»). Разработка велась с целью создания свободной альтернативы коммерческим инструментам для дизайна, которые часто требуют подписки и не позволяют полностью контролировать данные.

Первая публичная альфа-версия была выпущена в феврале 2021 года. В июне 2022 года вышла стабильная версия 1.0, которая включала основные функции для векторного редактирования, создания прототипов и совместной работы. С тех пор проект активно развивается: добавляются поддержка плагинов, улучшенная работа с компонентами, интеграция с системами управления версиями (например, Git) и расширенные возможности для командной работы.

По состоянию на 2024 год Penpot поддерживается сообществом разработчиков и компанией Kaleidos, которая предоставляет облачную версию (SaaS) и коммерческие лицензии для корпоративных клиентов. Однако основная версия остаётся полностью бесплатной и доступной для самостоятельного развёртывания на собственных серверах.

Ключевые особенности

Открытый исходный код и лицензирование

Penpot распространяется под лицензией MPL 2.0, что позволяет свободно использовать, модифицировать и распространять код. Это отличает его от проприетарных аналогов, где доступ к исходному коду закрыт. Пользователи могут развернуть Penpot на собственном сервере (self-hosted), что обеспечивает полный контроль над данными и соответствие корпоративным политикам безопасности.

Веб-ориентированность

Приложение работает в браузере и не требует установки. Для работы достаточно современного веб-браузера (Chrome, Firefox, Safari, Edge). Это упрощает доступ для удалённых команд и не требует настройки рабочего места. Однако для автономной работы без интернета Penpot не предназначен.

Совместная работа в реальном времени

Penpot поддерживает многопользовательское редактирование: несколько пользователей могут одновременно работать над одним проектом, видеть изменения друг друга в реальном времени и общаться через встроенный чат. Это позволяет командам дизайнеров и разработчиков быстро итеративно дорабатывать макеты.

Векторное редактирование

Инструмент предоставляет полный набор функций для работы с векторной графикой: создание фигур, линий, кривых Безье, текстовых блоков, градиентов, масок и эффектов (тени, размытие). Поддерживается импорт и экспорт в форматах SVG, PNG, PDF и JPG. Векторные объекты могут быть сгруппированы, выровнены и преобразованы с помощью стандартных инструментов.

Прототипирование

Penpot позволяет создавать интерактивные прототипы, связывая экраны (артборды) с помощью «горячих точек» (hotspots) и задавая переходы между ними. Прототипы можно предварительно просматривать в браузере, имитируя поведение пользователя. Поддерживается анимация переходов (например, затухание, сдвиг) и настройка триггеров (нажатие, наведение, загрузка).

Компоненты и библиотеки

Система компонентов позволяет создавать повторно используемые элементы (кнопки, иконки, карточки) и управлять их состояниями (например, активное, нажатое, отключённое). Компоненты можно объединять в библиотеки, которые затем используются в разных проектах. Это ускоряет разработку и обеспечивает единообразие дизайна.

Плагины и API

Penpot поддерживает расширение функциональности через плагины, написанные на JavaScript. Плагины могут добавлять новые инструменты, автоматизировать задачи (например, генерацию цветовых палитр) или интегрироваться с внешними сервисами (например, Slack, Trello). Также доступен REST API для программного управления проектами.

Архитектура и технологический стек

Penpot построен на современном стеке технологий:

• Фронтенд: написан на ClojureScript (язык на основе Clojure, компилируемый в JavaScript) с использованием фреймворка Reagent (обёртка для React). Это обеспечивает высокую производительность и реактивность интерфейса.
• Бэкенд: написан на Clojure (язык, работающий на виртуальной машине Java — JVM). Бэкенд отвечает за хранение данных, аутентификацию, управление проектами и совместную работу.
• База данных: используется PostgreSQL.
• Хранение файлов: поддерживается локальное хранилище, а также облачные сервисы (Amazon S3, Google Cloud Storage, MinIO).
• Веб-сервер: используется Nginx.

Архитектура модульная: клиентская часть (браузер) взаимодействует с бэкендом через REST API и WebSocket (для реального времени). Это позволяет легко масштабировать систему.

Применение

Penpot используется в различных сферах, связанных с дизайном и разработкой:

• Дизайн пользовательских интерфейсов (UI): создание макетов веб-сайтов, мобильных приложений, десктопных программ.
• Прототипирование: создание интерактивных прототипов для тестирования пользовательских сценариев.
• Векторная графика: создание иконок, иллюстраций, логотипов, инфографики.
• Совместная работа в командах: дизайнеры, разработчики, менеджеры продуктов могут одновременно работать над проектом, обмениваться комментариями и версиями.
• Образование: используется в учебных заведениях для обучения основам дизайна и прототипирования, так как не требует лицензионных отчислений.
• Open Source проекты: многие проекты с открытым исходным кодом используют Penpot для создания документации, макетов и прототипов, так как он не накладывает ограничений на коммерческое использование.

Сравнение с аналогами

Penpot часто сравнивают с Figma (организация Meta признана экстремистской и запрещена в РФ), Sketch и Adobe XD. Основные отличия:

Основное преимущество Penpot — открытость и возможность полного контроля над данными. Недостатками по сравнению с Figma являются менее развитая экосистема плагинов, меньшее количество готовых шаблонов и сообщества, а также более скромные возможности для анимации и прототипирования.

Критика и ограничения

Несмотря на активное развитие, Penpot имеет ряд ограничений:

• Производительность: при работе с большими и сложными проектами (например, с тысячами слоёв) браузерная версия может замедляться, особенно на старых компьютерах.
• Экосистема: количество плагинов и готовых библиотек значительно меньше, чем у Figma или Sketch.
• Поддержка форматов: импорт из Figma или Sketch ограничен (например, не все эффекты и компоненты корректно конвертируются).
• Обучение: интерфейс может показаться менее интуитивным для пользователей, привыкших к Figma или Sketch.
• Мобильная версия: отсутствует нативная мобильная версия, хотя приложение адаптировано для планшетов через браузер.

Интересные факты

• Название «Penpot» происходит от игры слов: «pen» (ручка) и «pot» (горшок), что символизирует «инструмент для рисования».
• Penpot является одним из немногих открытых инструментов для дизайна, который поддерживает полноценное прототипирование.
• Проект активно используется в государственных учреждениях некоторых стран Европы, где требуется открытое ПО.
• В 2023 году Penpot получил финансирование от Европейского союза в рамках программы поддержки открытого программного обеспечения.

Источники

• Официальный сайт проекта Penpot
• Репозиторий Penpot на GitHub
• Документация Penpot (penpot.app/docs)
• Статья «Penpot: The Open-Source Design Tool That’s Taking on Figma» (2023)
• Материалы конференции FOSDEM 2023: «Penpot: Open Source Design for the Web»