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

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

Основные этапы создания меню бургер

Меню бургер — это не просто иконка, а интерактивный элемент навигации, который должен быть интуитивно понятным и функциональным. В Figma его создание включает несколько ключевых шагов: проектирование иконки, разработка структуры выпадающего меню, объединение в компонент с вариантами состояний и настройка прототипа для демонстрации взаимодействия.
Первым делом определитесь с контекстом использования: будет ли это мобильное приложение, адаптивный сайт или десктопная версия с ограниченным пространством. Это влияет на размеры, позиционирование и поведение меню. Например, в мобильных интерфейсах бургер обычно располагается в верхнем левом или правом углу.
Для точности и масштабируемости рекомендуется работать в отдельном фрейме с размером 375×812 (iPhone 13 mini) или аналогичным. Так вы сможете сразу оценить, как элемент будет выглядеть на реальном устройстве. Используйте сетку и гайды, чтобы выдержать отступы и выравнивание.

Создание иконки бургер

Иконка бургер состоит из трёх параллельных линий одинаковой толщины и длины. Её стандартные параметры: ширина 24 px, высота 18 px, расстояние между линиями — 6 px. Каждая линия — это отдельный прямоугольник размером 24×2 px.
Начните с создания первой линии: выберите инструмент Rectangle (R), нарисуйте прямоугольник 24×2 px. Затем скопируйте его дважды (Ctrl+D) и расположите с вертикальными отступами по 6 px. Объедините все три фигуры в один фрейм (Ctrl+G), выровняйте по центру.
Цвет иконки должен контрастировать с фоном. Чаще всего используется чёрный (#000000) или тёмно-серый (#333333). Для светлых интерфейсов подойдёт #1A1A1A, для тёмных — белый (#FFFFFF). Убедитесь, что контраст соответствует нормам доступности (минимум AA по WCAG).
Если вы планируете анимированный переход (например, превращение в «крестик» при открытии), создайте два состояния иконки: «бургер» и «закрыть». Позже они станут вариантами одного компонента.

1. Нарисуйте три прямоугольника 24×2 px.
2. Расположите их с отступами 6 px по вертикали.
3. Сгруппируйте в фрейм 24×24 px (добавьте паддинг).
4. Примените нужный цвет заливки.
5. Назовите слой «Burger Icon».

Разработка выпадающего меню

Выпадающее меню — это контейнер, который появляется при нажатии на иконку бургер. Оно может занимать всю ширину экрана (слева или справа) или быть модальным окном по центру. Чаще всего используется левое боковое меню (sidebar).
Создайте новый фрейм с размерами 300×600 px (ширина типичного мобильного меню). Фон — сплошной цвет (например, #FFFFFF для светлой темы). Добавьте внутрь список навигационных пунктов. Каждый пункт — это текст с отступами. Рекомендуемый стиль: Roboto или Inter, 16–18 px, полужирный для активных разделов.
Отступы между пунктами — 16 px. Верхний и нижний паддинги контейнера — 24 px. Добавьте разделители или иконки при необходимости. Если нужно, включите аватар пользователя, кнопку выхода или переключатель темы.
Для лучшей структуры используйте Auto Layout по вертикали. Выделите все текстовые слои, нажмите «Add Auto Layout» (Shift+A). Установите padding 24 px сверху и снизу, spacing — 16 px. Это обеспечит равномерное распределение и упростит редактирование.

Создание компонента с вариантами

Компоненты с вариантами — одна из самых мощных функций Figma. Они позволяют хранить несколько состояний одного элемента и быстро переключаться между ними. В нашем случае это состояние «бургер» и «закрыть».
Создайте копию иконки и превратите её в «крестик». Для этого поверните верхнюю и нижнюю линии на 45 и -45 градусов соответственно. Средняя линия удаляется. Убедитесь, что обе иконки имеют одинаковый размер фрейма (24×24 px).
Выделите обе иконки, щёлкните правой кнопкой → «Create Component Set». Figma автоматически создаст компонент с двумя вариантами. Назовите его «Burger Menu / State».
Теперь создайте компонент для всего меню. Выделите иконку и выпадающее меню (в закрытом состоянии), преобразуйте в компонент. Но лучше использовать отдельный компонент только для иконки, а меню — как часть прототипа.
Для полноценного решения соберите всё в один интерактивный блок: иконка + меню + overlay. Сгруппируйте их в главный фрейм, примените Auto Layout, назначьте имя страницы, например, «Navigation / Mobile».

• Создайте два состояния иконки: Burger и Close.
• Объедините в Component Set.
• Убедитесь, что размеры фреймов совпадают.
• Используйте осмысленные имена свойств (например, «State = Open/Close»).

Настройка прототипа

Прототип позволяет продемонстрировать, как будет работать меню бургер. Перейдите на вкладку Prototype в правой панели. Выделите иконку в состоянии «Burger» и создайте связь (connector) на макет с открытым меню.
Выберите тип взаимодействия: On Click. Переход — Instant или Smart Animate. Если вы хотите плавное появление, используйте Smart Animate с эффектом Slide или Fade. Убедитесь, что оба экрана имеют одинаковые размеры.
Для обратного действия: выделите иконку в состоянии «Close» и свяжите её с экраном, где меню закрыто. Таким образом, пользователь сможет открывать и закрывать меню в прототипе.
Если вы используете overlay, сделайте его кликабельным для закрытия меню. Просто добавьте стрелку от затемнённого фона к основному экрану с действием On Click.

Ошибки и как их избежать

Даже опытные дизайнеры допускают ошибки при создании меню бургер. Одна из самых частых — игнорирование доступности. Маленькая иконка (менее 44×44 pt) трудно нажимается на сенсорных экранах. Решение — увеличьте hit area до 44×44 px, даже если визуальный размер меньше.
Вторая ошибка — отсутствие визуальной обратной связи. Пользователь должен видеть, что иконка изменилась на «крестик». Если этого не происходит, он может не понять, что меню открыто.
Третья — слишком длинное меню без скролла. Если пунктов больше 8–10, предусмотрите возможность прокрутки в прототипе. В Figma это можно смоделировать с помощью скроллируемого фрейма с Overflow = Scroll.
Четвёртая — игнорирование темной темы. Если ваш продукт поддерживает dark mode, создайте соответствующие состояния меню. Используйте компоненты с вариантами по свойству «Theme».

Экспертное мнение

Современные тенденции идут в сторону гибридных решений. Например, комбинирование бургера с видимыми ключевыми пунктами (Home, Search, Profile). Это повышает конверсию и снижает количество потерянных действий.
Также набирает популярность использование микроанимаций: плавное появление меню, изменение иконки с поворотом линий. В Figma это реализуется через Smart Animate, если начальное и конечное состояния имеют совпадающие имена слоёв.

Вопросы и ответы

Заключение

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

• Используйте компоненты с вариантами для иконки бургер и состояний меню.
• Применяйте Auto Layout для адаптивности и быстрого редактирования.
• Настройте прототип с On Click и Smart Animate для демонстрации взаимодействия.
• Увеличьте кликабельную зону до 44×44 px для мобильных устройств.
• Тестируйте меню на реальных пользователях перед финализацией.