Figma. Создание обложки лендинга (Landing)

Сегодня на уроке мы:

· Узнаем, что такое обложка Landing.

· Как работать с сеткой.

· Используем плагин Blobs.

· Создадим обложку Landing.

Обложка Landing – это первый экран на web-странице, который видит пользователь при её загрузке. Обычно она занимает большую часть экрана и включает ключевую информацию, привлекающую внимание посетителя. Обложка задаёт тон всему Landing и играет решающую роль в удержании пользователя, формировании первого впечатления и направлении к целевому действию (покупка, регистрация, подписка и так далее).

Создадим новый проект в Figma.

Назовём его.

Прежде чем начать работу над обложкой, рассмотрим, как настроить и использовать сетку в Figma.

Сетка в Figma помогает упорядочить все элементы дизайна во frame.

В Figma сетка применяется к frame. Чтобы создать frame, нажмите на инструмент Frame в панели инструментов или используйте клавишу F.

Выберите нужный размер frame. Возьмём размер 1920x1080 px. Это стандартный размер для экранов.

Чтобы включить и настроить сетку в Figma, необходимо выполнить следующие действия:

· Выделите frame.

· В правой панели свойств найдите раздел Layout Grid (Сетка макета).

· Нажмите на значок плюс, чтобы добавить сетку к frame.

В Figma доступны три типа сеток: Grid, Columns и Rows.

Для каждого из них можно настроить параметры.

Grid – это базовая сетка, состоящая из одинаковых квадратов. Она полезна для пиксельной точности или модульных сеток.

У этой сетки можно настроить следующие параметры:

· Size (Размер): укажите размер ячейки. Например, установите размер ячейки на 8 px или 10 px в зависимости от уровня детализации.

· Color (Цвет): задайте цвет линий сетки. Можно сделать сетку полупрозрачной, чтобы она не мешала просмотру дизайна.

Columns – это сетка с вертикальными колонками, которую часто используют в web-дизайне для размещения контента по принципу 12-колоночной системы. У этой сетки можно настроить следующие параметры:

Count (Количество колонок): укажите количество колонок. Для классической адаптивной сетки обычно используют 12 колонок.

Gutter (Отступ между колонками): установите расстояние между колонками (например, 20 px).

Margin (Внешние отступы): задайте отступы от краёв frame до начала колонок. Например, 24 px или 32 px.

Type (Тип): установите тип. Выберите Stretch, чтобы колонки адаптировались к ширине frame, или Center, чтобы зафиксировать колонки по центру. Или же установите колонки справа или слева.

Также можно выбрать ширину и цвет.

Rows – это сетка с горизонтальными рядами, которая помогает выравнивать элементы по вертикали.

Здесь такие же параметры как у сетки Columns, но вместо ширины нужно указать высоту.

При настройке сетки можно изменить не только её цвет, но и прозрачность для более комфортной работы.

В правой панели у каждого типа сетки есть поле Color (Цвет), где можно настроить их прозрачность.

Рекомендуется использовать нейтральные, полупрозрачные цвета (например, серый с прозрачностью 10–20 %), чтобы сетка не мешала видеть элементы дизайна.

Чтобы изменить сетку, вернитесь в раздел Layout Grid и нажмите на настройки рядом с добавленной сеткой.

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

Если нужно использовать определённую сетку на нескольких frame, то можно скопировать сетку:

· Выделите frame с уже настроенной сеткой.

· Нажмите комбинацию клавиш для копирования Ctrl + C, чтобы скопировать.

· Перейдите на другой frame и нажмите комбинацию клавиш для вставки Ctrl + V, чтобы применить ту же сетку.

Вернёмся к обложке.

Зададим фон.

Выбираем frame и смотрим на правую панель свойств.

В разделе Fill заливки задаём градиентный фон:

· Тип градиента выбираем Radial (радиальный).

