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

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

Основные требования к календарю в Figma

Календарь в цифровом интерфейсе должен быть понятным, доступным и легко масштабируемым. При проектировании в Figma важно учитывать юзабилити, визуальную иерархию и адаптивность под разные устройства. Дизайн должен соответствовать общему стилю продукта, будь то мобильное приложение, веб-платформа или десктопный софт.

Пользователь ожидает, что календарь будет отображать актуальные даты, выделять текущий день, праздники и важные события. Кроме того, он должен корректно работать с разными локализациями: например, начинаться с понедельника в европейских странах или с воскресенья в США. Эти особенности нужно закладывать на этапе проектирования.

Figma позволяет создавать как статичные, так и интерактивные календари. Статичные используются для макетов презентаций, а интерактивные — для кликабельных прототипов. В обоих случаях важно использовать системный подход: компоненты, стили текста, цветовые переменные и символы (в случае использования старых версий).

Шаг 1: Создание сетки и структуры

Первый этап — построение базовой сетки. Месячный календарь обычно состоит из 7 столбцов (по количеству дней недели) и до 6 строк (максимальное количество недель в месяце). Это даёт сетку 7×6 = 42 ячейки.

Начните с создания фрейма размером 360×640 пикселей — стандартный размер для мобильного макета. Внутри него добавьте сетку с помощью функции Layout Grid. Установите 7 колонок с отступом 8 px и полосой пропускания (gutter) 8 px. Это обеспечит равномерное распределение элементов.

Далее создайте заголовок календаря. Он может включать название месяца и года, а также кнопки навигации «Назад» и «Вперёд». Расположите их по центру или с краёв, в зависимости от дизайна. Используйте крупный шрифт (например, 20–24 px), чтобы информация была легко читаема.

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

Пример структуры сетки

• Фрейм: 360×640 px
• Сетка: 7 колонок × 1 строка, gutter 8 px
• Высота строки с днём недели: 40 px
• Высота строки с датой: 56 px
• Общая высота календаря: ~400 px

Шаг 2: Настройка компонентов и автолэйаута

Auto-layout — одна из самых мощных функций Figma, особенно при работе с календарём. Она позволяет автоматически выравнивать элементы, задавать отступы и масштабировать контейнеры. Начните с создания ячейки даты.

Создайте прямоугольник размером 48×48 px — это будет контур дня. Внутри разместите текст с номером даты (например, «15») по центру. Примените стиль текста: 14 px, полужирный для текущего дня, обычный — для остальных. Затем объедините фигуру и текст в один фрейм и включите auto-layout по вертикали и горизонтали.

Теперь преобразуйте эту ячейку в компонент. Это позволит использовать её многократно и вносить изменения глобально. Например, если вы решите изменить цвет выделенного дня, достаточно обновить мастер-компонент — все экземпляры автоматически обновятся.

Для строк с датами создайте горизонтальный фрейм с auto-layout и 7 дочерними ячейками. Убедитесь, что отступы между ячейками равны 8 px. Аналогично создайте несколько таких строк и объедините их в вертикальный фрейм — получится поле календаря.

Работа с мастер-компонентами

• Создайте мастер-компонент для ячейки дня
• Добавьте варианты состояний: активный, неактивный, сегодня, выходной
• Используйте boolean-свойства (например, isToday, isSelected)
• Настройте overrides, чтобы менять текст и цвет в экземплярах

Работа с датами и плагинами

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

Один из самых популярных — Calendar Grid. Он позволяет выбрать месяц и год, указать первый день недели и получить готовую сетку с датами. После установки плагина перейдите в меню Plugins → Calendar Grid → Generate, задайте параметры и вставьте результат в ваш макет.

Другой полезный плагин — Date & Time. Он не создаёт сетку, но помогает вставлять актуальные даты и форматировать их по шаблону (например, «18 января 2026»). Это удобно для заголовков и подписей.

Если вы работаете над прототипом с реалистичными данными, можно использовать Content Reel — плагин, который заполняет текстовые поля случайными, но осмысленными значениями, включая даты.

Дизайн интерфейса календаря

Визуальный стиль календаря должен соответствовать дизайн-системе продукта. Используйте единые цветовые переменные, типографику и радиусы скругления. Например, если в приложении используются мягкие тени и закруглённые углы, примените те же параметры к ячейкам.

