2025-11-28 22:41:46

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

Прежде чем мы перейдем к техническим шагам, важно понять, что кнопка - это не просто прямоугольник с текстом. В цифровых интерфейсах кнопка - это интерактивный элемент, который призывает пользователя к действию (Call to Action). Ее основная задача - быть заметной, понятной и предсказуемой.

В Figma мы создаем визуальное представление этой кнопки, которое в дальнейшем разработчик превратит в рабочий код. Правильно созданная кнопка в Figma учитывает состояние (обычное, наведение, нажатие), доступность (контраст, размер) и единообразие с общим стилем продукта. Весь процесс ее создания строится на использовании базовых инструментов Figma и принципах системного подхода.

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

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

Вы научитесь работать с заливкой, скруглением углов и типографикой, чтобы ваша кнопка была не просто графическим объектом, а осмысленным призывом к действию. Это отправная точка для любого новичка в Figma, понимание которой критически важно для освоения более сложных техник. Давайте начнем с самых азов, которые стаятся кирпичиками для будущей дизайн-системы.

Это основа основ. Здесь мы научимся создавать статичную кнопку, с которой начинается любой макет. Запустите Figma и создайте новый файл. Вы увидите чистый холст.

Выберите инструмент «Frame»

Фрейм в Figma - это как артборд в других редакторах. Он определяет область вашего дизайна. Для кнопки можно создать отдельный фрейм или работать прямо на фрейме будущей страницы.
Кликните и растяните прямоугольник на холсте. Для примера, задайте ему размер примерно 120 на 40 пикселей.

Создайте прямоугольник

Выберите инструмент «Rectangle» (Прямоугольник) (горячая клавиша R).
Нарисуйте прямоугольник внутри вашего фрейма. Сделайте его чуть меньше, чтобы были видны отступы. Например, 100 на 36 пикселей.

Стилизуйте прямоугольник

Заливка (Fill): На панели справа нажмите на значок «плюсика» рядом с Fill. Выберите цвет. Для кнопки действия (CTA) часто используется яркий, контрастный цвет, например, синий или зеленый.
Обводка (Stroke): Если она не нужна, уберите ее. Для некоторых стилей кнопок (например, вторичных) обводка может быть полезна.
Скругление углов (Corner Radius): Найдите это свойство в панели справа. Задайте значение, например, 8. Это сделает углы мягкими и современными. Вы можете скруглить все углы сразу или каждый по отдельности.

Добавьте текст на кнопку

Выберите инструмент «Text» (Текст) (горячая клавиша T).
Кликните в центре вашего прямоугольника и напишите, например, «Подписаться».
Выделите текст и настройте его в панели справа: Шрифт (Font): Выберите читаемый шрифт (например, Inter или Roboto). Насыщенность (Weight): Для кнопки лучше использовать Medium или SemiBold, чтобы текст был заметнее. Размер (Size): Обычно 14-16 пикселей. Цвет (Fill): Цвет текста должен быть контрастным по отношению к фону кнопки. На синем фоне - белый текст.

Выровняйте текст по центру кнопки

Теперь у вас есть два слоя: прямоугольник и текстовый слой.
Выделите оба слоя, зажав Shift или выделив их на панели слоев слева.
В верхней панели появится меню выравнивания. Нажмите иконки «Выровнять по горизонтальным центрам» и «Выровнять по вертикальным центрам».
Совет: После выравнивания сгруппируйте их (Ctrl или Cmd + G) или, что лучше, создайте компонент (Ctrl/Cmd + Alt + K), но об этом позже.

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

Теперь, когда у нас есть базовая кнопка, настало время наделить ее интеллектом и гибкостью. Ключевой технологией для этого в Figma является Auto Layout. Это не просто функция, а фундаментальный принцип построения современных интерфейсов. В этом разделе мы подробно разберем, как Auto Layout превращает вашу статичную группу слоев в динамический контейнер, который автоматически подстраивает свои размеры под содержимое.

Вы узнаете, как управлять внутренними отступами и выравниванием, создавая кнопки, которые легко адаптируются к изменению текста или добавлению иконок. Это важнейший шаг от создания просто "картинки" к проектированию по-настоящему функционального и масштабируемого интерфейсного элемента. Это самый важный раздел. Auto Layout - это суперспособность Figma, которая делает ваши кнопки и другие элементы гибкими и адаптивными.

Представьте, что вам нужно изменить текст на кнопке с «Купить» на «Добавить в корзину». Без Auto Layout вам придется вручную растягивать прямоугольник, снова выравнивать текст. Это медленно и не точно. Auto Layout автоматически меняет размер контейнера (вашей кнопки) в зависимости от содержимого (текста и иконок).

Он также управляет отступами между элементами внутри себя. По сути, это механизм, который ведет себя так же, как кнопка в реальном веб-сайте - растягивается и сжимается под контент. Выделите оба слоя (ваш прямоугольник и текстовый слой). Если они сгруппированы, выделите группу. Нажмите на значок «+» рядом с Auto Layout на правой панели. Или используйте горячие клавиши Shift + A.

Изучите панель управления Auto Layout:

Направление (Direction): У вас, скорее всего, стоит Horizontal (горизонтальное). Это правильно, так как у нас элементы идут в строку (слева направо).
Пространство между элементами (Spacing between items): Если бы у вас была кнопка с иконкой и текстом, здесь можно задать расстояние между ними. Пока оставьте 0.
Отступы (Padding): Это самое главное! Поля - это внутренние отступы от границы Auto Layout до его содержимого (вашего текста). Задайте значения, например, Left: 24, Right: 24, Top: 12, Bottom: 12. Вы увидите, как ваша кнопка "раздвинулась", создав комфортные отступы вокруг текста.
Выравнивание (Alignment): Установите оба значения (по горизонтали и вертикали) в Center.

