Как сделать меню гамбургер в фигме
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 коде этого нет.
Оригинальный вид страницы с меню можно посмотреть по ссылке
Похожий пример, но с другими возможностями (пункты меню могут иметь подразделы), можно посмотреть в теме: Полноэкранное мобильное меню.
Читайте также: