Вернуться назад

Создаём макет сайта в Figma за 30 минут

Установка Figma

Figma – популярный графический редактор для проектирования дизайна сайта, продукта или другого приложения. Если вам непонятна какая-либо кнопка в самом приложении, наведите курсор на нее – всплывет подсказка.

Установить Figma вы можете по этой ссылке на любое устройство:

Figma Downloads | Web Design App for Desktops & Mobile

Подготовка пространства

Нажимаем на плюсик в левом верхнем углу

Теперь нажимаем на кнопку «Design». Это стандартный файл, в котором создаются макеты, прототипы и верстка.

Перед вами чистый холст. Чтобы создать фрейм (лист бумаги, на котором мы «рисуем» сайт), нажмите «F» на клавиатуре.

Выбираем размер 1440 на 1024 (Desktop)

Нужно сделать сетку, чтобы в дальнейшем нам было легче выравнивать элементы сайта. Нажимаем на плюс возле «Layoutguide», а дальше на #.

В появившемся окне вместо разметки «Grid» нужно выбрать «Columns».

Ставите такие настройки.

Marginотвечает за отступы от краев, Gutterотвечает за промежуток между колонками. Цвет можете выбрать любой, главное, чтобы он был хорошо виден на фоне фрейма.

Сейчас окно выглядит так. Поздравляю, второй этап выполнен.

Верстка шапки сайта

Шапка сайта должна содержать в себе имя и навигационное меню сайта.

1 шаг. Делаем имя сайта

Нажмите клавишу T(Text), зажмите левую кнопку мыши, проведите мышку вправо и отпустите. Должен появиться прямоугольник, размеры не важны, ведь мы поправим их в настройках справа. Введите имя/название компании.

Настройки выглядят изначально примерно так. Y – отступ от верхнего края, а X– отступ от левого края. Чтобы над шапкой было пространство оптимальный вариант Yот 20 до 30px, Xлучше поставить 120.

«Dimensions» (размеры) вам нужно настроить самим. Cледите, чтобы текст был был в 1 ряд, а не в 2.

В «Typograthy» автоматически стоит «Inter» - шрифт, «Regular» - толщина текста, «12» - размер текста, «Lineheight» - высота строки, «Letterspacing» - расстояние между буквами. Все это вы можете настроить сами.

Настройки имени и макет выглядят так:

2 шаг. Делаем навигационное меню

Навигационное меню будет состоять из элементов:

PORTFOLIO

ABOUT

BLOG

CONTACT

Сделайте их сами, следуя инструкции из прошлого шага. Размер должен быть меньше, чем имя, чтобы не рушить иерархию.

3 шаг. Группировка в Auto Layout (создание меню).

Auto Layout делает единый блок из нескольких объектов.

Для этого выделите все четыре текстовых слоя (PORTFOLIO, ABOUT, BLOG, CONTACT) и нажмите сочетание клавиш Shift + A.

В левом углу нажмите на файл и переименуйте созданный блок (Frame1) на Navigationmenuдля дальнейшего удобства через сочетание клавиш Ctrl + R.

На правой панели в секции Auto Layout в графе Alignmentвыберите Aligntopright(3-ий элемент в первой строке), чтобы при изменении размера навигации последние элементы не уезжали за пределы объекта навигации.

4 шаг. Сборка финальной шапки

Теперь объединим Имя и Меню:

Выделите текстовый слой имени (Alexey Makarov).
Выделите фрейм Navigation menu.
Снова нажмите Shift + Aи назовите получившийся фрейм Header.
Нажмите на имя и в графе размеров измените фиксированный размер на Fillcontainer(нажмите на кнопку, на которую показывает стрелка), чтобы независимо от размера устройства имя всегда находилось у края.

5. Сделайте тоже самое с навигационным меню

6. В настройках Headerизмените Gap(промежуток между элементами внутри фрейма Header) на Auto.

