Как сделать меню гамбургер в фигме

Обновлено: 03.07.2024

cr-hamburger-root — Корневой элемент мобильного меню. Будет показан только на мобильных устройствах.

cr-hamburger-menu — Элемент с меню. Не должен находиться внутри cr-hamburger-root . На мобильных устройствах будет скрываться или показываться по клику по cr-hamburger-toggle . На остальных устройствах будет всегда показан.

cr-hamburger-toggle — Элемент с этим атрибутом по клику скрывает или показывает элемент с атрибутом cr-hamburger-menu .

Как и в спойлере, и cr-hamburger-menu и cr-hamburger-toggle в зависимости от состояния будут иметь класс is-expanded или is-collapsed.

Поддержка в Telegram-чате

Подскажем, как решить вашу задачу!

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

Частная коллекция качественных материалов для тех, кто делает сайты

Бесплатные уроки CSS для начинающих

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теперь увеличим трекинг. Это также делается в разделе Text, как вы можете видеть на скриншоте.

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

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

Возьмите инструмент Ellipse. Он находится под инструментом Rectangle. Можно включить рисование кругов также с помощью горячей клавиши О.
Нарисуйте возле надписи круг 15 х 15 px. Покрасьте его в нужный цвет (как работать с размером и цветом элементов, мы уже знаем).

Напишите на элементе 0 с помощью инструмента Text.

Иконку с британским флагом создаём по тому же принципу с помощью круга. Нарисуйте круг 30 х 30 px.
Подберите необходимую картинку с британским флагом и скопируйте её в буфер обмена.
Нажмите на круг, а затем с помощью команды cmd + V (на Windows, вероятно, ctrl + V) вставьте изображение.

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

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

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

Перейдите на главную страницу Фигмы (конка фигмы в самом верху).

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

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

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

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

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

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

Данное меню не рассчитано на большое количество пунктов, но отлично будет смотреться как навигационное на небольшом сайте или как вспомогательное.

Открытие и закрытие меню реализовано с использованием библиотеки jQuery

Пример:

Для большей наглядности в пример добавлены мобильник и прокрутка niceScroll. В CSS и JS коде этого нет.

Оригинальный вид страницы с меню можно посмотреть по ссылке

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

Читайте также: