Адаптивный дизайн с переменными: Управление размерами для брейкпоинтов

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

Что такое брейкпоинты и зачем они нужны?

Брейкпоинты (breakpoints) — это точки, при которых дизайн макета меняется, чтобы идеально подстроиться под размер экрана пользователя. В вебе это обычно ширина экрана, при которой элементы меняют расположение, размеры, шрифты. В Figma мы имитируем это поведение с помощью переменных и режимов.

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

Создаём коллекции переменных для брейкпоинтов

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

Допустим, у нас три основных брейкпоинта:

• Мобильный (Mobile): до 767px
• Планшетный (Tablet): от 768px до 1279px
• Десктопный (Desktop): от 1280px

В Figma можно создать одну коллекцию, например, Layout, и внутри неё определить режимы для каждого брейкпоинта.

1. Откройте панель Variables: Справа найдите Local Variables.
2. Создайте новую коллекцию или используйте существующую: Если у вас уже есть коллекция для числовых переменных (например, Spacing или Sizing), добавьте в неё новые режимы. Если нет, создайте новую, например, Breakpoints.
3. Добавьте режимы (Modes):
   • Нажмите Add mode и переименуйте в Mobile.
   • Добавьте ещё два режима: Tablet и Desktop.

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

Например, для переменной spacing-md (средний отступ):

Переменная	Mobile	Tablet	Desktop
spacing-md	16	24	32
font-size-h1	32	48	64
card-width	300	400	500

Совет: Давайте переменным понятные названия. Например, spacing-xs, spacing-sm, spacing-md, spacing-lg для отступов или font-size-body, font-size-h1 для типографики.

Применяем переменные к элементам макета

Когда переменные для каждого брейкпоинта готовы, примените их к свойствам элементов в Figma.

1. Выберите элемент: Например, фрейм, текстовый блок или компонент.
2. Примените переменную:
   • Для отступов (padding, gap в Auto Layout) или размеров (width, height): Наведите курсор на поле ввода значения. Появится иконка Variables (квадрат с четырьмя точками). Нажмите на неё и выберите нужную числовую переменную (например, spacing-md).
   • Для размеров шрифта: Выберите текстовый слой. В панели Text нажмите иконку Variables рядом с полем Size и выберите переменную (например, font-size-body).

Переключаемся между режимами, чтобы увидеть адаптивность

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

1. Выберите фрейм верхнего уровня (например, фрейм, который представляет страницу вашего сайта).
2. Перейдите в раздел Layer на правой боковой панели.
3. Найдите выпадающий список Modes (Режимы) и выберите нужный режим: Mobile, Tablet или Desktop.

При переключении режима все элементы, к которым применены переменные из этой коллекции, автоматически изменят свои значения. Это позволяет быстро проверять адаптивность дизайна, не создавая отдельные макеты для каждого размера экрана.

Практическое задание

Создайте небольшой UI-блок: карточку товара или элемент навигации. Определите для него несколько числовых переменных (например, отступы, размер шрифта заголовка, размер кнопки). Создайте три режима в коллекции переменных: Mobile, Tablet, Desktop. Присвойте разные значения этим переменным для каждого режима. Затем примените переменные к элементам вашей карточки/навигации и посмотрите, как она меняется при переключении режимов.

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

Мы разобрались, как переменные помогают управлять размерами и отступами для разных брейкпоинтов. Но что, если элементы должны не просто менять размер, а полностью перестраиваться, например, переходить на новую строку или менять направление? В следующем разделе мы углубимся в новые возможности Auto Layout, которые позволят нам создавать ещё более сложные и динамичные адаптивные макеты.