Как сделать кнопку в figma

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

Собираем базовую кнопку

Сначала выберите инструмент Rectangle и нарисуйте форму нужного размера. Для удобной кнопки лучше сразу задать:

• Скругление углов, чтобы элемент выглядел как интерфейсная кнопка, а не как блок;
• Заливку, которая контрастирует с фоном;
• Текст по центру, чтобы подпись читалась одинаково на всех экранах.

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

Если вы раздумываете, как сделать кнопку в figma быстрее всего, полезно сразу объединить прямоугольник и текст в один блок с Auto Layout. Тогда при изменении длины подписи размеры подстроятся автоматически, а вы не будете вручную двигать элементы после каждой правки.

Настраиваем состояния и поведение

Одна статичная кнопка редко подходит для реального интерфейса. Обычно нужны хотя бы базовые состояния:

• Обычное состояние — основная версия кнопки;
• hover — вариант при наведении;
• pressed — вид при нажатии;
• disabled — неактивное состояние.

Чтобы сделать их в Figma, создайте несколько вариантов одного элемента или используйте компоненты с вариантами. У каждого состояния можно поменять цвет заливки, обводку, прозрачность текста или тень. Главное — сохранять одинаковые размеры, чтобы переходы между состояниями не сдвигали верстку в макете.

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

Делаем кнопку аккуратной и удобной

Хорошая кнопка отличается не только внешним видом, но и предсказуемостью. Проверьте несколько вещей:

1. Текст помещается без переноса и не прилипает к краям.
2. Размер кнопки достаточен для комфортного клика.
3. Цвет текста читается на фоне заливки.
4. Отступы одинаковы слева и справа.
5. Скругление и толщина шрифта соответствуют стилю всего интерфейса.

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

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

Проверяем результат

Финальная проверка занимает немного времени, но экономит переделки. Убедитесь, что:

• Кнопка визуально выделяется среди соседних элементов;
• Текст читается на разных масштабах;
• Состояния выглядят как одна система, а не как случайные варианты;
• При изменении подписи дизайн не распадается.

Если все это выполнено, кнопка готова для макета, прототипа или дизайн-системы. В рабочем файле удобно держать одну эталонную версию и от нее делать все новые кнопки. Тогда вы не будете каждый раз заново решать, как сделать кнопку в figma, а просто адаптируете уже собранный шаблон под нужный экран.