· Укажем цветовые значения. Первый цвет будет тёмно-фиолетовый (#31077F), а второй светлее, более насыщенный фиолетовый (#5B13A5).

· Нажимаем кнопку «Rotate gradient» и меняем направление градиента.

Создадим текст верхнего меню.

Выбираем инструмент текст (T).

Набираем названия пунктов меню: ГЛАВНАЯ | О НАС | ЦЕНЫ | УСЛУГИ | и КОНТАКТЫ.

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

Размер шрифта установим 36 px.

Цвет текста укажем белый: #FFFFFF.

Пункт меню «Главная» располагаем примерно по 100 px от левого и верхнего края. Остальные пункты меню располагаем на равном расстоянии друг от друга.

Ниже расположим подзаголовок.

Шрифт будет тот же.

Размер – 48 px.

Цвет белый.

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

Далее создадим заголовок.

Давайте скопируем подзаголовок. Для этого зажимаем клавишу на клавиатуре Alt и с помощью левой кнопки мыши копируем подзаголовок.

Цвет и шрифт остаются такими же.

Изменим начертание текста и размер его установим 96 px.

Ниже расположим описание.

Размер этого текста будет 16 px.

Остальные параметры остаются такими же.

Инструментом прямоугольник (R) создадим кнопку размером 300x100 px.

Зададим градиентную заливку:

Левый край: #00D6FB (светло-голубой).

Правый край: #3D00FF (насыщенный синий).

Радиус скругления углов: 25.

Для текста кнопки: пишем текст «КУПИТЬ», шрифт тот же, что и у остального текста, размер 42 px, цвет текста белый #FFFFFF.

Добавим эффект кнопке.

Выбираем Drop shadow.

Нажимаем на свойства.

По иксу ставим пять, по игреку тоже пять.

Blur устанавливаем 20.

Цвет белый.

Прозрачность 50 процентов.

Группируем прямоугольник и текст.

Выравниваем текст по середине кнопки.

Ниже кнопки расположим иконки соцсетей.

Скачиваем их заранее. Например, на сайте https://www.flaticon.com. Добавляем на frame.

Устанавливаем их размер, например, 90x90.

Проверьте, чтобы текст, кнопка и иконки были выровнены по левому краю.

Добавим линейку.

Перепроверьте расположение элементов, возможно, что-то надо поправить, где-то размер шрифта изменить или расположить по-другому.

Создадим изображение смартфона.

Инструментом прямоугольник (R) создадим фигуру размером 412x824.

Радиус скругления углов прямоугольника установим 50.

Зададим градиентную заливку. Обратите внимание, что здесь указываем 3 цвета.

Сделаем обводку. Цвет тёмно-синий #2E034D.

Толщина 4.

Далее создадим ещё один прямоугольник.

Размер 403 на 473.

Цвет белый.

Прозрачность 30 процентов.

Нажимаем на кнопку Edit object.

И тянем нижний правый прямоугольник фигуры вверх.

Нажимаем кнопку Done.

Расположим прямоугольник, как показано на картинке.

И создадим ещё один прямоугольник.

Размер 271x48.

Цвет установим, как и у обводки.

Радиус скругления нижних углов: 15.

Прямоугольник располагаем сверху.

Всё. Смартфон готов.

Давайте добавим теней.

Чтобы со всех сторон была тень, нужно добавить 2 эффекта.

Осталось создать три абстрактные фигуры.

Точно такие же, как на картинке, у вас не получатся. Они получатся произвольными.

Делать эти фигуры будем с помощью плагина Blobs.

В меню выбираем пункт Plugins, далее Manage plugins.

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

Нажимаем на него.

И создадим фигуры.

Нажимаем на кнопку обновить, чтобы фигура изменилась. Также можно подвигать ползунки. Если фигура понравилась, то нажимаем на кнопку Insert.

Фигуры потом можно изменить.

Нажимаем двойным щелчком по фигуре. И двигаем точки и усики, чтобы получилась нужная фигура. После нажимаем на кнопку Done.

Установим размер.

Затем градиентную заливку.

Можно поменять направление градиента.

Добавим внутреннюю тень.

И внешнюю.

Для двух других фигур устанавливаем такие же параметры, копируя их.

Для этого выделяем фигуру с параметрами и нажимаем комбинацию клавиш Ctrl+Alt+C. Выделяем фигуру без параметров и нажимаем комбинацию клавиш Ctrl+Alt+V.

Располагаем фигуры.

Изменяем, если надо размер или их форму.

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

Обязательно нажмите на кнопку Present, чтобы увидеть, как смотрится созданная обложка.

Вы можете поэкспериментировать, поменять цвета, шрифт, добавить другие элементы и так далее.

В конце урока попробуйте ответить на следующие вопросы:

Что такое сетка?

Зачем нужна обложка Landing?

Как скопировать параметры одной фигуры и задать их другой?

Внимательно посмотрев урок, вам не составит труда ответить на вопросы.