Дизайн сайта в Figma
Веб-дизайн, Уроки

Дизайн сайта в Figma за 10 минут. Практический урок.

В этом уроке вы узнаете как сделать дизайн сайта в Figma за 10 минут и познакомитесь с сайтом, где можно брать классные 3D фигуры. На практике сделаем первый экран сайта используя эти 3D фигуры.

Дизайн сайта в фигме. Пример

В результате этого урока вы сможете сделать такой дизайн первого экрана Landing Page (пример выше).

Где найти 3D элементы для дизайна сайта в Figma

Сайт с 3D фигурами для дизайна сайта в Figma

Вы можете найти 3D элементы на сайте shapefest.com. Здесь представлено множество фигур, которые вы сможете использовать в своих проектах.

Примеры 3D фигур. Создаем дизайн сайта в Figma

Для примера выберу комплект материалов под названием «Clay Shapes».

Комплект 3D фигур для дизайнаКомплект 3D фигур для дизайна

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

Инструкция по загрузке комплекта с 3D фигурами. Создаем дизайн сайта в Figma

Затем нажмите кнопку «Continue»

Инструкция по загрузке комплекта с 3D фигурами

Внесите ваш email и нажмите на кнопку Download for FREE.

Скачивание по загрузке комплекта с 3D фигурами

На почту придет письмо, где нужно нажать зеленую кнопку «View your order».

Скачивание по загрузке комплекта с 3D фигурами. Инструкция

Вас перенаправит на страницу скачивания материалов. Вес немного большой (1.2 ГБ). Чтобы скачать нажмите на «Download».

Пример папки с элементами для дизайна сайта

Распакуйте скачанный архив. После этого у вас появиться множество папок с материалами.

Комплект шаблонов для дизайна сайта

Скачивание шаблонов для Figma

Второй шаг, который вам нужно сделать — это скачать комплект материалов для Figma SIRIUS. Скачать можно здесь.

После скачивания комплекта у вас появиться файл под названием «Комплект SIRIUS 1.1». Вы можете загрузить его в Figma перейдя во вкладку «Drafts» и перетащив к другим файлам.

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

Пример комплекта для создания дизайна сайта в Figma

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

Делаем дизайн Landing Page в Figma

Теперь перейдём к процессу создания дизайна с помощью этих заготовок.

Создание новой страницы в Figma

Чтобы не создавать хаос, я создаю новую страницу под названием «Shapes».

Выбор папки с элементами для дизайна

Захожу в папку с 3D фигурами, которую ранее скачал. Открываю папку «Clay 01 Red».

Выбор папки с элементами для дизайна

Далее открываю папку «Angle_A1»

Копирование всех элементов в папке

Выбираю один элемент и нажимаю комбинацию клавиш «Ctrl» «A», чтобы выделить все элементы в папке.

Вставка всех элементов для дизайна сайта в Figma

После выделения перетаскиваю все 3D элементы в фигму.

Пример 3D фигур для дизайна сайта в Figma.

В итоге у вас будут на виду все фигуры, что удобно в работе.

Шаблоны для Figma

Перехожу к шаблонам и копирую 2 элемента: шапку и раздел с заголовком, текстом и кнопкой внизу. Чтобы скопировать элементы нажимаю «Ctrl» «С».

Вставка элементов на новую страницу

Возвращаюсь на страницу с фигурами и вставляю скопированные элементы нажав на «Ctrl» «V»

Разгруппировка фрейма в фигме

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

Перемещение элементов во фрейм в фигме. Дизайн сайта в Figma

Увеличиваю фрейм с текстом, нажав на клавишу «Ctrl и потянув за вернхнюю часть.

Первый экран для дизайна сайта

Меняем цвет элементов в Figma

Вставляю элементы шапки во фрейм с текстом. Получается заготовка для первого экрана лендинга.

Изменение цвета фрейма в фигме

Выделяю фрейм, справа внизу надписи Fill меняю белый (#FFFFFF) цвет на темно синий (#211132).

Дизайн сайта в Figma. Меняем цвет текста в фигме

Затем снова выбираю фрейм и внизу надписи «Selection colors» меняю «Серый 1» на «Белый».

Дизайн сайта в Figma. Результат замены цвета текста в фигме

Таким образом изменится цвет текста и заголовков.

Выбор текстового фрейма для замены цвета в фигме

Выбираю подзаголовок и меняю цвет аналогичным образом на белый.

Вставляем 3D фигуры в дизайн макет

Выбор 3D фигуры для вставки в дизайн

Выбираю какую-то фигуру, которую хочу использовать в своём проекте.

Затем вставляю её во фрейм. Фигура получается обрезанной.

Увеличение высоты фрейма в фигме

Увеличиваю фрейм нашего макета, чтобы фигуру было видно.

Замена цвета элементов в фигме

Далее выбираю фрейм и меняю «Синий» на «Желтый».

Меняем цвет текста в фигме

Где написано «Цвет на кнопках» нужно выбрать «Тёмный».

Добавляем новый раздел в дизайн макет Landing Page

Копирование элементов из шаблона в фигме

Копирую элементы с цифрами, чтобы добавить в наш дизайн макет.

Вставка элементов в дизайн фигмы

Вставляю цифры во фрейм.

Выбор элементов для вставки в дизайн сайта в фигме

Копирую 3 любых элемента.

Изменение размеров элементов в фигме

Ставлю высоту этих фигур 140 px.

Замена цифр на 3D фигуры в фигме

Затем помещаю эти фигуры вниз нашего фрейма.

Удаление цифр в фигме

Перетаскиваю элементы под цифры. Все перестроится автоматически, благодаря функции Auto Layout.

Удаляем цифры в этих прямоугольниках.

Выбор auto layout в фигме. Изменяем дизайн сайта в Figma

Выделяю элементы как показано на скриншоте выше с зажатой клавишей Shift.

Пример увеличения расстояния между элементами в фигме. Делаем дизайн сайта в Figma

Увеличиваю вертикальный отступ под надписью «Auto Layout» на 20.

Готовый дизайн сайта в figma

Результат, который получился у нас в итоге.

Заключение

Итак, вы этом видео вы узнали как использовать 3D фигуры и делать дизайн сайта в Figma.

P.S. Если хотите получить больше материалов, то ознакомьтесь с расширенным комплектом для создания дизайн макетов Landing Page по этой ссылке.

Автор статьи: Владимир Чернышов