Как работать в Фигме (Figma): создаём макет сайта с нуля

В этой публикации мы познакомимся с самой удобной (на мой взгляд) программой для создания прототипов, макетов интерфейса и дизайна — Фигмой (Figma).

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

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

По результатам прочтения этой публикации и выполнения написанных в ней действий вы сможете создать свой первый макет в Фигме. Давайте начнём.

Задание: редизайн страницы сайта Тинькофф

Предлагаю попробовать сделать дизайн (скопировать дизайн) страницы сайта Тинькофф, посвящённый их дебетовой карте Tinkoff Black.

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

Как работать в Фигме: редизайн страницы сайта Тинькофф
Страница сайта банка Тинькофф

Создаём фрейм в Фигме и настраиваем сетку

Итак, приступим! Первое, что я сделала — зашла на страницу сайта Тинькофф и сделала скриншот. Это нужно, чтобы постоянно не возвращаться к веб-ресурсу, и референс всегда был перед глазами.

  1. Сделав скриншот, перетащите его с рабочего стола на рабочую область (серое поле) Фигмы.
  2. Далее нужно создать фрейм (рабочий слой). Для этого нажмите на инструмент Frame (горячая клавиша F) и мышкой нарисуйте на экране прямоугольник.

Вы можете настроить высоту и ширину фрейма в Фигме на глаз, используя ваш референс (Фигма подскажет, когда размеры совпадут). Или сделать это вручную.

Справа вы увидите меню. В полях W (ширина) и H (высота) введите нужные параметры. В нашем референсе ширина получилась 1440 px, высота — 1184 px.

Как работать в Фигме: рисуем фрейм
  1. Перейдём к настройке сетки. Кликните по фрейму, а затем нажмите на «+» в разделе Layout Grid.

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

Как работать в Фигме: настраиваем сетку

Автоматически в Фигме включается сетка в виде клеточки 10х10 px. С нашим референсом удобнее будет использовать сетку из колонок и строк. Создадим такую сетку.

  1. Начнём с колонок. Нажмите на строку с сеткой, и у вас откроется дополнительное меню. Повторите настройки со скриншота:
    Colums, Count (количество) — 12, Margin (внешние отступы) — 160, Gutter (отступы между колонками) — 10.

На нашем референсе мы видим, что у страницы достаточно большие отступы — 160 px. Это нужно для того, чтобы страница была адаптирована и под экраны с меньшим размером. Не только под мониторы ПК, но и под экраны маленьких ноутбуков, планшетов.

Как работать в Фигме: настраиваем сетку
  1. Добавим ещё одну сетку в виде строк. Для этого нажмите «+» в разделе Layout Grid.
  2. Кликните по строке новой сетки. Откроется дополнительное меню.
  3. Повторите настройки, как на скриншоте: Rows (строки), Count (количество) — auto, Type (выравнивание) — Top, Height (высота строки) — 30, Gutter (отступы) — 20.
Как работать в Фигме: настраиваем сетку

Сетка готова. Можно рисовать!

Вы можете в любое время отключить видимость сетки с помощью сочетания клавиш: Shift + ctrl + 4 (на Windows сочетание клавиш может немного отличаться). Включить видимость сетки можно этой же командой.

Рисуем прототип

Теперь создадим прототип в Фигме. С помощью инструмента рисования прямоугольников наметим будущие элементы нашей страницы: шапку сайта, баннер, некоторые текстовые слои, кнопки, подвал сайта.

  1. Возьмём инструмент рисования прямоугольников Rectangle. Он находится в верхнем меню или вызывается горячей клавишей R.
  2. Дальше всё просто: рисуем прямоугольники с помощью мыши, растягивая их по фрейму.
Как работать в Фигме: рисуем прототип

Ориентируйтесь на референс и на сетку. Подобрать нужные габариты вам поможет сама Фигма.

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

На примере центральной кнопки, рассмотрим подробнее работу некоторых разделов бокового меню Фигмы, с которыми мы уже работали:

  • самая верхняя строка позволяет выравнивать элемент по краям или по центру фрейма в горизонтальной и вертикальной плоскостях;
  • чуть ниже знакомое меню с настройкой высоты и ширины, тут же можно настроить поворот элемента (иконка с градусами), скругления углов и точное положение элемента на фрейме (X и Y).