Выделите текущий день с помощью цвета фона (например, синий #3B82F6) и белого текста. Выбранный день можно подсветить другим цветом (например, фиолетовым). Выходные дни — выделить жирным или другим цветом текста.

Для событий используйте точки или маленькие маркеры под датой. Они могут быть разных цветов в зависимости от типа события (встреча, задача, праздник). Размещайте их в нижней части ячейки, чтобы не перегружать интерфейс.

Если календарь используется в тёмной теме, убедитесь, что контраст текста и фона соответствует стандартам WCAG (минимум 4.5:1). Используйте инструмент Contrast Checker в Figma, чтобы проверить читаемость.

Цветовые состояния ячеек

• Сегодня: фон #3B82F6, текст #FFFFFF
• Выбрано: фон #7C3AED, текст #FFFFFF
• Выходной: текст #EF4444, жирный
• Не в текущем месяце: текст #9CA3AF, прозрачность 50%
• Событие: точка 4×4 px, цвет зависит от категории

Интерактивность и прототипы

Чтобы календарь стал частью кликабельного прототипа, настройте переходы между экранами. Например, при клике на дату — открывается экран с событиями. В Figma это делается через вкладку Prototype.

Выделите ячейку с датой, перейдите в Prototype и создайте связь (connection) с другим фреймом. Выберите триггер (например, On Click) и действие (например, Navigate to). Можно добавить анимацию перехода — Slide, Fade или Smart Animate.

Для навигации между месяцами свяжите стрелки «Назад» и «Вперёд» с другими календарными фреймами. Чтобы не создавать 12 отдельных макетов, используйте один фрейм и меняйте только текст месяца и даты через overrides.

Smart Animate особенно полезен при перелистывании месяцев. Если названия слоёв совпадают, Figma плавно анимирует изменение текста и позиций, создавая эффект реального календаря.

Советы по прототипированию

1. Называйте слои понятно: «Button_Next», «Cell_Date_15»
2. Используйте один и тот же фрейм для всех месяцев, меняя данные
3. Применяйте Smart Animate для плавных переходов
4. Тестируйте прототип на устройстве через Figma Mirror

Ошибки, которых стоит избегать

Даже опытные дизайнеры допускают типичные ошибки при создании календарей в Figma. Одна из самых частых — игнорирование локализации. Например, в США календарь начинается с воскресенья, а в Европе — с понедельника. Не учтёте это — и пользователи будут чувствовать дискомфорт.

Другая ошибка — отсутствие масштабируемости. Если вы создали календарь вручную без компонентов, его невозможно быстро обновить. Любое изменение дизайна потребует редактирования каждой ячейки отдельно.

Также распространена проблема с доступностью. Слишком светлый текст на светлом фоне, маленький размер шрифта, отсутствие контраста — всё это делает календарь трудным для восприятия, особенно людям с нарушениями зрения.

Чек-лист перед финализацией

• Проверены ли дни недели для нужной локали?
• Использованы ли компоненты и auto-layout?
• Выделен ли текущий день?
• Соответствует ли контраст стандартам доступности?
• Работают ли переходы в прототипе?

Экспорт и интеграция

После завершения дизайна календарь может быть экспортирован для разработчиков. Используйте режим Developer (Shift+E), чтобы показать стили, отступы и переменные. Убедитесь, что все компоненты правильно названы и сгруппированы.

Для экспорта в код можно использовать плагины вроде Anima, Figma to React или Zeplin. Они конвертируют макет в HTML/CSS или компоненты React, сохраняя структуру и стили.

Если календарь будет реализован в виде библиотечного компонента (например, в Storybook), подготовьте документацию: описание состояний, размеров, цветов и взаимодействий. Это ускорит процесс разработки и снизит количество уточняющих вопросов.

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

Анна Романова, Senior Product Designer, Figma Community Contributor

• «Календарь — это не просто таблица дат. Это интерфейс, с которым пользователь взаимодействует ежедневно. Поэтому он должен быть не только красивым, но и интуитивным.»
• «Я всегда начинаю с исследования: кто будет использовать календарь, в какой локали, какие события он должен отображать. Без этого контекста любой дизайн будет поверхностным.»
• «В Figma ключ к успеху — системный подход. Компоненты, переменные, плагины. Чем больше автоматизации, тем выше качество и скорость работы.»

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

Заключение

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

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

• Используйте сетку 7×6 и auto-layout для структуры календаря
• Применяйте компоненты для масштабируемости и удобства обновления
• Автоматизируйте заполнение дат с помощью плагинов
• Учитывайте локализацию и доступность при дизайне
• Настройте интерактивность через Prototype и Smart Animate