Как пользоваться Penpot: регистрация и первый макет

Penpot работает в браузере, поэтому инструкция подходит для любой системы: Windows, macOS, Linux. Понадобится только современный браузер и адрес электронной почты. Весь путь — от регистрации до макета, который можно отдать верстальщику — занимает около часа, если вы уже работали в любом графическом редакторе.

Создайте аккаунт

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

Разберитесь в рабочем окне

После входа вы попадаете на панель с проектами. Проект — это папка под один сайт или приложение, внутри неё лежат файлы, а в файле — страницы. Такое разделение экономит время: все экраны одного заказа оказываются в одном месте.

• Слева в файле — список страниц и слоёв: всё, что нарисовано, и в каком порядке лежит.
• Сверху или слева — инструменты: монтажная область, прямоугольник, круг, текст, перо, картинка.
• Справа — свойства выделенного элемента: размер, положение, цвет, обводка, тень, шрифт.
• В верхнем углу — кнопки режима просмотра, комментариев и приглашения людей в файл.

Создайте файл и первую монтажную область

Нажмите создание проекта, дайте ему имя — например «Сайт мастерской» — и создайте внутри файл. В открывшемся редакторе возьмите инструмент монтажной области: в свойствах справа будут готовые размеры под телефон, планшет и монитор. Выберите нужный и назовите область по смыслу: «Главная», «Каталог», «Корзина».

Сразу делайте по одной области на экран и не рисуйте всё в одной куче. Потом именно из этих областей собирается прототип, и порядок на странице заметно экономит время.

Соберите экран из блоков

Нарисуйте прямоугольники под шапку, баннер и карточки, добавьте текст инструментом надписи и перетащите в окно нужные картинки прямо из папки на компьютере. В свойствах справа задайте цвет заливки, скругление углов, размер и начертание шрифта.

Чтобы блоки не разъезжались, включите для группы раскладку: выделите элементы, объедините их и в свойствах выберите выстраивание в ряд или в сетку, задайте расстояние между элементами и внутренние отступы. Дальше при добавлении новой карточки остальные подвинутся сами — это те же правила, по которым потом свёрстают страницу.

Сделайте компонент и сохраните цвета

Выделите готовую кнопку и превратите её в компонент. Теперь она попадёт в библиотеку файла, а каждая вставленная копия будет связана с оригиналом: поменяли цвет или скругление в оригинале — изменились все кнопки в макете. Так же стоит поступить с шапкой, подвалом и карточкой товара.

Основные цвета и размеры шрифтов добавьте в библиотеку файла отдельными значениями. Это избавляет от ручного подбора оттенка в каждом блоке и позволяет поменять фирменный цвет во всём макете за одно действие.

Свяжите экраны в прототип

Переключитесь в режим прототипа и протяните связь от кнопки к той монтажной области, которая должна открыться. Выберите тип перехода — обычное открытие или выезд панели. Затем нажмите кнопку просмотра: макет откроется как приложение, по нему можно щёлкать и проверять логику переходов.

Пригласите команду и соберите замечания

Откройте приглашение в файл и добавьте коллег по адресам электронной почты, выбрав права: только просмотр и комментарии или полная правка. Заказчику достаточно первого варианта — он включит инструмент комментариев и будет ставить замечания точкой прямо на нужном элементе. Вы ответите в той же ветке и закроете её, когда правка сделана.

Если нужно показать макет человеку без аккаунта, включите общий доступ по ссылке для просмотра. Такую ссылку удобно отправить в переписке вместо десятка скриншотов.

Передайте макет разработчику и сделайте резервную копию

Попросите верстальщика открыть файл в режиме просмотра и переключиться на вкладку с кодом: там для выделенного элемента показаны размеры, отступы, цвета, шрифты и готовые фрагменты разметки и стилей. Картинки и иконки он выгрузит сам — для этого в свойствах элемента задайте формат экспорта, например PNG или SVG.

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

Готово: макет нарисован, повторяющиеся элементы собраны в компоненты, переходы работают, команда видит файл, а у вас есть копия на своём компьютере.

Если что-то пошло не так