Хочешь, чтобы кнопка в твоём дизайне тянулась по ширине текста и не «разваливалась» при изменении размеров?
Figma умеет это — и очень просто. В этой статье покажу, как сделать адаптивную кнопку, которая подстраивается под текст, остаётся аккуратной и удобной в работе.
Что значит «адаптивная кнопка»?
Адаптивная кнопка — это элемент, который:
- растягивается по ширине в зависимости от длины текста;
- сохраняет отступы от текста до краёв;
- остаётся универсальной при переиспользовании и изменении контента.
Такие кнопки незаменимы в UI-дизайне: при работе с компонентами, автолэйаутами и разными языками интерфейса.
Шаг 1: Создай текст
- Инструментом Text (T) напиши, например: Купить.
- Установи нужный шрифт, размер и стиль.
Шаг 2: Оберни текст в Auto Layout
- Выдели текст.
- Нажми Shift + A или кликни "Auto layout" в правой панели.
- Установи отступы по горизонтали и вертикали — например, по 16px и 10px.
- Задай фон кнопке: в правой панели в блоке Fill выбери цвет, например, синий.
Теперь у тебя — уже почти адаптивная кнопка. Она будет тянуться, если изменить текст.
Шаг 3: Закругли углы и добавь стиль
- В блоке Corner radius задай скругление — например, 8px.
- Можешь добавить тень, обводку, иконку — это тоже можно настроить в Auto Layout.
Важно: все элементы (текст, иконки и фон) должны быть внутри одного Auto Layout блока.
Шаг 4: Сделай компонент
- Выдели кнопку.
- Нажми Cmd/Ctrl + Alt + K или кликни "Create component".
- Переименуй компонент: Button / Primary.
Теперь у тебя есть кнопка, которую можно дублировать и переиспользовать.
Меняешь текст — кнопка адаптируется сама.
Дополнительно: сделай вариации кнопок
Figma позволяет создавать Variants:
- Обычная
- Наведённая (hover)
- Неактивная (disabled)
- Выдели компонент кнопки.
- Нажми Combine as variants (в правой панели).
- Назначь каждой версии своё состояние.
Теперь у тебя — полноценная система кнопок.
Ошибки, которых стоит избегать
- Не создавай кнопку как обычный прямоугольник с текстом отдельно — она не будет адаптивной.
- Не забывай включать Auto Layout при добавлении иконок или дополнительных элементов.
- Не используешь компоненты? Тогда каждый раз будешь делать кнопку вручную — а это время и ошибки.
Что ты получаешь в итоге
- Кнопка меняется по ширине под текст.
- Её легко масштабировать и переиспользовать.
- Можно быстро делать адаптации для других языков и устройств.
- Чистый, понятный интерфейс без «рассыпающихся» элементов.
Вывод
Адаптивные кнопки — это не про эстетику, а про эффективность и профессионализм.
Сделать их в Figma — проще простого, если освоить Auto Layout и компоненты.
LF-CODE
Ни тратьте время на ручные доработки. На сайте LF-CODE вы найдёте готовые модификации для Тильды — от эффектных анимаций до полезных скриптов. Команда LF-CODE поможет адаптировать их под ваш сайт или реализовать нужную доработку с нуля.
🔧 Есть техподдержка — пишите в Telegram , они помогут разобраться.
📢 Подписывайтесь на Telegram канал, чтобы получать свежие обновления для сайтов!