Как работать в Фигме: рисуем прототип

Вот такой прототип у меня получился. Я убрала сетку с помощью сочетания клавиш: Shift + ctrl + 4.

Как работать в Фигме: рисуем прототип

Работа с цветом в Фигма

Теперь давайте попробуем покрасить наши основные блоки в необходимые цвета. Это сделать также очень просто.

  1. Первый блок меню у нас светло серого оттенка. Чтобы задать нашему макету такой цвет, нажмите на нужный элемент.
  2. В боковом меню в разделе Fill тапните по строке с цветом. Откроется дополнительное меню.
  3. Возьмите из него инструмент пипетка и тапните по тому цвету на референсе, в который вы хотите покрасить ваш элемент.
Как работать в Фигме: работа с цветом
  1. Также поступаем со следующими блоками.
Как работать в Фигме: работа с цветом
  1. Мы видим, что второй блок в шапке сайта не просто окрашен в белый цвет, у него есть тень. Давайте нарисуем тень с помощью инструментов Фигмы. Нажмите на нужный элемент.
  2. Нажмите на «+» в разделе Effects.
  3. Тапните по строке Drop Shadow. Откроется дополнительное меню.
  4. Повторите настройки со скриншота. Смещение по оси Х — 0, по оси Y — 4. Blur — 10 и прозрачность — 10%.
Как работать в Фигме: работа с цветом

Мы подобрали тень, похожую на ту, что изображена в нашем референсе.

  1. Теперь посмотрим на наш баннер. Мы видим, что он не просто тёмно-серый. У него есть небольшой градиент. Чтобы повторить такой же градиент, окрасьте баннер в тёмно-серый (также берём пипетку и красим в цвет соответствующего блока с референса).
  2. В разделе Fill нажимаем на «+» и щёлкаем по новой строке. Вверху вы увидите панель работы с цветом. С помощью неё и инструмента Liner вы можете создать эффект градиента.
Как работать в Фигме: работа с цветом

Добавляем картинки

На нашем референсе мы видим логотип, а также изображение карты Tinkoff Black на главном баннере. Самый простой способ добавить их в наш макет — сделать скриншоты с сайта и перетащить их в рабочую область (как мы делали в начале с референсом).

Как работать в Фигме

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

  • меню бургер (иконка в верхнем левом углу) — File — Place image;
  • плагин Unsplash и др.

Работа с кнопками

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

  1. Центральная кнопка у нас прозрачная. Окрашиваем её в цвет фона.
  2. Далее добавляем элементу обводку: в разделе Stroke нажимаем «+», меняем цвет, делаем ширину обводки 2 px.
  3. Добавляем скругление 4 (вверху бокового меню).
Как работать в Фигме: настраиваем кнопки

Остальные кнопки, я уверена, теперь вы сможете нарисовать сами. Единственное, обратим внимание на кнопки «Классические»/«Премиальные».

Они скруглены только с внешних сторон. Это можно сделать следующим образом:

  • поставьте два элемента рядом вплотную (обводка одного элемента должна заходить на обводку другого);
  • рядом с инструментом настройки скруглений нажмите кнопку Independent Corners — откроется дополнительное меню, где вы сможете задать скругление каждой стороны элемента отдельно.
Как работать в Фигме: создаём кнопки

Работа с текстом

Перейдём к текстовым элементам. В первую очередь нам нужно узнать шрифт, который использован на сайте Тинькофф. Для этого я использую плагин Fonts Ninja в браузере Chrome.

Как работать в Фигме: работа с текстом

Плагин определил, что Тинькофф использует свои уникальные шрифты. Скорее всего, они не доступны для скачивания либо являются платными.

Зайдём в код страницы сайта. Там обычно предлагаются альтернативные шрифты — используются в случае отсутствия/невозможности отображения основных. Нажмите в Chrome по странице сайта правой кнопкой мыши — Посмотреть код. Найдите в коде строку font.

Как работать в Фигме: работа с текстом

