Создайте пользовательский интерфейс приложения для путешествий в Figma с нуля

YOUTUBE · 29.11.2025 08:11

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

Создание каркаса приложения

0:55
  • Создание основы приложения с использованием каркасов.
  • Использование инструментов "Рамка" и "Изгиб" для создания прямоугольников и изогнутых форм.

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

2:48
  • Создание изогнутого макета с использованием инструмента "Изгиб".
  • Использование автоматической верстки для создания макетов с разными размерами экрана.

Создание дополнительных страниц и изменение дизайна

7:48
  • Создание дополнительных страниц с использованием прямоугольников и эллипсов.
  • Изменение цвета и размера элементов для улучшения контраста и визуального дизайна.

Завершение дизайна и интеграция изображений

9:46
  • Добавление изображений и текста для создания уникального дизайна.
  • Использование автоматической верстки для отслеживания цен и создания макетов с разными размерами экрана.

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

11:38
  • Создание кнопки переключения, круга и прямоугольника для текста.
  • Создание посадочных талонов и прямоугольника для заголовка.
  • Создание кнопки внизу страницы.

Типографика и иконки

15:09
  • Использование шрифта SF Pro и символов SF.
  • Выбор различных стилей ширины и веса шрифта.
  • Создание макетов с автоматической компоновкой.

Добавление текста и значков

18:58
  • Использование символов самолета, земного шара и других для категорий.
  • Применение автоматической компоновки для горизонтального расположения.
  • Добавление текста и значков в автоматический макет.

Создание формы для кнопки поиска и заголовка

21:26
  • Создание формы для кнопки поиска и заголовка.
  • Использование сжатого жирного шрифта с прописными буквами для заголовка.

Оформление текста и навигация

23:15
  • В видео рассказывается о том, как использовать расширенные настройки шрифта, выбирать верхний регистр, размер 17, белый цвет и интервалы.
  • Затем автор переходит к оформлению навигации, где он заменяет старую строку состояния, удаляет круг и прямоугольник, а затем вставляет панель навигации.

Автоматическая верстка

29:56
  • В этой части автор объясняет, что такое автоматическая верстка и как она упрощает процесс создания адаптивного дизайна.
  • Он также рассказывает о новых функциях, таких как перенос, минимальная и максимальная ширина и высота, а также о различных вариантах выравнивания.
  • Автор также объясняет, как управлять интервалами и отступами в горизонтальном и вертикальном направлениях.
  • В конце автор демонстрирует, как использовать функцию min max width для определения минимальной и максимальной ширины рамки автоматической компоновки и ее дочерних элементов.

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

34:38
  • В этом разделе автор объясняет, как задать направление переноса контейнера раздела, чтобы он переносился на следующую строку.
  • Затем автор показывает, как изменить визуальный порядок стопки слоев в виде, в котором она отображается на холсте.
  • Автор также объясняет, как изменить расположение холста, выбрав между 1-м сверху или последним сверху.

Добавление текста и изображений

36:33
  • Автор добавляет текст и изображения, используя расширенные настройки обводки и обводки макета.
  • Затем автор объясняет, как выровнять текст по базовой линии и как использовать абсолютное положение для размещения объектов в определенном месте.

Создание страницы управления

40:11
  • Автор добавляет страницу управления, которая позволяет переключаться и просматривать другие изображения.
  • Затем автор добавляет панель навигации, значки и символы, используя приложение SF Symbols.

Завершение макета

43:03
  • Автор завершает макет, добавляя время отправления и прибытия, продолжительность полета и другие элементы.
  • В конце автор объясняет, как использовать цвета и градиенты для создания привлекательного дизайна пользовательского интерфейса.

Создание цветовой палитры

45:54
  • Обсуждение выбора цветов для дизайнерских проектов, вдохновленных образом, созданным Midjourney.
  • Использование инструмента "Пипетка" для отображения цветов на изображении.

Линейные и угловые градиенты

47:49
  • Объяснение различий между линейными и угловыми градиентами.
  • Создание предопределенных цветовых стилей для использования в проектах.

Управление сегментами и создание теней

50:51
  • Создание невыбранного и выбранного варианта с использованием линейных и угловых градиентов.
  • Создание трехмерной фигуры с использованием дополнительных фигур и градиентов.

Создание макета расписания Apple WWDC

54:16
  • Создание выбранного и невыбранного варианта с использованием угловых и линейных градиентов.
  • Добавление теней и обводок для создания контраста и глубины.

Создание кнопки переключения

57:10
  • Создание невыбранного варианта с использованием линейного градиента.
  • Добавление обводок и теней для создания контраста и глубины.

Создание макета билета

58:51
  • Выравнивание и настройка отступов на контейнерах с левой и правой сторон.
  • Использование градиента и обводки для оформления контейнера.

Добавление изображений и текста

1:03:10
  • Использование MidJourney для создания уникального изображения.
  • Добавление изображений и текста в контейнер с использованием автоматической компоновки.

Работа с панелью вкладок и кнопками

1:09:13
  • Создание рамки для панели вкладок и добавление символов карты, чемодана, увеличительного стекла, колокольчика и человека.
  • Изменение размера и цвета символов, добавление их в контейнеры с автоматической компоновкой.

Создание формы и объединение символов

1:10:37
  • Выберите все вкладки-контейнеры и добавьте их в режим автоматической компоновки.
  • Установите интервал между элементами равным 24, назовите рамку автоматической компоновки "меню" и выровняйте ее по центру рамки.
  • Активируйте инструмент "линейка" и проведите две красные линии там, где находятся символы.
  • Создайте прямоугольник между красными линиями, установите радиус угла равным 20 и сделайте его прозрачным.
  • Создайте круг диаметром 40 см, выровняйте его по 1-му символу, пока две линии не пересекутся, образуя крест.
  • Объедините прямоугольник и круг в единую фигуру.
  • Создайте два объединяющих слоя, заполните их цветом в стиле "tabbar shape one color" и "tabbar shape two color".

Создание вкладки и добавление текста

1:12:24
  • Создайте круг размером 40 x 40, поместите его поверх символа карты, убедитесь, что он находится по центру над отверстием.
  • Дублируйте круг, заполните его выбранным на панели вкладок и примените размытие слоя со значением 10.
  • Добавьте штрих, используя выбранный на панели вкладок штрих.
  • Объедините два круга в группу и назовите ее "выбранная".
  • Добавьте вертикальный символ слайда, выделите его полужирным шрифтом размером 15, измените цвет на белый, добавьте текст и введите фильтры.
  • Разместите символ и текст в автоматическом макете, установите интервал между элементами равным 10, отступ по горизонтали равным 20, а по вертикали равным 10.
  • Заполните его кнопками, задающими цветовой стиль, добавьте белую обводку и наложите наложение.
  • Добавьте фон со значением 10, а также тень со смещением по y, равным 10, размытие 30 и цвета "один", "в", "ноль", "с", "пять" и "семь".

Завершение дизайна

1:14:37
  • Скопируйте кнопку и замените два прямоугольника.
  • Измените текст в 3-м кадре на "больше", выровняйте кнопку и установите интервал от индикатора "Главная страница" равным 16.
  • Отрегулируйте интервал в 1-м кадре: выберите макеты в контрольном сегменте, интервал между ними составляет 40 сверху и 2