В этой публикации мы познакомимся с самой удобной (на мой взгляд) программой для создания прототипов, макетов интерфейса и дизайна — Фигмой (Figma).
Я не буду рассказывать вам теорию о горячих клавишах, инструментах и возможностях данного сервиса. Об этом, я уверена, информации в сети предостаточно.
Мы попробуем зайти с вами с другой стороны и нарисовать ваш первый макет страницы сайта в Фигме. Попутно в рамках практики я буду рассказывать об инструментах Фигмы, где их найти и как ими пользоваться.
По результатам прочтения этой публикации и выполнения написанных в ней действий вы сможете создать свой первый макет в Фигме. Давайте начнём.
Задание: редизайн страницы сайта Тинькофф
Предлагаю попробовать сделать дизайн (скопировать дизайн) страницы сайта Тинькофф, посвящённый их дебетовой карте Tinkoff Black.
Ни в коем случае не призываю вас копировать страницы чужих сайтов. Мы это делаем лишь в учебных целях, чтобы узнать, как в Фигме рисовать макет страницы сайта: как вставить картинки, нарисовать кнопки, добавить текст, иконки и т.д.
Создаём фрейм в Фигме и настраиваем сетку
Итак, приступим! Первое, что я сделала — зашла на страницу сайта Тинькофф и сделала скриншот. Это нужно, чтобы постоянно не возвращаться к веб-ресурсу, и референс всегда был перед глазами.
- Сделав скриншот, перетащите его с рабочего стола на рабочую область (серое поле) Фигмы.
- Далее нужно создать фрейм (рабочий слой). Для этого нажмите на инструмент Frame (горячая клавиша F) и мышкой нарисуйте на экране прямоугольник.
Вы можете настроить высоту и ширину фрейма в Фигме на глаз, используя ваш референс (Фигма подскажет, когда размеры совпадут). Или сделать это вручную.
Справа вы увидите меню. В полях W (ширина) и H (высота) введите нужные параметры. В нашем референсе ширина получилась 1440 px, высота — 1184 px.
- Перейдём к настройке сетки. Кликните по фрейму, а затем нажмите на «+» в разделе Layout Grid.
Сетка нужна для того, чтобы вы могли выстраивать ровно все элементы относительно фрейма и друг друга, соблюдать структуру, композицию.
Автоматически в Фигме включается сетка в виде клеточки 10х10 px. С нашим референсом удобнее будет использовать сетку из колонок и строк. Создадим такую сетку.
- Начнём с колонок. Нажмите на строку с сеткой, и у вас откроется дополнительное меню. Повторите настройки со скриншота:
Colums, Count (количество) — 12, Margin (внешние отступы) — 160, Gutter (отступы между колонками) — 10.
На нашем референсе мы видим, что у страницы достаточно большие отступы — 160 px. Это нужно для того, чтобы страница была адаптирована и под экраны с меньшим размером. Не только под мониторы ПК, но и под экраны маленьких ноутбуков, планшетов.
- Добавим ещё одну сетку в виде строк. Для этого нажмите «+» в разделе Layout Grid.
- Кликните по строке новой сетки. Откроется дополнительное меню.
- Повторите настройки, как на скриншоте: Rows (строки), Count (количество) — auto, Type (выравнивание) — Top, Height (высота строки) — 30, Gutter (отступы) — 20.
Сетка готова. Можно рисовать!
Вы можете в любое время отключить видимость сетки с помощью сочетания клавиш: Shift + ctrl + 4 (на Windows сочетание клавиш может немного отличаться). Включить видимость сетки можно этой же командой.
Рисуем прототип
Теперь создадим прототип в Фигме. С помощью инструмента рисования прямоугольников наметим будущие элементы нашей страницы: шапку сайта, баннер, некоторые текстовые слои, кнопки, подвал сайта.
- Возьмём инструмент рисования прямоугольников Rectangle. Он находится в верхнем меню или вызывается горячей клавишей R.
- Дальше всё просто: рисуем прямоугольники с помощью мыши, растягивая их по фрейму.
Ориентируйтесь на референс и на сетку. Подобрать нужные габариты вам поможет сама Фигма.
- Выровняйте кнопку по горизонтальному центру. Это можно сделать вручную (когда вы будете перетаскивать, Фигма подскажет, где центр) или с помощью автоматического выравнивания по центру.
На примере центральной кнопки, рассмотрим подробнее работу некоторых разделов бокового меню Фигмы, с которыми мы уже работали:
- самая верхняя строка позволяет выравнивать элемент по краям или по центру фрейма в горизонтальной и вертикальной плоскостях;
- чуть ниже знакомое меню с настройкой высоты и ширины, тут же можно настроить поворот элемента (иконка с градусами), скругления углов и точное положение элемента на фрейме (X и Y).
Вот такой прототип у меня получился. Я убрала сетку с помощью сочетания клавиш: Shift + ctrl + 4.
Работа с цветом в Фигма
Теперь давайте попробуем покрасить наши основные блоки в необходимые цвета. Это сделать также очень просто.
- Первый блок меню у нас светло серого оттенка. Чтобы задать нашему макету такой цвет, нажмите на нужный элемент.
- В боковом меню в разделе Fill тапните по строке с цветом. Откроется дополнительное меню.
- Возьмите из него инструмент пипетка и тапните по тому цвету на референсе, в который вы хотите покрасить ваш элемент.
- Также поступаем со следующими блоками.
- Мы видим, что второй блок в шапке сайта не просто окрашен в белый цвет, у него есть тень. Давайте нарисуем тень с помощью инструментов Фигмы. Нажмите на нужный элемент.
- Нажмите на «+» в разделе Effects.
- Тапните по строке Drop Shadow. Откроется дополнительное меню.
- Повторите настройки со скриншота. Смещение по оси Х — 0, по оси Y — 4. Blur — 10 и прозрачность — 10%.
Мы подобрали тень, похожую на ту, что изображена в нашем референсе.
- Теперь посмотрим на наш баннер. Мы видим, что он не просто тёмно-серый. У него есть небольшой градиент. Чтобы повторить такой же градиент, окрасьте баннер в тёмно-серый (также берём пипетку и красим в цвет соответствующего блока с референса).
- В разделе Fill нажимаем на «+» и щёлкаем по новой строке. Вверху вы увидите панель работы с цветом. С помощью неё и инструмента Liner вы можете создать эффект градиента.
Добавляем картинки
На нашем референсе мы видим логотип, а также изображение карты Tinkoff Black на главном баннере. Самый простой способ добавить их в наш макет — сделать скриншоты с сайта и перетащить их в рабочую область (как мы делали в начале с референсом).
В дальнейшем в ваших работах вы также можете добавлять свои картинки в макет или пользоваться другими способами:
- меню бургер (иконка в верхнем левом углу) — File — Place image;
- плагин Unsplash и др.
Работа с кнопками
Теперь я расскажу вам, как сделать кнопки. На сайте Тинькофф мы видим, что некоторые кнопки цветные (как добавить цвет элементу, мы теперь знаем), а некоторые прозрачные. У всех кнопок есть небольшое скругление.
- Центральная кнопка у нас прозрачная. Окрашиваем её в цвет фона.
- Далее добавляем элементу обводку: в разделе Stroke нажимаем «+», меняем цвет, делаем ширину обводки 2 px.
- Добавляем скругление 4 (вверху бокового меню).
Остальные кнопки, я уверена, теперь вы сможете нарисовать сами. Единственное, обратим внимание на кнопки «Классические»/«Премиальные».
Они скруглены только с внешних сторон. Это можно сделать следующим образом:
- поставьте два элемента рядом вплотную (обводка одного элемента должна заходить на обводку другого);
- рядом с инструментом настройки скруглений нажмите кнопку Independent Corners — откроется дополнительное меню, где вы сможете задать скругление каждой стороны элемента отдельно.
Работа с текстом
Перейдём к текстовым элементам. В первую очередь нам нужно узнать шрифт, который использован на сайте Тинькофф. Для этого я использую плагин Fonts Ninja в браузере Chrome.
Плагин определил, что Тинькофф использует свои уникальные шрифты. Скорее всего, они не доступны для скачивания либо являются платными.
Зайдём в код страницы сайта. Там обычно предлагаются альтернативные шрифты — используются в случае отсутствия/невозможности отображения основных. Нажмите в Chrome по странице сайта правой кнопкой мыши — Посмотреть код. Найдите в коде строку font.
Итак, мы видим возможные шрифты и даже их размер. Давайте возьмём шрифт Roboto.
- Включите инструмент текст (буква T на вкладке в верхнем меню).
- Кликните мышкой по тому месту, куда хотите его вставить.
- Наберите необходимую фразу.
- Справа в меню вы увидите настройки, которые можно производить с текстом: шрифт, размер, выравнивание и другие.
- Поместите текст по центру кнопки. Можно сделать это вручную с помощью мыши (Фигма подскажет, где центр). Или можно нажать на кнопку, затем, зажав shift, нажать на текст и в боковом меню сверху выбрать выравнивание по центру по горизонтали и вертикали.
- В строке Fill назначьте тексту нужный цвет.
В главном меню в шапке и в подвале мы видим текстовые элементы, которые написаны заглавными буквами. Также визуально кажется, что расстояние между буквами (трекинг) увеличено. Зададим необходимые настройки с помощью инструментов Фигмы.
- Создайте текст, нажмите на иконку троеточия в разделе работы с текстом — Text. Откроется дополнительное меню.
- В дополнительном меню в разделе Latter Case настройте Case, как на скриншоте:
- Теперь увеличим трекинг. Это также делается в разделе Text, как вы можете видеть на скриншоте.
Вот, что у нас получилось в итоге:
Рисуем иконки
Единственный элемент, который мы ещё не научились создавать — иконки. Мы видим на референсе жёлтую иконку с 0 возле надписи «Предпочтения по карте», иконки соцсетей и иконку с английским флагом.
- Возьмите инструмент Ellipse. Он находится под инструментом Rectangle. Можно включить рисование кругов также с помощью горячей клавиши О.
- Нарисуйте возле надписи круг 15 х 15 px. Покрасьте его в нужный цвет (как работать с размером и цветом элементов, мы уже знаем).
- Напишите на элементе 0 с помощью инструмента Text.
- Иконку с британским флагом создаём по тому же принципу с помощью круга. Нарисуйте круг 30 х 30 px.
- Подберите необходимую картинку с британским флагом и скопируйте её в буфер обмена.
- Нажмите на круг, а затем с помощью команды cmd + V (на Windows, вероятно, ctrl + V) вставьте изображение.
Есть и другие способы добавить изображение в элемент. Например, можно взять изображение с помощью меню бургер (иконка в верхнем левом углу) — File — Place image и добавить его в круг, тапнув по нему.
Добавляем иконки с помощью плагинов Фигма
Не обязательно прорисовывать все иконки вручную. Другие уже позаботились об этом и загрузили свои иконки в специальные плагины. Чтобы воспользоваться ими, нужно сначала установить плагин.
- Перейдите на главную страницу Фигмы (конка фигмы в самом верху).
- Перейдите в раздел Community — Plugins.
- В поисковую строку вверху введите Iconify (это плагин с иконками).
- Нажмите на кнопку Install (у меня плагин уже установлен).
Возвращаемся к нашему макету. Нам нужно включить плагин и добавить необходимые иконки.
- Перейдите в меню бургер.
- Нажмите на Plugins.
- Выберите Iconify.
- В плагине воспользуйтесь поисковой строкой для поиска нужной иконки.
- Выберите подходящий вариант иконки и добавьте её на свой макет.
С иконкой можно работать, как и с любым другим элементом: менять размер, цвет, положение на фрейме и т.д.
Итак, вот, что у меня вышло в итоге:
Ма научились делать с вами все необходимые элементы, которые понадобятся для создания копии странички сайта Тинькофф: кнопки, блоки, иконки, текст и т.д.
Продолжить работу далее и доделать макет до конца вы сможете самостоятельно. Рекомендую это сделать, чтобы закрепить полученные навыки.
Также будет круто, если вы поделитесь результатом своей работы в комментариях 🙂
