Как быстро собрать календарь с помощью Auto Layout в Figma?

Календарь является одним из самых часто используемых элементов интерфейса. Несмотря на это, многие дизайнеры всё ещё собирают такие компоненты вручную. Auto Layout в Figma позволяет же значительно упростить и автоматизировать этот процесс. Если научиться применять этот инструмент, можно не только ускорить процесс создание календаря, но и сделать компонент по-настоящему гибким: легко изменять размеры, интервалы, количество строк и состояние элементов. Календарь — это повторяющаяся UI-система, а значит Auto Layout подходит для него лучше всего. Вместо ручного выравнивания мы работаем со структурой компонентов. Разберем поэтапно, как собрать такой календарь.

Шаг 1. Создаем шапку с месяцем и кнопками переключения

Пишем название месяца, по бокам добавляем стрелки для перехода к следующему или предыдущему месяцу.

Шаг 2. Создаем базовую ячейку дня

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

1. Выбираем инструмент «Текст» и пишем любое число (впоследствии значения будут меняться). Задаем нужный шрифт и размер, выравнивание ставим «по центру».
2. Оборачиваем текст в Auto Layout (на Windows комбинация клавиш Shift + A). Устанавливаем желаемые параметры: размер ячейки (фиксированный), отступы, цвет, скругление углов.

В нашем примере были использованы следующие параметры:

• вертикальный Auto Layout
• выравнивание по центру
• фиксированная ширина и высота (120)
• одинаковые внутренние отступы (10)
• белая заливка (fill)
• скругление углов 20

Вот такая ячейка у нас получилась:

Шаг 3. Создаем из ячейки компонент с вариантами (Variants)

Чтобы календарь был удобным в работе, состояния лучше хранить внутри одного компонента. Для календаря нам понадобятся 4 состояния элементов:

• Default (по умолчанию)
• Hover (при наведении)
• Active (активный)
• Disabled (неактивный)

Чтобы создать компонент с вариантами:

1. Выбираем созданную ячейку и на панели справа нажимаем «create component».



2. Также на панели справа нажимаем «add variant» и создаем 4 вышеуказанных состояния (у каждого варианта меняем параметры, чтобы ячейки отличались друг от друга).



Вот такие варианты у нас получились:

Шаг 4. Создаем строку дней недели

1. Копируем созданную нами ячейку дня.
2. Делаем Detach instance для компонента (правая кнопка мыши — Detach instance), чтобы сохранились настройки Auto Layout, но ячейка не была инстансом компонента.
3. Дублируем 7 раз и меняем текст на название дней недели.
4. Объединяем в общий Auto Layout.

Шаг 5. Собираем календарь

После того, как мы создали ячейку дня, можно собрать Auto Layout с числами:

1. Создаем на рабочем поле инстанс компонента числа (для этого копируем мастер-компонент с зажатой alt (или option), чтобы получить его экземпляр).
2. Оборачиваем его в Auto Layout с помощью горячих клавиш Shift + A.
3. В настройках Auto Layout меняем направление на Grid.
4. Устанавливаем 7 колонок и 5 (или 6) строк, а также необходимое расстояние между ячейками (gap).

5. Дублируем инстанс компонента необходимое количество раз.
6. Меняем текст внутри ячеек на нужные числа месяца (если нужно, меняем состояния ячеек).

Наш календарь готов!

Заключение

Главное преимущество такого подхода — возможность управлять всем календарем через главный компонент. Любые изменения, внесенные в основную ячейку, автоматически применяются ко всей сетке. Кроме того, с помощью Variants удобно переключать состояния элементов — например, отмечать текущий день, выбранную дату, hover или disabled-состояние. Это не только делает календарь гибким, но и значительно упрощает дальнейшую поддержку интерфейса.

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

Материал подготовлен Елизаветой Мордвиновой, выпускницей курса «UX/UI-дизайнер». Наши ученики умеют уверенно работать с современными инструментами и решать реальные задачи интерфейсов. Auto Layout, адаптивные компоненты и продуманные UI-системы становятся частью повседневной практики уже во время обучения.

Если хотите освоить эти навыки с нуля, начать можно с бесплатного интенсива «UX/UI: Start».