Создание виджета погоды в Figma

В этом уроке мы разберем процесс создания стильного и функционального виджета погоды в Figma. Вы научитесь работать с градиентами, тенями и создавать объемные элементы, улучшая свои навыки в UI/UX дизайне.

Почему именно Figma? Эта программа предоставляет мощные инструменты для разработки дизайна интерфейсов мобильных и веб-приложений. Она удобна для создания интерактивных элементов и прототипирования.

Шаг 1. Подготовка фигуры солнца

Создаем Ellipse (круг), используя горячую клавишу "O" или выбирая инструмент на панели.
В разделе Fill выбираем градиентную заливку (Gradient) для получения объемного эффекта.
Расставляем три цвета: по бокам - светлые оттенки, в центре - темнее.
По желанию можно переключиться с Linear на Radial градиент.

Шаг 2. Добавление внутреннего свечения

Чтобы сделать солнце реалистичнее, добавляем эффект Inner Shadow в разделе Effects.

Настраиваем X и Y (смещение)
Меняем значение размытия (Blur)
Устанавливаем цвет #ffffff

Шаг 3. Добавление внешнего свечения

Применяем эффект Drop Shadow в Effects

Регулируем смещение по осям X и Y
Устанавливаем значение размытия (Blur) на 50
Устанавливаем прозрачность 30%. Это создаст мягкое свечение.

Шаг 4. Добавление дополнительного света

Рисуем еще один Ellipse, устанавливаем более светлый цвет, применяем Layer Blur (50 px) для создания эффекта рассеянного света.

Шаг 5. Создание облака

Чаще всего в дизайне при создании облаков используется основная фигура Ellipse. Облако состоит из 3х окружностей, отличающихся по размеру. Нарисуем 3 окружности, расположив их на одной линии по нижнему краю.

Шаг 6. Формируем фигуру облако

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

Шаг 7. Добавление объема облаку

Чтобы облако казалось объемным и более реалистичным, необходимо добавить объем каждой внутренней окружности.

Выделим 3 окружности и на панели управления справа в разделе Effects добавляем эффект "Inner shadow"
Устанавливаем значения для смещения угла внутреннего свечения по осям X и Y
Добавляем Blur (размытие) для более плавного свечения
Устанавливаем в Color белый цвет с прозрачностью 80%

Шаг 8. Группировка элементов

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

Шаг 9. Создание временной шкалы

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

Добавляем 8 текстовых меток с указанием времени, равномерно распределяя их вдоль шкалы
Выделяем текущее время более ярким цветом, чтобы сделать его заметнее
Над каждым часовым значением размещаем фигуру Ellipse, которая будет обозначать точку на графике изменения температуры
Дублируем 8 точек, выделяем их и в панели управления справа в разделе Position выбираем "Distribute horizontal spacing", чтобы равномерно распределить точки по шкале

Шаг 10. Построение графика температуры

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

Распределяем точки графика на разной высоте, чтобы отобразить колебания температуры
Выбираем инструмент "Pen" (горячая клавиша "P") на панели инструментов
Соединяем точки кривой линией, создавая плавный график изменения температуры
В панели управления в разделе Stroke задаем необходимую толщину линии, чтобы сделать график более читаемым

Шаг 11. Стилизация графика температуры

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

Выбираем кривую линию графика
В панели управления в разделе Stroke выбираем цвет и переключаемся на градиент
Устанавливаем два оттенка: теплый (для более высоких температур), холодный (для более низких температур)
Поворачиваем градиент по вертикали, чтобы цвет плавно переходил сверху вниз, отражая изменение температуры

Шаг 12. Добавление изменения температуры

Чтобы график был информативнее, добавляем числовые значения температуры.

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

Шаг 13. Объединяем все элементы в виджет

Когда все основные элементы готовы, создаем Frame (горячая клавиша "F") и размещаем в нем все компоненты.

Геолокация – отображение текущего города или региона
Дата – указание текущего числа и дня недели
Переключатель между городами – небольшие точки для смены местоположения
Текущая температура и погода – ключевые данные в центре виджета
График изменения температуры – динамическое отображение прогноза на сутки

Выполни задание и получи награду

Создайте свой виджет для отображения погоды (это может быть дождливая, снежная, солнечная и любая другая погода). Отправьте ваш вариант дизайна и после проверки получите вашу заслуженную награду!