PenPot Tutorial - Приложение для разработки пользовательского интерфейса с открытым исходным кодом

YOUTUBE · 25.11.2025 05:58

Ключевые темы и таймкоды

Введение в Penpot

0:00

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

Ограничения Penpot

0:53

Нет автоматической вёрстки и плагинов.
Нет поддержки состояний компонентов и микровзаимодействий.
Penpot планирует внедрить эти функции в будущем.

Курс по UI/UX

1:59

Гэри Саймон предлагает курс по UI/UX на сайте designcourse.com.
Курс включает более 16 часов видео, 40 интерактивных тестов и наставничество.
Код купона «ui2022» даёт скидку 22% при оформлении заказа.

Создание проекта в Penpot

2:45

После создания аккаунта можно начать новый проект.
Интерфейс Penpot напоминает Figma и XD.
Доступны слои, страницы, ресурсы и панель инструментов.

Настройка интерфейса

3:46

Возможность изменять фон холста.
Настройка свойств элементов, включая выравнивание и прототип.

Создание прямоугольника и градиента

5:23

Создание прямоугольника с помощью сочетания клавиш R.
Настройка свойств прямоугольника: размер, положение, поворот, радиус угла.
Создание градиента с двумя цветами.

Работа с изображениями

8:13

Вставка изображения через инструмент «Изображение».
Использование маски для управления изображением.
Изменение размера и положения изображения внутри маски.

Создание сетки

10:34

Создание сетки с помощью панели «Сетка плюс».
Настройка количества столбцов и желобов.
Использование буквы или словесного знака в качестве логотипа.

Работа со шрифтами и компонентами

11:25

Увеличение размера шрифта до 24.
Использование шрифта Source Sans Pro по умолчанию.
Дублирование элементов с помощью Ctrl+D или Command+D на Mac.
Настройка навигационного шрифта размером около 20.

Создание и настройка компонентов

12:24

Перетаскивание направляющих для выравнивания элементов.
Создание компонента через контекстное меню или Ctrl+K.
Отключение роликов с помощью Shift+R.

Проблемы с обновлением компонентов

13:32

Изменение размера шрифта не обновляет экземпляры компонента.
Трудности с редактированием компонентов при двойном щелчке мыши.
Необходимость выбора компонента перед дублированием.

Настройка цвета и сетки

15:25

Придание цвету активного состояния.
Скрытие сетки.
Создание заголовка для веб-интерфейса.

Создание карточек

16:42

Использование инструмента «прямоугольник» для создания карточек.
Настройка закруглённых границ и теней.
Уменьшение непрозрачности до 53%.

Создание пользовательского интерфейса

17:59

Настройка автоматической ширины контейнера.
Дублирование и уменьшение масштаба элементов.
Добавление текста с жирным шрифтом.

Рисование на внутренней стороне открытки

19:00

Использование инструмента «перо» для рисования.
Настройка радиуса угла и инсульта.
Создание шрифта «рекомендуемый» маленького размера.

Маскировка элементов

21:23

Дублирование фона и маскировка выбранных элементов.
Настройка заливки и обводки.
Исправление проблем с тенью.

Завершение настройки

23:37

Проверка и исправление теней.
Выбор нужной строки для изменения.

Настройка непрозрачности и перемещение элементов

23:54

Использование клавиши со стрелкой вниз для настройки непрозрачности.
Перемещение элементов на экране.

Добавление шрифтов и создание кнопки

24:19

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

Проблемы с центрированием элементов

25:22

Трудности с центрированием элементов при изменении размера изображения.
Обходной путь: перемещение изображения влево и вправо для центрирования шрифта.

Создание дополнительного призыва к действию

27:10

Дублирование элемента для создания дополнительного призыва к действию без заполнения.
Настройка заливки и цвета элемента.

Настройка тени и шрифта

29:06

Изменение размера тени для лучшего обзора контура.
Увеличение размера шрифта для улучшения читаемости.

Создание интерактивных прототипов

29:32

Перетаскивание элементов в прототип для добавления интерактивности.
Настройка триггеров и действий для интерактивных ссылок.
Примеры анимаций: «растворение» и «ослабление».

Недостатки текущей версии

30:42

Отсутствие возможности создания состояний компонентов, таких как наведение курсора.
Необходимость дублирования монтажной панели для добавления состояний.
Сложность работы с компонентами из-за необходимости копирования элементов.

Заключение

31:41

Подведение итогов и призыв подписаться на платформу интерактивного дизайна.
Прощание с аудиторией.