Как создать кнопку в Figma

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

В этой статье объясняется, как создавать кнопки и как максимально эффективно использовать Figma.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

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

Вот пошаговое руководство по созданию кнопок:

Создайте новый дизайн Figma.
Добавьте кадр, нажав клавишу F на клавиатуре, затем выберите «Рабочий стол» или «Телефон».
Добавьте прямоугольник высотой 50 пикселей и шириной 200 пикселей, используя клавишу R на клавиатуре.
Добавьте текст, нажав «T» на клавиатуре. Отцентрируйте текст так, чтобы он находился в середине текстового поля по горизонтали и вертикали.
Поместите это текстовое поле в середину прямоугольника.
Сгруппируйте компоненты так, как вы хотите.

Вы можете добавить цвета, создав их с помощью палитры цветов, или получить доступ к шестнадцатеричным цветам из Интернета.

Контраст

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

Создание основных кнопок

В Figma можно создать три основные кнопки.

Основная кнопка

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

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

Вторичная кнопка

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

Измените цвет прямоугольника на белый (#FFFFFF).
В прямоугольнике добавьте обводку. Здесь вы можете выбрать цвет, который вам нравится.
Измените цвет текста, чтобы он имел тот же цвет, что и текст.

Третичная кнопка

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

Сделайте прямоугольник белым без обводки.
Измените цвет текста на тот, который вы предпочитаете.

Вы можете создать третью кнопку, напоминающую основную или дополнительную кнопку. Вы также можете изменить ширину обводки, чтобы улучшить видимость.

Создайте кнопку, используя текст, автоматический макет и цвет

Благодаря инструментам платформы вы можете получить практический опыт использования Auto Layout и Text Tool. Благодаря пошаговым инструкциям создание кнопки должно быть относительно простым. Чтобы создать кнопку, вам необходимо создать текстовый слой, преобразовать текстовый слой во фрейм с автоматическим макетом и стилизовать кнопку.

Создание текстового слоя

На этом этапе используется текстовый инструмент.

Коснитесь текстового инструмента на панели инструментов или нажмите букву «T».
Когда инструмент «Текст» активен, коснитесь холста и введите слово «Кнопка». Обратите внимание, что имя текстового слоя будет соответствовать тому, что напечатано на холсте, если оно не изменено вручную на панели слоев.
Если имя слоя необходимо изменить, дважды щелкните левую боковую панель, а затем введите новое выбранное имя.

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

Выберите текстовый слой.
Перейдите на правую боковую панель и измените размер шрифта в разделе «Текст». Вы также можете изменить шрифт или оставить вариант по умолчанию.

Преобразуйте текстовый слой во фреймы с автоматическим макетом

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

Автоматический макет можно применять для преобразования слоев в кадры или в существующие кадры. Чтобы применить макет к существующему фрейму, выберите текстовый слой, затем нажмите сочетание клавиш «Shift» «A». После применения макета вы заметите некоторые изменения.

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

Стилизация кнопки

Вы можете начать с добавления цвета.

Выберите слой рамки, затем выберите «Настройки заливки» на правой боковой панели. Это заполняет цвет
автоматически. Палитра цветов меняет цвет.
Выберите текстовый слой и настройте заливку на #FFFFFF.
Снова выберите рамку, затем используйте настройку правой боковой панели, чтобы отрегулировать радиус угла.

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

Вы можете обновить отступы по своему усмотрению. Левое и правое отступы или верхнее и нижнее отступы можно изменить одновременно с помощью ярлыков ниже:

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

На этом этапе кнопка выглядит хорошо, но вы все равно можете обновить метку. Вам нужно дважды щелкнуть текст, чтобы разрешить редактирование. Введите слова «Зарегистрироваться». Размер кнопки изменяется по мере ввода. Вот как можно создать кнопку с помощью инструмента автоматического макета и текста. Теперь вы можете попробовать что-то новое, например превратить кнопку в компонент или добавить вариант.

Создание кликабельной кнопки

Figma используется такими компаниями, как Uber, Facebook, Google и Netflix. Функция интерактивных кнопок облегчает дизайнерам таких компаний создание интерактивных и кликабельных кнопок. Кнопки значительно упрощают навигацию на таких платформах.

Вот как разработать такие кнопки в Figma:

Выберите опцию «Прототип» в меню (справа).
Нажмите значок «Плюс» (+), расположенный под вкладкой «Прототип». Это позволяет вам добавить взаимодействие.
Выберите «По клику» в окне сведений о взаимодействии.
Выберите опцию «Открыть ссылку».
Добавьте ссылку на страницу, на которую будет направлять кнопка после нажатия.
Коснитесь значка «X», чтобы выйти из окна сведений о взаимодействии.
Перейдите к кнопке «Играть» в правом верхнем углу.
Нажмите кнопку «Воспроизвести», чтобы получить предварительный просмотр дизайна.

Если вы наведете курсор на кнопку, она изменится на значок в виде руки. Это означает, что кнопка теперь доступна для нажатия.

Примечание. При создании интерактивной кнопки Figma всегда используйте «При нажатии», а не «При перетаскивании». «По клику» позволяет добавить к кнопке кликабельную ссылку. Кнопки «При перетаскивании» нажимать нельзя.

Дизайн лучше с кнопками Figma

Кнопки Figma имеют такие переменные, как тема, состояние, внутренние отступы, длина, ширина и высота таблицы. Научившись создавать кнопки на платформе, вы сможете максимально эффективно использовать Figma и добавлять полезные компоненты в библиотеку Figma.

Вы пробовали создавать кнопки в Figma? Если да, то каков был ваш опыт? Дайте нам знать в разделе комментариев ниже.

Как создать кнопку в Figma