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

Урок веб-дизайна. Быстрый способ делать дизайн макеты в Figma.

В этой инструкции вы узнаете быстрый способ создания дизайн макетов в Figma, это урок веб-дизайна №4 из серии про быстрый дизайн. Смотрите видео ниже или воспользуйтесь текстовой версией урока.

Что можно научиться делать в Figma за 10-15 минут?

Пример дизайна сайта в figma. Результат урока.

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

Скачивание и установка шаблонов для веб-дизайна в Figma

Чтобы скачать комплект заготовок и шаблонов для фигмы «Sirius 1.1» перейдя по этой ссылке. Внизу страницы укажите ваше имя и email. На почту придёт вся информация о скачивании шаблонов.

Скачивание комплекта шаблонов для фигмы

Для установки шаблонов в фигму перенесите файл «Комплект Sirius 1.1.fig» в разделе «Drafts» к другим элементам, либо нажмите на кнопку «Import» в верхнем правом углу.

Шаблон для фигмы. Урок веб-дизайна

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

Где брать фото для веб-дизайна с прозрачным фоном?

Сайт с людьми с прозрачным фоном

Если вам нужны крутые фото людей или предметов с прозрачным фоном, перейдите по адресу icons8.com/photos.

Пример фото для урока по веб-дизайну

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

Скачивание фотографии с женщиной

Чтобы скачать фото, нажмите на кнопку «Download» справа. В появившемся окне нажмите кнопку под надписью «Free trial».

Практика создания дизай макета в Figma за 8 минут.

Вставка изображения в Figma

Переместите фото в комплект Sirius, который скачали и установили в фигму.

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

Скопируйте 2 элемента из комплекта — шапку сайта и раздел с текстом.

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

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

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

Затем выберите шапку сайта и нажмите правую клавишу мыши. Выберите пункт «Ungroup», чтобы разгруппировать фрейм.

Пример готовой заготовки для дизайн макета в фигме

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

Вставка фото в заготовку для первого экрана landing page в фигме

Переместите фотографию с женщиной справа от текста, чтобы было примерно как на скриншоте выше.

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

Скопируйте дополнительные элементы из шаблонов с иконками, как показано выше. Для этого нажмите клавиши «Ctrl» «С».

Удаление элемента (кнопки) в макете

Удалите кнопку из шаблона.

Вставка элементов в дизайн макет. Урок веб-дизайна

Выделите текст и вставьте скопированные иконки нажав на «Ctrl» «V».

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

В результате вставки у вас получиться следующий промежуточный результат.

Копирование формы из шаблонов для создания макета лендинга в фигме

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

Вставка формы захвата в первый экран лендинга. Урок веб-дизайна.

Вставьте форму в дизайн макет ниже женщины.

Замена цвета во всём дизайн макете Figma с помощью «Selection colors»

Изменение цвета с помощью функции selection colors в Figma

Чтобы заменить цвет во всем макете в Figma, выберите фрейм. Слева под надписью «Selection colors» выберите «Синий», затем измените его на «Оранжевый».

Изменение цвета текста с помощью функции selection colors в Figma

Аналогичным образом измените темный цвет на кнопках на белый.

Результат при изменении цвета текста в фигме

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

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

Чтобы «оживить» наш дизайн макет и сделать его более интересным добавим элементы на фон. Это будут круги.

Рисуем прямоугольник в фигме

Для начала создадим прямоугольник с помощью инструмента «Rectangle». Размеры 1325 x 1325 px.

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

Затем задайте скругление 1000, чтобы создать круг. Можно сразу создать эллипс с помощью этого инструмента.

Удаление обводки в круге в фигме

Удаляем у круга заливку нажав внизу надписи «Fill» на минус. Затем добавляем обводку внизу надписи «Stroke» нажав на плюс.

Создание обводки у круга в фигме толщиной 400 px. Урок веб-дизайна.

Ставим размеры обводки 400 px.

Изменение цвета круга на желтый в фигме.

Изменяем цвет круга на оранжевый, чтобы он вписывался в наш дизайн макет.

Перемещение круга в дизайна макет лендинга в Figma

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

Перемещение круга на задний план в дизайна макете сайта

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

Результат после перемещения круга на задний план в дизайн макете

Результат, который получиться после перемещения круга на задний план. Можно подвигать элементы шапки, чтобы они не заезжали на круг (электронная почта и адрес). Телефон оставим в круге.

Копирование круга в фигме и перемещение его в сторону.

Копируем круг и перемещаем его в сторону (Ctrl C) (Ctrl V).

Изменение размера круга в фигме.

Выбираем инструмент «Scale», чтобы изменить размеры круга.

Уменьшение размера круга в фигме. Урок веб-дизайна.

Делаем круг примерно как на скриншоте выше и перемещаем его чуть выше формы слева.

Дублирование круга в фигме. Перемещение элемента.

Копируем круг и уменьшаем его в размерах. Помещаем его рядом с логотипом сверху.

Добавляем размытие на элемент в фигме. Урок веб-дизайна.

Добавляем эффект размытия нажав на плюс внизу надписи «Effects» и изменяем значение на «Layer blur»

Добавляем размытие на элемент в фигме. Урок веб-дизайна.

Нажимаем на иконку солнца и ставим значение на 24, чтобы размытие было больше.

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

Перемещение дизайн макета на другую страницу в фигме. Урок веб-дизайна.

Выделяем фрейм и вырезаем его нажав на «Ctrl» «X».

Вставка дизайн макета на страницу с иконками в фигме. Урок веб-дизайна.

Переходим на страницу «Иконки» и вставляем наш дизайн макет нажав на «Ctrl» «V».

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

Скопируем понравившиеся иконки. Лучше выбирать иконки, которые подходят по смыслу текста, но поскольку мы не изменяли тут текст, то просто выберем случайные.

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

Переместим иконки рядом с дизайн макетом.

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

Выделим все иконки и изменим цвет на оранжевый, как показано на скриншоте выше.

Перемещение новых иконок на место старых.

Переместим иконки между старой иконкой и текстом.

Удаление старых иконок в дизайн макете фигмы.

Аналогичную операцию сделаем с другими иконками. Старые иконки удалим.

Изменение прозрачности элементов в фигме. Урок веб-дизайна.

В завершении сделаем финальный штрих. Изменим прозрачность круга с женщиной на 50%.

Урок веб-дизайна. Заключение.

Результат. Урок веб-дизайна

Итак, вы этом видео вы узнали как быстро делать дизайн Landing Page в Figma. Урок веб-дизайна подошел к концу. В результате получили классный дизайн макет, который можно добавить к вашему потфолио.

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

P.S. Ознакомьтесь с расширенным комплектом для создания прототипов и дизайна Landing Page «Дизайн генератор» по этой ссылке.

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

Это был урок веб-дизайна в Figma №4. Смотрите другие уроки тут.