Как сделать в фигме кнопку

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

Как создать базовую кнопку в Фигме

Начните с выбора инструмента «Прямоугольник» (R) на панели слева. Нарисуйте элемент размером, соответствующим стандартам вашего проекта — например, 120×48 пикселей для десктопа. Это не случайное число: по данным Nielsen Norman Group, оптимальная минимальная площадь для тапа на мобильных устройствах — 44×44 пикселя, а на десктопе — 32×32 пикселя. Для удобства пользователей лучше перестраховаться.

Добавьте текст с помощью инструмента «Текст» (T). Выберите подходящий шрифт — чаще всего это семейства, соответствующие системе дизайна: Inter, Roboto, SF Pro. Размер текста: 14–16 px, жирность — Medium или SemiBold. Позиционируйте текст по центру: используйте горизонтальное и вертикальное выравнивание в панели свойств (right panel).

Теперь кнопка выглядит как элемент, но пока не является функциональным. Назначьте цвет фона: для основной кнопки часто используется контрастный цвет бренда (например, #2563EB), а для текста — белый или очень светлый (#FFFFFF). Добавьте тень, если нужно: небольшая тень с размытием 4–8 px и смещением 0–2 px придаст глубину.

Превращение кнопки в компонент

Кнопка — один из самых частых повторяющихся элементов. Если вы создадите её как обычный объект, каждое изменение потребует ручного обновления десятков экземпляров. Это главная причина, по которой 87% профессиональных команд используют компоненты в Фигме (исследование Figma State of Design 2025).

Чтобы превратить кнопку в компонент, выделите все элементы внутри (прямоугольник и текст). Нажмите Ctrl+Alt+K (Cmd+Option+K на Mac) или кликните «Создать компонент» в верхней панели. Фигма автоматически создаст главный компонент и экземпляр.

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

Создание вариантов и состояний кнопки

Кнопка не бывает только одной. Она меняет внешний вид в зависимости от состояния: нормальное, наведение, нажатие, отключённое. Без этих состояний интерфейс кажется «мертвым» и непонятным.

В Фигме это делается через варианты компонента. Выделите главный компонент, откройте панель свойств и нажмите «+ Добавить вариант». Создайте четыре варианта:
— Default (по умолчанию)
— Hover (наведение)
— Pressed (нажатие)
— Disabled (отключённое)

Для каждого варианта измените цвет фона, текста и тени. Например:
— Hover: цвет фона чуть темнее (#1D4ED8), тень +2 px
— Pressed: тень исчезает, тень внутренняя или лёгкое сжатие
— Disabled: серый цвет (#9CA3AF), непрозрачность 50%

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

Как проверить состояния

Перейдите в режим прототипирования (Prototype). Выберите кнопку, добавьте триггер «On Click» и установите переход на другой экран. Затем в разделе «Hover» и «Pressed» укажите, какой вариант должен отображаться при взаимодействии. Протестируйте в режиме предпросмотра — убедитесь, что переходы плавные и логичные.

Использование Auto Layout для адаптивных кнопок

Ручное позиционирование текста и границ — устаревший подход. Auto Layout позволяет кнопке автоматически подстраиваться под длину текста, размер шрифта и даже разрешение экрана.

Выберите группу (прямоугольник + текст), нажмите Ctrl+Shift+A (Cmd+Shift+A). Включите Auto Layout. Установите направление — «Horizontal». Добавьте отступы: padding 16 px по бокам, 12 px сверху и снизу. Включите «Wrap text» — тогда кнопка будет расширяться, если текст длинный.

Теперь, если вы замените текст на «Сохранить изменения» вместо «Сохранить», кнопка автоматически подтянется. Это особенно важно для локализации: в немецком языке слова часто длиннее, чем в английском или русском.

Также настройте выравнивание текста: «Center» по горизонтали и вертикали. Убедитесь, что «Fill container» не включён — иначе кнопка растянется на всю ширину контейнера, что может нарушить визуальную иерархию.

Доступность и тайпографика

Кнопки — не просто графические элементы. Они должны быть доступны для всех пользователей, включая людей с нарушениями зрения, моторики или когнитивных функций. WCAG 2.2 требует контрастности не менее 4.5:1 между текстом и фоном.

Проверяйте контраст с помощью встроенного инструмента Фигмы: выделите кнопку → в панели свойств найдите «Contrast» — он покажет уровень. Если он ниже 4.5, измените цвета. Для серого фона используйте #6B7280, а не #9CA3AF.

Также убедитесь, что кнопка не содержит только цвета как индикатор состояния. Например, не пишите «Красная кнопка — ошибка». Вместо этого добавьте значок (например, ❌) или текст «Ошибка».

Шрифты должны быть легко читаемыми. Избегайте курсива, слишком тонких начертаний (Thin, ExtraLight) и декоративных шрифтов. Используйте семейства с хорошей читаемостью: Inter, Open Sans, Noto Sans.

Частые ошибки и как их избежать

Даже опытные дизайнеры допускают ошибки, которые снижают эффективность кнопок. Вот самые распространённые:

• Отсутствие состояний — кнопка не реагирует на наведение или клик. Это создаёт ощущение «недоделанности». Всегда добавляйте минимум Hover и Pressed.
• Слишком маленький клик-регион — если кнопка 30×30 px, но текст 14 px, пользователь будет промахиваться. Добавьте внутренние отступы, а не только внешние.
• Использование только цвета — цветовая кодировка не работает для дальтоников. Всегда комбинируйте цвет с формой, текстом или иконкой.
• Отсутствие фокуса — кнопка не выделяется при навигации клавиатурой. В прототипах это не критично, но в спецификациях для разработчиков обязательно укажите стили :focus.
• Несогласованность в стилях — одна кнопка с тенью, другая без, третья с закруглением 8 px, четвёртая — 4 px. Используйте стиль-систему (Design System) и применяйте стили через компоненты.

Чек-лист перед сдачей макета:
— Все кнопки — компоненты
— Есть 4 состояния
— Контраст ≥ 4.5:1
— Автолейаут включен
— Минимальная ширина 80 px
— Текст не обрезается при локализации

Экспертное мнение: как кнопки влияют на конверсию

В 2024 году A/B-тесты в SaaS-компаниях показали: изменение цвета кнопки «Зарегистрироваться» с синего на зелёный увеличило конверсию на 18%. Но не цвет — а контекст. Кнопка, которая выделяется визуально, имеет чёткую метку и предсказуемое поведение, повышает доверие.

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

Часто задаваемые вопросы

Заключение

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

Правильно сделанная кнопка работает даже без объяснений. Она визуально призывает к действию, чётко сигнализирует о состоянии и адаптируется под любые условия. Используйте компоненты, Auto Layout, состояния и проверяйте контраст — это не рекомендации, а стандарты индустрии.

• Всегда превращайте кнопку в компонент — это экономит время и обеспечивает согласованность.
• Используйте Auto Layout для адаптивности и поддержки локализации.
• Добавляйте минимум 4 состояния: Default, Hover, Pressed, Disabled.
• Проверяйте контрастность текста и фона — не менее 4.5:1 по WCAG.
• Текст на кнопке должен быть глаголом и отвечать на вопрос «Что произойдёт?»