Дизайн в фигме
Веб-дизайн, Уроки

Дизайн сайта в фигме за 15 минут: делаем макет с иллюстрациями

В этом уроке разбираемся как сделать дизайн сайта в фигме за 15 минут на практике. Будем делать дизайн макет Landing Page с иллюстрациями. Вы узнаете, где брать качественные иллюстрации бесплатно и как их использовать в своём проекте.

Подготовка к созданию дизайна сайта

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

Первым делом вам нужно скачать и установить комплект, который я для вас подготовил. С его помощью вы сможете ускорить работу при создании Landing Page. Нажмите здесь, чтобы скачать комплект

Установка комплекта sirius в figma

Чтобы установить комплект перейдите в раздел «Drafts» и перетащите его к другим файлам, которые у вас есть. Также слева, сверху есть иконка «Import». Можете её нажать и выбрать файл «Sirius.fig» на вашем компьютере.

Установка плагина с иллюстрациями для создания дизайна сайта в фигме

Установка плагина storyset by freepik в фигме

В этом уроке мы будем использовать плагин с иллюстрациями «Storyset by freepik», который вы можете установить перейдя по ссылке. Для его установки нажмите на кнопку «Install» сверху, справа.

Пошаговая инструкция по созданию дизайна сайта в Figma

Создание первого экрана

Создание заготовки для первого экрана сайта в фигме. Дизайн

Первым делом, вам нужно взять элементы из комплекта, который вы ранее установили. Рекомендую взять шапку и раздел с текстом, как показано выше. Поместите шапку к тексту.

Активация плагина storyset by freepik

Чтобы активировать плагин, который мы установили «Нажмите на меню слева», далее перейдите в «Plagins» и выберите из списка «Storyset by freepik».

Добавление иллюстрации в дизайн сайта в фигме

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

Размещение иллюстрации в дизайн сайта в фигме

Помещаю иллюстрацию во фрейм к нашим элементам и тексту.

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

Выбираю фрейм и в правой панели, внизу надписи «Fill» ставлю значение цвета #241543.

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

Затем меняю цвет текста на белый.

Удаление лишних элементов в иллюстрации

Удаляю не нужные элементы в иллюстрации. Чтобы выбрать какой-то элемент, нажимаю на клавшу «Ctrl» и кликаю на левую клавишу мыши для выбора объекта за 1 клик.

Добавление круга в дизайна сайта в фигме

Создаю круг с помощью инструмента «Ellipse».

Перемещение круга вниз в слоях

Помещаю круг во фрейм и перемещаю на задний план. Для этого нажимаю на комбинацию горячих клавиш «Ctrl + Alt + [».

Изменение цвета круга

Изменяю цвет круга на #3B246B.

Создание карточек внизу первого экрана

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

Затем копирую из комплекта карточки товара. Для копирования нажимаю «Ctrl + C».

Вставка карточек товаров в фигме

Чтобы вставить элементы нажимаю «Ctrl + V».

Копирование в фигме

Копирую верний элемент из карточки зажав левую клавиши мыши и клавишу Alt. Тяну в сторону.

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

Создаю внутри этого прямоугольника ещё один прямоугольник. Для этого активирую инструмент «Rectangle» сверху.

Выравнивание в фигме

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

Создание фрейма вокруг элементов в фигме

Выделяю 2 прямоугольника, нажимаю правую клавишу мыши и выбираю «Frame seleciton».

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

Переименовываю слой на «Img».

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

Копирую группу элементов с зажатой клавишей «Alt».

Создание шести заготовок для карточек товаров в фигме

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

Вставка иллюстраций в карточки в фигме

Запускаю плагин с иллюстрациями «Storyset by freepik» и нажимаю на прямоугольник. Затем на иллюстрацию. Аналогичную операцию проделываю с другими 6 прямоугольниками.

Выбор и удаление не нужных элементов в картчоке товара

Выбираю кнопки и цены, с зажатыми клавишами «Ctrl» «Shift». Затем удаляю нажав на клавишу «Backspace».

Карточки товара

Получаются карточки, без цены и кнопки.

Вставка картинок в карточки товара в фигме

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

Картинки в карточках товаров

Удаляю не нужные элементы сверху карточек. Получается 3 карточки с иллюстрациями.

Дублирование и добавление новых картинок в карточки товаров в дизайн сайта в фигме

Дублирую карточки, нажав на «Ctrl + D». Затем помещаю 3 оставшиеся иллюстрации в эти карточки.

Дизайн сайта в фигме. Каталог товаров

Получилось 6 карточек с иллюстрациями.

Вставка карточек во фрейм с иллюстрациями и дизайном сайта

Перемещаю карточки к нашему фрейму.

Изменение цвета в дизайне сайта с иллюстрациями в Figma

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

Далее выбираю иллюстрации и справа, внизу надписи «Selection colors» выбираю синий вместо того синиего цвета, который есть сейчас.

Синий цвет иллюстраций в фигме

Все элементы имеют значение «Синий» в цветовой палитре.

Розовый цвет иллюстраций в фигме

Если его изменить например на розовый, то цвет всех элементов также изменится.

Копирование элементов текста в дизайн сайта в фигме

Можно дополнительно скопировать какие-то элементы в комплекте. Например текст с цифрами.

Вставка текста в дизайна сайта в фигме

Затем разместить их внизу заголовка.

Результат дизайна сайта в фигме с иллюстрацией

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

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

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

Заключение

Итак, в этом видео вы узнали как сделать сайта (дизайн лендинг пейдж) в фигме. Также разобрались с плагином, который позволяет вставлять классные иллюстрации. Смотрите другие уроки по веб-дизайну, которые помогут разобраться в программе Figma и набить руку.

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

P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).