На этом все, шапка сайта полностью готова.

Верстка главного экрана

1. Добавление фотографии из путешествия

Зажмите клавишу Rи сделайте прямоугольник шириной во весь экран. В настройках высоту от края поставьте примерно 120-150, чтобы фотография была ровно под шапкой. Сделайте высоту такой, чтобы она занимала бо́льшую часть экрана.

Для добавления изображения нужно в секции Fillнажать на цвет и выбрать картинку изображения. В появившемся окне нажмите на «Uploadfromcomputer» и перенесите изображение с компьютера.

2. Заголовок и подзаголовок

· Создайте текстовое поле по центру и добавьте текст «JOURNEYS CAPTURED» либо похожее. Текст должен сразу привлечь внимание читателя, поэтому размер должен быть примерно 60-80px и цвет должен быть хорошо виден на фоне вашего изображения.

· Создайте подзаголовок с надписью «Emotions & LandscapesThroughaLens» или другой надписью. Размер подзаголовка будет 25-40px.

Теперь создадим кнопку, при нажатии которой пользователь перейдет в блог.

1. Тексткнопки: Нажмите T инапишите«VIEW LATEST ADVENTURES».

2. Выделите этот текст и нажмите Shift + A

3. Оформление:

Padding (Отступы): установите 30px по горизонтали и 16px по вертикали.
Fill (Заливка): сделайте заливку белой (#FFFFFF).

Вид главной страницы:

Создание портфолио

1. Создаем новый фрейм с размером Dekstop(1440 на 1024).

2. Настройте вертикальный отступ на 100px и горизонтальный отступ на 120px.

3. Добавление заголовка. Зажмите клавишу T, добавьте крупный текст «PORTFOLIO» и разместите по центру.

4. Создание карточки портфолио. Зажмите клавишу R и создайте прямоугольник с размерами 280 на 350px. В графе Fill вместо заливки выберите иконку с изображением (image), чтобы в дальнейшем вставить фотографию.

Выделите прямоугольник и скопируйте его (Ctrl+C), а теперь 2 раза вставьте копию в этот же файл (Ctrl+V).

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

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

1. Создание сетки из карточек портфолио. Теперь выделите эти три элемента и скопируйте их. Перенесите их под верхний ряд.

Выровнять все элементы можно с помощью AutoLayout. Для этого выделите оба ряда и нажмите Shift + A.

В созданном фрейме в секции AutoLayoutв разделе Gap(промежуток между элементами) поставьте значение 150-180.

Отлично! Портфолио почти готово.

2. Оформление портфолио. Последний шаг – в каждую карточку портфолио нужно вставить фотографию. В левой части экрана есть кнопка File, нажмите на нее и увидите фрейм, который создали для рядов фотографий. Нажмите на него, под ним будут 6 карточек портфолио, ранее созданных.

Нажмите на объект с надписью Rectangleв секции Fill, в графе imageвставьте изображение.

Итоговый сайт выглядит так. Чтобы закрепить полученные знания создайте остальные страницы сайта (About, Blog, Contact) сами. Старайтесь чаще использовать AutoLayout. С его помощью легче выравнивать несколько объектов и задавать общие настройки всем объектам.

Заключение

В этой статье поэтапно разобран процесс создания макета сайта в Figma — от настройки файла и создания базовых фреймов до разработки дизайна. Использование Auto Layout значительно ускоряет работу.Созданный макет — основа для дальнейшей работы. Его можно использовать для подготовки технического задания для фронтендеров или для создания дизайн-системы более крупного проекта.

Поздравляю с созданием вашего первого макета! Продолжайте практиковаться, изучать новые инструменты Figma и пробовать себя в разных стилях. Дизайн — это путь постоянного роста, где каждый проект делает вас немного опытнее. Удачи в дальнейшем освоении Figma и дизайна!

Автор статьи: Мина Манафова, ученица «САИКТ» на курсе «Проектная деятельность»