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

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

Что такое бургер-меню и зачем оно нужно

Бургер-меню — это скрытая навигационная панель, которая активируется кликом или свайпом по иконке, напоминающей три горизонтальные линии. Она стала стандартом для мобильных интерфейсов благодаря экономии пространства на маленьких экранах. По данным Statista, более 87% мобильных приложений и сайтов в 2025 году используют бургер-меню как основной способ навигации. Однако его эффективность зависит не от популярности, а от правильной реализации: плохое меню снижает конверсию на 18–25% по данным Nielsen Norman Group.

Представьте, что пользователь открывает ваше приложение и не может найти меню — он уходит. Именно поэтому в Figma важно не просто нарисовать три линии, а создать полноценный компонент с учётом поведения, состояний и взаимодействий. Бургер-меню должно быть не только визуально узнаваемым, но и логически связанным с остальными элементами интерфейса: меню должно появляться плавно, не перекрывать важный контент и легко закрываться кликом вне области или по кнопке «Закрыть».

Пошаговое создание бургер-меню в Figma

Начните с создания базовой иконки. Откройте новый файл и создайте прямоугольник размером 24×24 пикселей — это стандартный размер для мобильных интерфейсов. Затем добавьте три горизонтальные линии. Для этого используйте инструмент Line (или Shift + L), настройте толщину линий на 2 пикселя, расстояние между ними — 4 пикселя. Выровняйте их по центру прямоугольника с помощью Align Center и Distribute Vertical.

Теперь выделите все три линии и прямоугольник, нажмите Ctrl + G (или Cmd + G на Mac), чтобы сгруппировать. Это ваша базовая иконка. Назовите группу «Burger Icon — Closed» — это поможет в дальнейшей организации.

Для состояния «открыто» создайте копию группы (Ctrl + D), затем замените линии на крест. Для этого: удалите три линии, нарисуйте две пересекающиеся линии под углом 45° и 135°. Убедитесь, что они пересекаются в центре и имеют ту же толщину (2 пикселя). Выровняйте их по центру прямоугольника. Назовите эту группу «Burger Icon — Open».

Теперь добавьте фон для меню. Создайте прямоугольник шириной 280–320 пикселей (в зависимости от целевого устройства), высотой — 100% экрана. Задайте цвет фона (например, #FFFFFF), тень — 0px 4px 12px rgba(0, 0, 0, 0.1), и радиус скругления 16 пикселей для мягкости. Разместите его за иконкой, но пока не привязывайте к краю — это сделаем позже в прототипе.

Использование компонентов и вариантов

Чтобы бургер-меню стал гибким и легко масштабируемым, преобразуйте обе иконки в компонент. Выделите обе группы («Closed» и «Open»), кликните правой кнопкой и выберите «Create Component». Figma автоматически объединит их в один компонент с двумя вариантами. Теперь вы можете переключаться между состояниями через панель «Instance» — это ключевое преимущество.

В панели компонента нажмите «+» рядом с «Variants» и создайте два варианта: «Closed» и «Open». Присвойте им соответствующие имена. Теперь, когда вы вставляете этот компонент на холст, вы можете переключать состояния одним кликом — без необходимости копировать и вставлять объекты.

Для удобства добавьте параметры стилей. В Figma создайте текстовый стиль для пунктов меню (например, «Menu Item / Primary»), цвет фона — «Menu Background», и тень — «Menu Shadow». Это позволит применять единые стили ко всем экземплярам меню в проекте.

Теперь создайте список пунктов меню. Добавьте текстовые элементы: «Главная», «Продукты», «О нас», «Контакты». Расположите их вертикально с отступом 16 пикселей. Сгруппируйте всё это в один фрейм, назовите «Menu Panel». Вставьте его рядом с иконкой, но не привязывайте к краю — это сделаем в прототипе.

Настройка прототипирования и анимации

Перейдите на вкладку Prototype. Выделите иконку «Burger Icon — Closed» и перетащите стрелку вправо на «Menu Panel». В настройках соединения выберите «Smart Animate» — это включит плавную анимацию перехода. Установите время анимации на 300 мс — это оптимальное значение по стандартам iOS и Android.

Теперь настройте обратный переход: выделите иконку в состоянии «Open» и перетащите стрелку обратно на «Closed». Убедитесь, что оба соединения используют один и тот же компонент — это важно для корректной анимации. Если вы используете разные компоненты, Figma не сможет анимировать переход.

Добавьте закрытие по клику вне меню. Создайте прозрачный прямоугольник, который покрывает весь экран (кроме самого меню). Поставьте его поверх меню, но под иконкой. Выделите его, перетащите стрелку на «Burger Icon — Closed». В настройках соединения включите «Trigger: On Click», и убедитесь, что «Overlay» стоит на «None». Это создаст эффект закрытия при клике в пустое пространство.

Теперь проверьте прототип в режиме Preview (Ctrl + Shift + P). Кликните на иконку — меню должно плавно выезжать. Кликните вне меню — оно должно закрываться. Если анимация резкая — проверьте, что все элементы имеют одинаковый размер и положение в обоих состояниях.

Распространённые ошибки и как их избежать

Самая частая ошибка — использование разных размеров иконок для состояний «открыто» и «закрыто». Это ломает анимацию. Всегда сохраняйте одинаковый размер фрейма и центрирование.

Вторая ошибка — отсутствие обратного действия. Многие дизайнеры забывают добавить закрытие по клику вне меню. Это нарушает UX-принцип «обратной связи»: пользователь должен всегда понимать, как вернуться к предыдущему состоянию.

Третья ошибка — неправильная иерархия слоёв. Если меню находится под иконкой, оно не будет реагировать на клики. Убедитесь, что прозрачный фон перекрывает контент, но находится под иконкой.

Четвёртая — игнорирование доступности. Бургер-меню должно иметь альтернативный текст для скринридеров. В Figma добавьте в описание компонента: «Открыть меню навигации» и «Закрыть меню».

Экспертное мнение: как сделать бургер-меню удобнее

Дмитрий рекомендует также добавлять в меню разделитель между группами пунктов, использовать иконки рядом с текстом (если это не перегружает интерфейс) и всегда тестировать на реальных устройствах — даже в Figma можно имитировать iPhone 14 и Galaxy S23 через Frame Constraints.

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

Заключение

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

• Используйте компоненты с вариантами для состояний «открыто» и «закрыто».
• Всегда добавляйте закрытие по клику вне меню через прозрачный overlay.
• Применяйте Smart Animate с длительностью 300 мс для плавной анимации.
• Тестируйте на реальных устройствах и с учётом доступности.
• Не используйте бургер-меню для главных действий — только для второстепенной навигации.