Теперь ваша кнопка - это умный, адаптивный объект. Попробуйте изменить текст - размер кнопки изменится автоматически, сохраняя заданные вами отступы.

Создание вариантов состояний кнопки с помощью component и variants

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

В этом разделе мы познакомимся с мощнейшим инструментом Figma - Variants (Варианты). Вы научитесь создавать из основной кнопки главный компонент, а затем на его основе разрабатывать набор всех необходимых состояний, объединенных в одну удобную и логичную систему. Это основа для построения последовательного и предсказуемого пользовательского опыта.

В реальном интерфейсе кнопки реагируют на действия пользователя: меняют цвет при наведении курсора, становятся темнее при нажатии, могут быть неактивными.

Чтобы показать это поведение в дизайне, мы создаем несколько состояний одной и той же кнопки. Figma предлагает для этого мощный инструмент - Variants (Варианты). Они позволяют хранить все состояния одного компонента в одном месте, что невероятно удобно для дизайнеров и разработчиков.

Создайте главный компанент

Выделите вашу кнопку с Auto Layout.
Нажмите на иконку с четырьмя ромбами в верхней панели или используйте горячую клавишу Ctrl или Cmd + Alt + K.
Слой на панели слева получит значок ромба. Это значит, что вы создали Главный Компонент - источник истины для всех его копий (экземпляров).

Создайте Варианты

Выделите ваш главный компонент. На правой панели, в разделе Component, нажмите кнопку «+» рядом с Variants.
Figma создаст второй, идентичный вариант вашей кнопки. Они будут объединены в один компонент с вкладками вверху.

Настройте вариации

Теперь мы превратим эти два одинаковых варианта в разные состояния.
Вариант 1: Оставьте как есть. Это состояние Default (по умолчанию). В разделе Variant на панели справа вы можете дать ему свойства. Установите Property = State, Value = Default.
Вариант 2: Измените его внешний вид. Например, сделайте заливку темнее (для состояния наведения Hover). В разделе Variant установите Property = State, Value = Hover.

Использование вариаций

Теперь, чтобы использовать вашу "умную" кнопку, перетащите главный компонент из вкладки «Assets» (Активы) на левой панели на ваш холст.
Выбрав этот экземпляр на холсте, на правой панели в разделе Instance вы увидите выпадающий список State, где можно выбрать Default или Hover. Меняя состояние в этом списке, вы будете применять разные варианты к одной и той же кнопке.

Создание кнопки с иконкой

Визуальная коммуникация - это не только текст, но и образы. Иконка способна мгновенно донести смысл кнопки, сделать интерфейс более дружелюбным и удобным для сканирования. Однако добавление нового визуального элемента требует правильной интеграции в существующую структуру.

В данном разделе мы на практике закрепим наши знания об Auto Layout, добавив иконку к нашей текстовой кнопке. Вы увидите, как вся мощь этой технологии проявляется при необходимости организовать несколько разнородных объектов в стройный и адаптивный ряд, где расстояния фиксированы, а выравнивание безупречно.

Иконки усиливают сообщение кнопки, делают его более интуитивно понятным и визуально привлекательным. Добавление иконки - отличный способ проверить, насколько хорошо вы освоили Auto Layout. Вернитесь к вашему главному компоненту кнопки (или создайте новую с Auto Layout).

Добавьте иконку:

Вы можете нарисовать простую иконку самостоятельно (например, стрелку с помощью инструмента Pen) или воспользоваться одной из бесплатных библиотек плагинов (через Resources -> Plugins).
Допустим, вы добавили иконку стрелки справа от текста.

Настройте Auto Layout:

Теперь внутри вашего Auto Layout лежат три слоя: иконка, текст, иконка. Выделите их все.
Примените Auto Layout, если он еще не применен (Shift + A).
На правой панели в настройках Auto Layout задайте Spacing between items (Расстояние между элементами). Например, 8 или 12 пикселей. Вы сразу увидите, как элементы раздвинулись.
Не забудьте про Padding (отступы), чтобы у кнопки были внутренние поля.
Убедитесь, что выравнивание по вертикали стоит Center.

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

Вывод

Создание кнопки в Figma - это многоэтапный процесс, который проходит путь от простого графического примитива до сложного, интерактивного и адаптивного компонента дизайн-системы. Освоение каждого этапа критически важно для формирования компетенций современного продуктового дизайнера. Для систематизации информации мы подготовили таблицу:

Этап	Ключевой инструмент	Основная цель	Результат
Базовое создание	Rectangle, Text	Создать статичный, визуально правильный элемент.	Простая кнопка с текстом.
Добавление адаптивности	Auto Layout	Научить кнопку подстраиваться под длину текста.	Гибкий элемент с автоматическими размерами.
Описание интерактивности	Components & Variants	Показать различные состояния (hover, pressed).	Библиотека всех возможных состояний кнопки.
Усложнение структуры	Auto Layout для нескольких элементов	Грамотно добавить иконку в состав кнопки.	Комплексный, семантически насыщенный компонент.

Помните, что качественно созданная кнопка - это не просто объект на холсте, это основа вашей будущей дизайн-системы. Подход, основанный на Auto Layout и Variants, обеспечивает невероятную скорость работы, легкое внесение изменений и бесшовную передачу макетов разработчикам. Начните с малого, отработайте каждый этап, и вы получите навык, который позволит вам уверенно создавать любые другие компоненты интерфейса.