В этом уроке вы узнаете как сделать дизайн сайта в Figma за 10 минут и познакомитесь с сайтом, где можно брать классные 3D фигуры. На практике сделаем первый экран сайта используя эти 3D фигуры.
![Дизайн сайта в фигме. Пример](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-01-1024x729.jpg)
В результате этого урока вы сможете сделать такой дизайн первого экрана Landing Page (пример выше).
Где найти 3D элементы для дизайна сайта в Figma
![Сайт с 3D фигурами для дизайна сайта в Figma](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-02-1024x568.jpg)
Вы можете найти 3D элементы на сайте shapefest.com. Здесь представлено множество фигур, которые вы сможете использовать в своих проектах.
![Примеры 3D фигур. Создаем дизайн сайта в Figma](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-03-1024x530.jpg)
Для примера выберу комплект материалов под названием «Clay Shapes».
![Комплект 3D фигур для дизайнаКомплект 3D фигур для дизайна](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-04-1024x531.jpg)
Чтобы скачать элементы нажмите на кнопку под заголовком, как показано на скриншоте выше.
![Инструкция по загрузке комплекта с 3D фигурами. Создаем дизайн сайта в Figma](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-05-1024x532.jpg)
Затем нажмите кнопку «Continue»
![Инструкция по загрузке комплекта с 3D фигурами](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-06-1024x529.jpg)
Внесите ваш email и нажмите на кнопку Download for FREE.
![Скачивание по загрузке комплекта с 3D фигурами](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-07-1024x689.jpg)
На почту придет письмо, где нужно нажать зеленую кнопку «View your order».
![Скачивание по загрузке комплекта с 3D фигурами. Инструкция](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-08-1024x529.jpg)
Вас перенаправит на страницу скачивания материалов. Вес немного большой (1.2 ГБ). Чтобы скачать нажмите на «Download».
![Пример папки с элементами для дизайна сайта](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-09-1024x660.jpg)
Распакуйте скачанный архив. После этого у вас появиться множество папок с материалами.
![Комплект шаблонов для дизайна сайта](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-10-1024x529.jpg)
Скачивание шаблонов для Figma
Второй шаг, который вам нужно сделать — это скачать комплект материалов для Figma SIRIUS. Скачать можно здесь.
![](https://web-design.center/wp-content/uploads/2021/09/dizajn-sajta-v-figma-11-1024x571.jpg)
После скачивания комплекта у вас появиться файл под названием «Комплект SIRIUS 1.1». Вы можете загрузить его в Figma перейдя во вкладку «Drafts» и перетащив к другим файлам.
![](https://web-design.center/wp-content/uploads/2021/09/dizajn-sajta-v-figma-12-1024x571.jpg)
После загрузки файл будет выглядеть вот так.
![Пример комплекта для создания дизайна сайта в Figma](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-13-1024x571.jpg)
В комплекте представлены заготовки, которые помогут ускорить ваш дизайн процесс. Здесь есть меню, элементы для первого экрана, иконки, видео и т.д.
Делаем дизайн Landing Page в Figma
Теперь перейдём к процессу создания дизайна с помощью этих заготовок.
![Создание новой страницы в Figma](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-14-1024x571.jpg)
Чтобы не создавать хаос, я создаю новую страницу под названием «Shapes».
![Выбор папки с элементами для дизайна](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-15-1024x720.jpg)
Захожу в папку с 3D фигурами, которую ранее скачал. Открываю папку «Clay 01 Red».
![Выбор папки с элементами для дизайна](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-16-1024x717.jpg)
Далее открываю папку «Angle_A1»
![Копирование всех элементов в папке](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-17-1024x572.jpg)
Выбираю один элемент и нажимаю комбинацию клавиш «Ctrl» «A», чтобы выделить все элементы в папке.
![Вставка всех элементов для дизайна сайта в Figma](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-18-1024x570.jpg)
После выделения перетаскиваю все 3D элементы в фигму.
![Пример 3D фигур для дизайна сайта в Figma.](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-19-1024x571.jpg)
В итоге у вас будут на виду все фигуры, что удобно в работе.
![Шаблоны для Figma](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-20-1024x574.jpg)
Перехожу к шаблонам и копирую 2 элемента: шапку и раздел с заголовком, текстом и кнопкой внизу. Чтобы скопировать элементы нажимаю «Ctrl» «С».
![Вставка элементов на новую страницу](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-21-1024x571.jpg)
Возвращаюсь на страницу с фигурами и вставляю скопированные элементы нажав на «Ctrl» «V»
![Разгруппировка фрейма в фигме](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-22-1024x571.jpg)
Выделяю шапку и нажимаю комбинацию клавиш «Ctrl» «Shift» «G», чтобы разгруппировать фрейм и оставить только элементы находящиеся в нём.
![Перемещение элементов во фрейм в фигме. Дизайн сайта в Figma](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-23-1024x571.jpg)
Увеличиваю фрейм с текстом, нажав на клавишу «Ctrl и потянув за вернхнюю часть.
![Первый экран для дизайна сайта](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-24-1024x571.jpg)
Меняем цвет элементов в Figma
Вставляю элементы шапки во фрейм с текстом. Получается заготовка для первого экрана лендинга.
![Изменение цвета фрейма в фигме](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-25-1024x571.jpg)
Выделяю фрейм, справа внизу надписи Fill меняю белый (#FFFFFF) цвет на темно синий (#211132).
![Дизайн сайта в Figma. Меняем цвет текста в фигме](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-26-1024x571.jpg)
Затем снова выбираю фрейм и внизу надписи «Selection colors» меняю «Серый 1» на «Белый».
![Дизайн сайта в Figma. Результат замены цвета текста в фигме](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-27-1024x571.jpg)
Таким образом изменится цвет текста и заголовков.
![Выбор текстового фрейма для замены цвета в фигме](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-28-1024x571.jpg)
Выбираю подзаголовок и меняю цвет аналогичным образом на белый.
Вставляем 3D фигуры в дизайн макет
![Выбор 3D фигуры для вставки в дизайн](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-29-1024x571.jpg)
Выбираю какую-то фигуру, которую хочу использовать в своём проекте.
![](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-30-1024x571.jpg)
Затем вставляю её во фрейм. Фигура получается обрезанной.
![Увеличение высоты фрейма в фигме](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-31-1024x571.jpg)
Увеличиваю фрейм нашего макета, чтобы фигуру было видно.
![Замена цвета элементов в фигме](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-32-1024x571.jpg)
Далее выбираю фрейм и меняю «Синий» на «Желтый».
![Меняем цвет текста в фигме](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-33-1024x570.jpg)
Где написано «Цвет на кнопках» нужно выбрать «Тёмный».
Добавляем новый раздел в дизайн макет Landing Page
![Копирование элементов из шаблона в фигме](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-34-1024x570.jpg)
Копирую элементы с цифрами, чтобы добавить в наш дизайн макет.
![Вставка элементов в дизайн фигмы](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-35-1024x571.jpg)
Вставляю цифры во фрейм.
![Выбор элементов для вставки в дизайн сайта в фигме](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-36-1024x571.jpg)
Копирую 3 любых элемента.
![Изменение размеров элементов в фигме](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-37-1024x571.jpg)
Ставлю высоту этих фигур 140 px.
![Замена цифр на 3D фигуры в фигме](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-38-1024x571.jpg)
Затем помещаю эти фигуры вниз нашего фрейма.
![Удаление цифр в фигме](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-39-1024x571.jpg)
Перетаскиваю элементы под цифры. Все перестроится автоматически, благодаря функции Auto Layout.
![](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-40-1024x571.jpg)
Удаляем цифры в этих прямоугольниках.
![Выбор auto layout в фигме. Изменяем дизайн сайта в Figma](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-41-1024x571.jpg)
Выделяю элементы как показано на скриншоте выше с зажатой клавишей Shift.
![Пример увеличения расстояния между элементами в фигме. Делаем дизайн сайта в Figma](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-42-1024x579.jpg)
Увеличиваю вертикальный отступ под надписью «Auto Layout» на 20.
![Готовый дизайн сайта в figma](https://web-design.center/wp-content/uploads/2021/07/dizajn-sajta-v-figma-43-1024x767.jpg)
Результат, который получился у нас в итоге.
Заключение
Итак, вы этом видео вы узнали как использовать 3D фигуры и делать дизайн сайта в Figma.
P.S. Если хотите получить больше материалов, то ознакомьтесь с расширенным комплектом для создания дизайн макетов Landing Page по этой ссылке.
Автор статьи: Владимир Чернышов
P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).