Кнопка и Auto Layout
Курс «Макет учебного портала в Figma»
Палитра и текстовые стили пока существуют как правила и отдельные образцы. Теперь соберём первый элемент интерфейса — кнопку «Открыть курс». У неё должны сохраняться фон, скругление и внутренние отступы, даже если надпись заменена на «Перейти к первому уроку». Ручное изменение ширины прямоугольника после каждой редакции текста быстро приведёт к разным кнопкам.
Auto Layout задаёт компоновку дочерних объектов внутри фрейма: направление, расстояния и размеры. Мы начнём с одного текстового слоя, чтобы понять механизм без лишних деталей. Затем добавим значок и увидим, как тот же контейнер управляет несколькими дочерними элементами.
Из текста получается контейнер
На странице 02 Components создайте текстовый слой Label с надписью «Открыть курс». Примените роль Label, задайте Semibold и цвет text/on-action. Выделите слой и добавьте Auto Layout. Figma создаст или преобразует контейнер, в котором текст станет дочерним объектом. Назовите этот фрейм Button/Base.
Задайте горизонтальное направление, центрирование по вертикали, отступы слева и справа 20, сверху и снизу 12. У контейнера используйте фон action/primary и скругление 10. Если высота строки равна 20, ожидаемая высота кнопки составит 44: по 12 сверху и снизу плюс 20 для текста. Число зависит от действительной высоты дочернего слоя, поэтому сначала проверяйте его настройки.
Для ширины и высоты контейнера выберите Hug contents. Такой режим означает, что размер родителя определяется содержимым и внутренними отступами. Для текстового слоя оставьте размер по тексту, без случайной фиксированной высоты. При изменении надписи родитель должен расшириться, сохраняя одинаковые поля вокруг текста.
Свойства Auto Layout и режимы размеров перечислены в официальном руководстве Figma. Названия Hug contents, Fill container и Fixed относятся к разным отношениям между родителем и дочерним объектом. Они не являются тремя вариантами одного декоративного эффекта, поэтому будем выбирать их по задаче.
В официальном письменном руководстве Figma показаны Hug contents, Gap и Padding у кнопки. Значения автора отличаются от размеров учебного «Маршрута».
Ещё одна полезная проверка — увеличение внутреннего промежутка с 8 до 16 при наличии значка. Общая ширина кнопки должна измениться только на разницу этого промежутка; края останутся на прежнем расстоянии от содержимого. Если ширина выросла также из-за полей, вы изменили padding вместо gap. Верните исходное значение и повторите выбор свойства. На маленьком элементе эти две ошибки выглядят похоже, но в карточке дадут разные последствия: одна меняет связь детей, другая меняет расстояние до границы.
Три модели размера
Замените надпись на «Начать». При Hug contents ширина кнопки станет меньше, но отступы останутся прежними. Затем задайте контейнеру Fixed width со значением 240. Теперь короткая и длинная надписи располагаются внутри одной ширины. Для ряда одинаковых действий такой размер может быть уместен, однако для обычной кнопки он нередко создаёт слишком много пустого пространства.
Fill container применим, когда дочерний элемент должен занять доступное место в Auto Layout родителе. Создайте внешний вертикальный фрейм ButtonExample шириной 350, поместите кнопку внутрь и назначьте ей Fill container по горизонтали. Теперь ширину задаёт родитель, а не надпись. Так позднее получим широкое основное действие в мобильной карточке.
| Режим | Кто определяет размер | Пример портала |
|---|---|---|
| Hug contents | Собственное содержимое и отступы | Короткая кнопка в шапке |
| Fill container | Доступное пространство родителя | Кнопка на всю ширину мобильной карточки |
| Fixed | Заданное число | Контрольный образец для сравнения |
Не задавайте одновременно ожидание «ширина зависит от текста» и жёсткую ширину 240. Редактор выполнит выбранную настройку, а не ваше словесное намерение. Если кнопка перестала реагировать на надпись, проверьте режим её контейнера, затем размер текста и только после этого другие свойства. Такой порядок соответствует направлению зависимости.
Значок и расстояние между слоями
Для учебного значка создайте простую стрелку в отдельном фрейме 16 на 16 или используйте собственный SVG из архива. Поместите её после Label в горизонтальный Auto Layout кнопки. Между слоями задайте промежуток 8. Внутренние поля остаются 20 по бокам и 12 по вертикали: расстояние между детьми не должно заменять отступ от края родителя.
Поменяйте порядок дочерних слоёв в панели Layers. Стрелка окажется перед текстом, сохраняя заданный промежуток. Это показывает, что порядок определяется структурой контейнера. Перетаскивание стрелки на случайную координату с исключением её из потока даст другой результат: она перестанет участвовать в расчёте общей ширины.
У значка оставьте фиксированный размер 16 на 16. Он не должен растягиваться вместе с широкой мобильной кнопкой. У текста тоже нет причины растягивать сами буквы; Fill container у текстовой области означает изменение области размещения, а не масштабирование шрифта. Различайте размер слоя и размер изображения внутри него.
Удалите значок из одной копии кнопки. Ожидаем, что лишний межэлементный промежуток исчезнет, поскольку детей снова стало один. Если справа осталась пустая зона шириной 24, вероятно, вы нарисовали её отдельным невидимым прямоугольником. Такой обходной приём скрывает модель компоновки и затруднит создание состояния без значка.
Длинная надпись и ограничения
Проверьте кнопку с надписью «Перейти к первому уроку по сетке». На узком экране она может перестать помещаться в доступную ширину. Не уменьшайте шрифт автоматически до почти нечитаемого размера. Рассмотрите сокращение действия до «Начать урок», перенос либо изменение расположения. Решение зависит от смысла и контекста, а не от удобства одного образца.
Для нашей основной кнопки выберем короткие надписи «Открыть курс» и «Начать урок». Заголовок рядом уже объясняет, какой курс или урок откроется. Дополнительная длинная фраза не даёт новой информации, но усложняет адаптивность. Это пример того, как редактура текста и настройка контейнера дополняют друг друга.
Если кнопка окажется ниже карточки, которую мы создадим позже, её положение должен задавать общий вертикальный контейнер. Не закрепляйте её на абсолютной координате только ради выравнивания трёх картинок. Сначала определим, должны ли карточки иметь одинаковую высоту, затем выберем подходящую модель. Сейчас кнопка отвечает лишь за собственные отступы и содержание.
Ожидаемое состояние — один контейнер, который правильно реагирует на короткую и длинную надпись, и внешний образец шириной 350 для Fill container. Поведение описано для самостоятельного повторения; рабочий файл не запускался. На следующем шаге превратим этот элемент в компонент и сохраним связь между его экземплярами.