Penpot

Penpot — бесплатный редактор для дизайна сайтов и приложений с открытым исходным кодом. Открывается в браузере: вы заводите аккаунт, создаёте файл и рисуете экраны примерно так же, как в привычных редакторах интерфейсов. Ставить ничего не нужно, работает и на Windows, и на Mac, и на Linux — потому что работает в обычном окне браузера. Проект развивает компания Kaleidos, первая стабильная версия вышла в 2021 году, код открыт по лицензии MPL 2.0.

Главных отличий от похожих сервисов два. Первое: Penpot можно не просто использовать в облаке разработчика, но и установить на свой сервер — тогда макеты лежат там, где вы решили, и не зависят от чужой компании. Второе: редактор устроен вокруг тех же правил, по которым делают вёрстку, — блоки выстраиваются как во flex и grid, а макет отдаётся разработчику в виде открытых веб-стандартов. Дизайн получается не «картинкой», а описанием будущей страницы.

Что умеет Penpot

• Макеты и монтажные области — в одном файле несколько страниц, на каждой — экраны нужного размера: от телефона до большого монитора. Все экраны проекта видно сразу, а не по одному.
• Компоненты и библиотеки — кнопку, карточку товара или шапку сайта вы собираете один раз и дальше вставляете копиями. Поправили оригинал — изменились все копии. Библиотеку можно подключить к другим файлам, чтобы вся команда брала элементы из одного набора.
• Раскладка как в вёрстке — блоки выстраиваются по правилам flex и grid. Текст стал длиннее, добавился ещё один пункт списка — макет перестраивается сам, а не разъезжается.
• Переменные оформления — цвета, отступы, размеры шрифтов задаются один раз и используются по всему файлу. Решили сделать основной цвет темнее — он меняется везде, где был указан.
• Прототипы — экраны соединяются переходами, и макет можно «прокликать»: нажал на кнопку — открылся следующий экран. Такую ссылку удобно отправить заказчику вместо объяснений словами.
• Комментарии на макете — замечания оставляют точкой прямо на нужной кнопке, с ответами в ветке. Правки не теряются в переписке.
• Совместная работа — в одном файле могут находиться несколько человек: видно курсоры и выделения, изменения появляются сразу у всех.
• Режим для разработчика — открыв макет, верстальщик видит размеры, отступы, цвета, шрифты и готовые фрагменты кода для нужного элемента, а картинки и иконки выгружает сам.
• Импорт и экспорт — макет собирается из загруженных картинок и SVG, а результат выгружается в PNG, JPG, SVG или PDF. Весь файл тоже можно выгрузить целиком и перенести в другую установку Penpot.
• Плагины — сторонние расширения добавляют свои инструменты: генераторы данных, работу с иконками, проверку доступности цветов.
• Установка на свой сервер — разработчик публикует готовую сборку для развёртывания, и организация может поднять Penpot внутри своей сети.

Кому подходит

• Дизайнерам интерфейсов, которым нужен бесплатный редактор без лимита «столько файлов и хватит».
• Небольшим командам и студиям: заказчик смотрит прототип по ссылке, разработчик открывает тот же файл и не ждёт экспорта картинок.
• Компаниям и государственным учреждениям, где по внутренним правилам данные нельзя хранить в чужом облаке: Penpot ставят на свой сервер.
• Фрилансерам и студентам, которым важно начать без оплаты и не упереться в ограничения бесплатного тарифа.
• Тем, кто сам верстает: макет, собранный по правилам flex и grid, потом превращается в код почти без переделок.
• Преподавателям: учебный проект на открытом редакторе доступен всей группе, независимо от системы на компьютерах.

Сколько стоит

Penpot бесплатен. Облачная версия на сайте разработчика не требует оплаты и не ограничивает число файлов, страниц и приглашённых людей пробным периодом — это не «бесплатный тариф, с которого вас уводят на платный». Проект живёт как открытое программное обеспечение: исходный код доступен всем, а деньги разработчик получает не с обычных пользователей, а с корпоративных услуг вокруг продукта. Установка на свой сервер тоже бесплатна, но потребует самого сервера и человека, который умеет его обслуживать.

Как начать пользоваться

1. Откройте официальный сайт Penpot и нажмите кнопку входа в редактор.
2. Зарегистрируйтесь по адресу электронной почты или войдите через поддерживаемый внешний сервис, затем подтвердите почту по письму.
3. Создайте проект и в нём первый файл. Проект — это папка, в которой удобно держать все файлы одного сайта или приложения.
4. Нарисуйте монтажную область нужного размера — например под экран телефона — и соберите на ней первый экран из прямоугольников, текста и загруженных картинок.
5. Пригласите коллег или заказчика по электронной почте и выберите, кто может только смотреть и комментировать, а кто — править.

Частые вопросы