В этой инструкции вы узнаете быстрый способ создания дизайн макетов в Figma, это урок веб-дизайна №4 из серии про быстрый дизайн. Смотрите видео ниже или воспользуйтесь текстовой версией урока.
Что можно научиться делать в Figma за 10-15 минут?
![Пример дизайна сайта в figma. Результат урока.](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-01-1024x865.jpg)
В результате просмотра урока и применении на всех рекомендаций на практике по шагам, у вас получится такой дизайн макет первого экрана Landing Page. В дальнейшем вы сможете использовать эти знания и наработки в других своих проектах.
Скачивание и установка шаблонов для веб-дизайна в Figma
Чтобы скачать комплект заготовок и шаблонов для фигмы «Sirius 1.1» перейдя по этой ссылке. Внизу страницы укажите ваше имя и email. На почту придёт вся информация о скачивании шаблонов.
![Скачивание комплекта шаблонов для фигмы](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-02-1024x582.jpg)
Для установки шаблонов в фигму перенесите файл «Комплект Sirius 1.1.fig» в разделе «Drafts» к другим элементам, либо нажмите на кнопку «Import» в верхнем правом углу.
![Шаблон для фигмы. Урок веб-дизайна](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-03-1024x582.jpg)
После загрузки у вас будет отображаться новый файл, который вам нужно будет открыть.
Где брать фото для веб-дизайна с прозрачным фоном?
![Сайт с людьми с прозрачным фоном](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-04-1024x582.jpg)
Если вам нужны крутые фото людей или предметов с прозрачным фоном, перейдите по адресу icons8.com/photos.
![Пример фото для урока по веб-дизайну](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-05-1024x582.jpg)
Среди фотографий я выбрал эту женщину, чтобы использовать её в своём дизайн макете Landing Page. Ссылка на изображение.
![Скачивание фотографии с женщиной](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-06-1024x582.jpg)
Чтобы скачать фото, нажмите на кнопку «Download» справа. В появившемся окне нажмите кнопку под надписью «Free trial».
Практика создания дизай макета в Figma за 8 минут.
![Вставка изображения в Figma](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-07-1024x582.jpg)
Переместите фото в комплект Sirius, который скачали и установили в фигму.
![Копирование шаблонов для создания макета в Figma](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-08-1024x582.jpg)
Скопируйте 2 элемента из комплекта — шапку сайта и раздел с текстом.
![Создание заготовки для первого экрана сайта в фигме](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-09-1024x582.jpg)
Удалите лишние элементы из раздела с текстом, затем увеличьте фрейм, зажав клавишу Ctrl и потяните верх фрейма с зажатой клавишей мыши вверх.
![Разгруппировка фрейма в Figma](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-10-1024x582.jpg)
Затем выберите шапку сайта и нажмите правую клавишу мыши. Выберите пункт «Ungroup», чтобы разгруппировать фрейм.
![Пример готовой заготовки для дизайн макета в фигме](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-11-1024x582.jpg)
Переместите элементы из шапки во фрейм с текстом, чтобы получить первый экран сайта.
![Вставка фото в заготовку для первого экрана landing page в фигме](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-12-1024x582.jpg)
Переместите фотографию с женщиной справа от текста, чтобы было примерно как на скриншоте выше.
![Копирование элементов для дизайна первого экрана лендинга](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-13-1024x582.jpg)
Скопируйте дополнительные элементы из шаблонов с иконками, как показано выше. Для этого нажмите клавиши «Ctrl» «С».
![Удаление элемента (кнопки) в макете](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-14-1024x582.jpg)
Удалите кнопку из шаблона.
![Вставка элементов в дизайн макет. Урок веб-дизайна](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-15-1024x582.jpg)
Выделите текст и вставьте скопированные иконки нажав на «Ctrl» «V».
![Вставка элементов в дизайн макет сайта в фигме. Урок веб-дизайна.](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-16-1024x582.jpg)
В результате вставки у вас получиться следующий промежуточный результат.
![Копирование формы из шаблонов для создания макета лендинга в фигме](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-17-1024x582.jpg)
Скопируйте из готовых шаблонов для фигмы контактную форму, как показано выше.
![Вставка формы захвата в первый экран лендинга. Урок веб-дизайна.](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-18-1024x582.jpg)
Вставьте форму в дизайн макет ниже женщины.
Замена цвета во всём дизайн макете Figma с помощью «Selection colors»
![Изменение цвета с помощью функции selection colors в Figma](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-19-1024x582.jpg)
Чтобы заменить цвет во всем макете в Figma, выберите фрейм. Слева под надписью «Selection colors» выберите «Синий», затем измените его на «Оранжевый».
![Изменение цвета текста с помощью функции selection colors в Figma](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-20-1024x582.jpg)
Аналогичным образом измените темный цвет на кнопках на белый.
![Результат при изменении цвета текста в фигме](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-21-1024x582.jpg)
В результате у вас получиться такой промежуточный результат. Теперь добавим декоративные элементы.
Добавляем декоративные элементы в дизайн сайта
Чтобы «оживить» наш дизайн макет и сделать его более интересным добавим элементы на фон. Это будут круги.
![Рисуем прямоугольник в фигме](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-22-1024x582.jpg)
Для начала создадим прямоугольник с помощью инструмента «Rectangle». Размеры 1325 x 1325 px.
![Создаем из прямоугольника круг в figma](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-23-1024x582.jpg)
Затем задайте скругление 1000, чтобы создать круг. Можно сразу создать эллипс с помощью этого инструмента.
![Удаление обводки в круге в фигме](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-24-1024x582.jpg)
Удаляем у круга заливку нажав внизу надписи «Fill» на минус. Затем добавляем обводку внизу надписи «Stroke» нажав на плюс.
![Создание обводки у круга в фигме толщиной 400 px. Урок веб-дизайна.](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-26-1024x582.jpg)
Ставим размеры обводки 400 px.
![Изменение цвета круга на желтый в фигме.](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-27-1024x582.jpg)
Изменяем цвет круга на оранжевый, чтобы он вписывался в наш дизайн макет.
![Перемещение круга в дизайна макет лендинга в Figma](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-28-1024x582.jpg)
Перемещаем круг в левый верхний угол, чтобы он располагался за женщиной.
![Перемещение круга на задний план в дизайна макете сайта](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-29-1024x582.jpg)
Перемещаем круг на задний план, чтобы все выглядело как на скриншоте выше. Для этого можно нажать на комбинацию клавиш «Alt» «Ctrl» «[».
![Результат после перемещения круга на задний план в дизайн макете](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-30-1024x582.jpg)
Результат, который получиться после перемещения круга на задний план. Можно подвигать элементы шапки, чтобы они не заезжали на круг (электронная почта и адрес). Телефон оставим в круге.
![Копирование круга в фигме и перемещение его в сторону.](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-31-1024x582.jpg)
Копируем круг и перемещаем его в сторону (Ctrl C) (Ctrl V).
![Изменение размера круга в фигме.](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-32-1024x582.jpg)
Выбираем инструмент «Scale», чтобы изменить размеры круга.
![Уменьшение размера круга в фигме. Урок веб-дизайна.](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-33-1024x582.jpg)
Делаем круг примерно как на скриншоте выше и перемещаем его чуть выше формы слева.
![Дублирование круга в фигме. Перемещение элемента.](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-34-1024x582.jpg)
Копируем круг и уменьшаем его в размерах. Помещаем его рядом с логотипом сверху.
![Добавляем размытие на элемент в фигме. Урок веб-дизайна.](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-35-1024x582.jpg)
Добавляем эффект размытия нажав на плюс внизу надписи «Effects» и изменяем значение на «Layer blur»
![Добавляем размытие на элемент в фигме. Урок веб-дизайна.](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-36-1024x582.jpg)
Нажимаем на иконку солнца и ставим значение на 24, чтобы размытие было больше.
Добавление новых иконок в дизайн макет фигмы
![Перемещение дизайн макета на другую страницу в фигме. Урок веб-дизайна.](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-37-1024x582.jpg)
Выделяем фрейм и вырезаем его нажав на «Ctrl» «X».
![Вставка дизайн макета на страницу с иконками в фигме. Урок веб-дизайна.](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-38-1024x582.jpg)
Переходим на страницу «Иконки» и вставляем наш дизайн макет нажав на «Ctrl» «V».
![Копирование иконок для вставки в дизайн макет сайта.](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-39-1024x582.jpg)
Скопируем понравившиеся иконки. Лучше выбирать иконки, которые подходят по смыслу текста, но поскольку мы не изменяли тут текст, то просто выберем случайные.
![Вставка иконок в дизайн макет лендинга.](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-40-1024x582.jpg)
Переместим иконки рядом с дизайн макетом.
![Вставка иконок в дизайн макет лендинга. Урок веб-дизайна.](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-41-1024x582.jpg)
Выделим все иконки и изменим цвет на оранжевый, как показано на скриншоте выше.
![Перемещение новых иконок на место старых.](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-42-1024x582.jpg)
Переместим иконки между старой иконкой и текстом.
![Удаление старых иконок в дизайн макете фигмы.](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-43-1024x582.jpg)
Аналогичную операцию сделаем с другими иконками. Старые иконки удалим.
![Изменение прозрачности элементов в фигме. Урок веб-дизайна.](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-44-1024x582.jpg)
В завершении сделаем финальный штрих. Изменим прозрачность круга с женщиной на 50%.
Урок веб-дизайна. Заключение.
![Результат. Урок веб-дизайна](https://web-design.center/wp-content/uploads/2021/09/urok-veb-dizajna-45-1024x857.jpg)
Итак, вы этом видео вы узнали как быстро делать дизайн Landing Page в Figma. Урок веб-дизайна подошел к концу. В результате получили классный дизайн макет, который можно добавить к вашему потфолио.
Конечно если добавлять его, то стоит изменить текст, чтобы это была не просто картинка, а картинка со смыслом. Смысловой слой не может жить, без визуального слоя, поэтому при работе с реальными проектами стоит продумывать текст заранее, поскольку именно от него зависит эффективность.
P.S. Ознакомьтесь с расширенным комплектом для создания прототипов и дизайна Landing Page «Дизайн генератор» по этой ссылке.
Автор статьи: Владимир Чернышов
Это был урок веб-дизайна в Figma №4. Смотрите другие уроки тут.
P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).