Дизайн и конверсия

Как сделать адаптивную кнопку в Figma?

Виктор, Челябинск 1,2 тыс. просмотров

Делаю первый макет лендинга в Figma, и кнопка "Заказать" на мобильной версии либо съезжает в сторону, либо текст вылезает за края. Как сделать её адаптивной, чтобы нормально тянулась под разные экраны?

Дмитрий Акиндинов разработчик лендингов, 15 лет практики

ответил

Адаптивная кнопка в Figma делается через Auto Layout: выделяете текст и фон кнопки, нажимаете Shift+A, задаёте отступы (например, 24 px по бокам и 14 px сверху-снизу) и ставите ширине родительского фрейма "Fill container", а самой кнопке - "Hug contents". Тогда кнопка держит одинаковые отступы на любом экране, не съезжая и не обрезая текст.

Дальше настраиваете constraints (Properties -> Constraints): для кнопки по центру экрана ставите "Center", для кнопки на всю ширину мобильного блока - "Left and Right". Если поведение кнопки сильно различается на десктопе и мобильном - разный размер, разное расположение - удобнее сделать component set с вариантами под каждый брейкпоинт, а не одну кнопку с ручной подгонкой.

Проверять стоит минимум на трёх ширинах: 375 px (мобильный), 768 px (планшет), 1440 px (десктоп) - в Figma можно быстро переключать фреймы этих размеров. Для мобильной версии высота кнопки должна быть не меньше 44 px: это минимальный размер, по которому палец уверенно попадает при нажатии, меньшие кнопки промахиваются чаще.

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

Подробный разбор CTA-кнопка на лендинге: текст, цвет, размер, расположение
Не нашли свой вопрос

Задайте его напрямую

Отвечаю сам, на почту, обычно в тот же день. Разбор самых частых вопросов потом попадает в этот раздел.

Похожие вопросы

Все вопросы темы "Дизайн и конверсия"

Помогу выбрать

Сомневаетесь — напишите, разберёмся за 10 минут

Расскажете про ваш бизнес и задачу — подскажу, что нужно: лендинг, многостраничник или вообще не сайт. Без обязательств, бесплатно.

Отвечаю в течение 15 минут в рабочее время (будни 11:00–20:00 МСК). Если удобнее e-mail: 9123578@gmail.com

Telegram TG MAX MAX Звонок