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

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

Зачем нужен бургер в интерфейсе

Иконка «бургер» — это три горизонтальные полоски, символизирующие скрытое меню. Её используют в веб- и мобильных приложениях для экономии пространства. Особенно актуальна она на узких экранах, где полноценная навигация не помещается. Пользователи уже привыкли к этому знаку: 94% опрошенных в исследовании Nielsen Norman Group узнали, что иконка открывает меню.

Бургер помогает поддерживать чистоту дизайна. Вместо того чтобы размещать все пункты меню в хедере, их прячут за иконкой. Это особенно важно для одностраничников, SPA-приложений и адаптивных сайтов. Однако стоит помнить: хотя бургер популярен, он снижает видимость навигации. Поэтому его лучше дополнять другими элементами — например, кнопкой поиска или логотипом с переходом на главную.

Современные подходы к UX предлагают комбинировать бургер с другими паттернами. Например, на смартфонах оставляют бургер, а на планшетах и десктопах — раскрывать меню полностью. Такой гибридный подход позволяет сохранить удобство на всех устройствах. В Figma это легко моделируется с помощью компонентов и вариантов (variants).

Основные элементы дизайна бургера

Даже такой простой элемент, как бургер, требует внимания к деталям. Основные параметры, которые нужно учитывать:

• Размер и пропорции;
• Толщина линий;
• Расстояние между полосками;
• Цвет и контраст;
• Выравнивание и центровка.

Стандартные размеры бургера — от 24×24 до 30×30 пикселей. Это обеспечивает удобное касание на сенсорных экранах. Толщина каждой полоски обычно составляет 2–3 px, а расстояние между ними — 6–8 px. Такие пропорции делают иконку узнаваемой и визуально сбалансированной.

Цвет иконки должен контрастировать с фоном. Для светлых интерфейсов подойдёт тёмный серый или чёрный, для тёмных — светлый. Избегайте использования красных, зелёных или ярких цветов без причины: они могут быть восприняты как сигналы состояния (ошибка, успех). Если бургер находится на сложном фоне (например, фото), добавьте полупрозрачный оверлей или бэкграунд-блок.

Как создать бургер в Figma по шагам

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

1. Откройте новый файл в Figma. Создайте фрейм размером 30×30 px (или 24×24, если предпочитаете компактный вариант).
2. Нарисуйте первую полоску. Выберите инструмент Rectangle (R) и создайте прямоугольник 20×2 px. Центрируйте его по горизонтали внутри фрейма.
3. Создайте две копии. Выделите первый прямоугольник, нажмите Ctrl+D (или Cmd+D) дважды, чтобы получить три одинаковых элемента.
4. Расположите полоски вертикально. Выделите все три прямоугольника, нажмите на значок «Auto Layout» в правой панели. Направление установите «Vertical», интервал — 6 px.
5. Центрируйте содержимое. В настройках Auto Layout выберите «Center» для Horizontal alignment.
6. Настройте внешний вид. Задайте цвет заливки (например, #1A1A1A), проверьте контрастность.
7. Превратите в компонент. Выделите весь фрейм, нажмите Ctrl+Alt+K (или Cmd+Option+K), чтобы создать компонент.

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

Добавление состояний через Variants

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

• Создайте второй фрейм с иконкой «крестик» — две пересекающиеся линии под углом 45°.
• Объедините оба фрейма в один компонент с вариантами.
• Назначьте свойства: например, «state=open» и «state=closed».
• Используйте в прототипах для имитации анимации меню.

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

Хотя Figma — не инструмент для полноценной анимации, в ней можно смоделировать переход бургера в крестик. Это полезно для презентаций, демонстраций клиентам и тестирования UX-решений.

Для создания анимации:

• Используйте Prototype режим.
• Свяжите два состояния бургера (закрыто/открыто) через Interaction Trigger «On Click».
• Выберите Animation Type — Smart Animate. Figma попытается плавно преобразовать одну фигуру в другую.
• Если Smart Animate не работает идеально, разбейте анимацию на этапы: сначала вращение верхней линии, затем нижней, средняя исчезает.

Для более точного контроля создайте промежуточные кадры. Например:

1. Состояние 1: три горизонтальные линии.
2. Состояние 2: верхняя и нижняя линии начинают поворачиваться.
3. Состояние 3: они формируют крест, средняя линия прозрачна.

Такой подход увеличивает объём работы, но даёт более реалистичный результат.

Интеграция с системой дизайна

Бургер должен быть частью дизайн-системы. Добавьте его в библиотеку компонентов, задайте токены цветов и размеров. Используйте именованные стили (Color Styles, Effect Styles), чтобы обеспечить согласованность.

Например:

• Цвет: Text/Primary (#1A1A1A)
• Размер: Icon/M (24×24 px)
• Интервал: Spacing/Small (6 px)

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

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

Даже опытные дизайнеры допускают типичные ошибки при создании бургера. Вот основные из них и способы их устранения.

Ошибка 1: Неправильные пропорции

Слишком тонкие линии или маленький размер делают иконку плохо различимой. Особенно это критично на дешёвых экранах или при плохом освещении.

Решение: придерживайтесь стандартов Material Design или Human Interface Guidelines. Проверяйте макет в увеличенном виде (200–400%) и на эмуляторах устройств.

Ошибка 2: Отсутствие Auto Layout

Многие дизайнеры оставляют бургер как группу фигур, а не как авто-расположенный блок. Это затрудняет масштабирование и повторное использование.

Решение: всегда оборачивайте иконку в Auto Layout. Это гарантирует корректное поведение при изменении размеров или текста.

Ошибка 3: Игнорирование доступности

Бургер на светлом фоне с серым цветом #CCCCCC имеет контрастность ниже 3:1, что нарушает WCAG 2.1.

Решение: используйте плагины вроде «Contrast Checker» или встроенную функцию Figma. Цвет должен соответствовать уровню AA (минимум 4.5:1 для текста и иконок).

Ошибка 4: Жёсткая привязка к одному состоянию

Один компонент — одна иконка. При этом забывается, что бургер — это часть интеракции.

Решение: создавайте компоненты с вариантами. Подключайте состояния «open», «close», «hover», «disabled».

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

Дмитрий также отмечает важность тестирования: «Мы провели A/B-тест: в одной версии сайта меню было развёрнуто, в другой — скрыто за бургером. Конверсия в целевые действия упала на 18%. Вывод: бургер скрывает возможности. Используйте его осознанно».

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

Заключение

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

• Бургер должен быть минимум 24×24 px для удобства касания.
• Всегда используйте Auto Layout для управления интервалами и выравниванием.
• Создавайте компоненты с вариантами: open / closed, hover, disabled.
• Проверяйте контрастность и соответствие требованиям доступности.
• Тестируйте использование бургера в контексте: он не всегда повышает конверсию.