Итак, мы видим возможные шрифты и даже их размер. Давайте возьмём шрифт Roboto.

  1. Включите инструмент текст (буква T на вкладке в верхнем меню).
  2. Кликните мышкой по тому месту, куда хотите его вставить.
  3. Наберите необходимую фразу.
  4. Справа в меню вы увидите настройки, которые можно производить с текстом: шрифт, размер, выравнивание и другие.
  5. Поместите текст по центру кнопки. Можно сделать это вручную с помощью мыши (Фигма подскажет, где центр). Или можно нажать на кнопку, затем, зажав shift, нажать на текст и в боковом меню сверху выбрать выравнивание по центру по горизонтали и вертикали.
  6. В строке Fill назначьте тексту нужный цвет.
Как работать в Фигме: работа с текстом

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

  1. Создайте текст, нажмите на иконку троеточия в разделе работы с текстом — Text. Откроется дополнительное меню.
  2. В дополнительном меню в разделе Latter Case настройте Case, как на скриншоте:
Как работать в Фигме: работа с текстом
Как работать в Фигме (Figma): создаём макет сайта с нуля
  1. Теперь увеличим трекинг. Это также делается в разделе Text, как вы можете видеть на скриншоте.

Вот, что у нас получилось в итоге:

Как работать в Фигме: работа с текстом

Рисуем иконки

Единственный элемент, который мы ещё не научились создавать — иконки. Мы видим на референсе жёлтую иконку с 0 возле надписи «Предпочтения по карте», иконки соцсетей и иконку с английским флагом.

  1. Возьмите инструмент Ellipse. Он находится под инструментом Rectangle. Можно включить рисование кругов также с помощью горячей клавиши О.
  2. Нарисуйте возле надписи круг 15 х 15 px. Покрасьте его в нужный цвет (как работать с размером и цветом элементов, мы уже знаем).
Как работать в Фигме: иконки
  1. Напишите на элементе 0 с помощью инструмента Text.
Как работать в Фигме: иконки
  1. Иконку с британским флагом создаём по тому же принципу с помощью круга. Нарисуйте круг 30 х 30 px.
  2. Подберите необходимую картинку с британским флагом и скопируйте её в буфер обмена.
  3. Нажмите на круг, а затем с помощью команды cmd + V (на Windows, вероятно, ctrl + V) вставьте изображение.
Как работать в Фигме: иконки

Есть и другие способы добавить изображение в элемент. Например, можно взять изображение с помощью меню бургер (иконка в верхнем левом углу) — File — Place image и добавить его в круг, тапнув по нему.

Как работать в Фигме: иконки

Добавляем иконки с помощью плагинов Фигма

Не обязательно прорисовывать все иконки вручную. Другие уже позаботились об этом и загрузили свои иконки в специальные плагины. Чтобы воспользоваться ими, нужно сначала установить плагин.

  1. Перейдите на главную страницу Фигмы (конка фигмы в самом верху).
Как работать в Фигме: добавляем плагин
  1. Перейдите в раздел Community — Plugins.
  2. В поисковую строку вверху введите Iconify (это плагин с иконками).
Как работать в Фигме: добавляем плагин
  1. Нажмите на кнопку Install (у меня плагин уже установлен).
Как работать в Фигме: добавляем плагин

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

  1. Перейдите в меню бургер.
  2. Нажмите на Plugins.
  3. Выберите Iconify.
Как работать в Фигме: добавляем иконку с помощью плагина
  1. В плагине воспользуйтесь поисковой строкой для поиска нужной иконки.
  2. Выберите подходящий вариант иконки и добавьте её на свой макет.
Как работать в Фигме: добавляем иконку с помощью плагина

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

Как работать в Фигме: добавляем иконку с помощью плагина

Итак, вот, что у меня вышло в итоге:

Как работать в Фигме

Ма научились делать с вами все необходимые элементы, которые понадобятся для создания копии странички сайта Тинькофф: кнопки, блоки, иконки, текст и т.д.

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

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

5 2 votes
Оцените статью

Подписаться
Уведомление о
guest
0 Комментарий
Inline Feedbacks
View all comments
0
К обсуждениюx
()
x