Кнопки дизайна в Figma можно создавать разными способами, используя свойства компонентов и автоматического макета на платформе. Таким образом, кнопки можно настраивать с помощью меток, размеров и значков. Если вы не знаете, как создавать кнопки на Figma, вы попали по адресу.
В этой статье объясняется, как создавать кнопки и как максимально эффективно использовать Figma.
Создание кнопки
Кнопки — это общие элементы, используемые при разработке функционального пользовательского интерфейса. Вы можете создать кнопку в дизайне Figma. Если вы новичок в Figma, вы должны сначала освоить основы.
Вот пошаговое руководство по созданию кнопок:
- Создайте новый дизайн Figma.
- Добавьте рамку, нажав клавишу F на клавиатуре, затем выберите “рабочий стол” или “телефон”
- Добавьте прямоугольник высотой 50 пикселей и шириной 200 пикселей с помощью клавиши R на клавиатуре.
- Добавьте текст, нажав “T” на вашей клавиатуре. Отцентрируйте текст так, чтобы он находился посередине текстового поля по горизонтали и вертикали.
- Поместите это текстовое поле в середине вашего прямоугольника.
- Группируйте компоненты по своему усмотрению.
Вы Вы можете добавить цвета, создав их с помощью палитры цветов, или вы можете получить доступ к шестнадцатеричным цветам из Интернета.
Контрастность
Цвет текста внутри кнопки зависит от того, на каком фоне он лучше контрастирует: на черном или белом. Вы можете использовать оба варианта, чтобы увидеть, какой из них работает лучше всего. Если вам не нравится какой-либо из вариантов, вы можете настроить стиль и цвет кнопки.
Создание основных кнопок
Есть три основных кнопки, которые можно создать в Figma.
Основная кнопка
Основные кнопки имеют сплошной цвет с черным или белым текстом. Эта кнопка привлекает пользователей, когда они используют приложение. Ее можно создать следующим образом:
- Выберите цвет для кнопки.
- Выберите прямоугольник, затем примените выбранный цвет.
- Цвет текста белым или черным, в зависимости от лучшей контрастности.
Дополнительная кнопка
Обычно это белая кнопка, но обведенная выбранным вами цветом. Текст кнопки также может иметь тот же цвет. Это вторая по важности кнопка, которую вы можете создать. Он также должен привлекать внимание пользователя.
- Измените цвет прямоугольника на белый (#FFFFFF).
- В прямоугольник, добавьте обводку. Здесь вы можете выбрать нужный цвет.
- Измените цвет текста на тот же цвет как текст.
Третичная кнопка
Третичные кнопки не так важны, как первые две. Они могут функционировать как ссылка, отмена подписки или кнопки «Назад». Часто они представляют собой обычный текст и в некоторых случаях могут быть подчеркнуты.
- Сделайте прямоугольник белым без обводки.
- Измените цвет текста на свой любимый.
Вы можете создать третью кнопку, похожую на основную или дополнительную кнопку. Вы также можете изменить ширину обводки, чтобы улучшить видимость.
Создайте кнопку с помощью текста, автоматического макета и цвета
С инструментами на платформе вы можете получить практический опыт использования Auto Layout и Text Tool. С пошаговым руководством создание кнопки должно быть относительно простым. Чтобы создать кнопку, вам нужно создать текстовый слой, преобразовать текстовый слой в рамку автоматического макета и задать стиль для кнопки.
Создание текстового слоя
На этом этапе используется текстовый инструмент.
- Нажатие текстового инструмента на панели инструментов или нажатие буквы “T. ”
- Когда инструмент «Текст» активен, коснитесь холста и введите слово «Кнопка». Обратите внимание, что имя текстового слоя будет соответствовать тому, что напечатано на холсте, если оно не изменено вручную на панели слоев.
- Если нужно изменить имя слоя, дважды щелкните левую боковую панель, затем введите новое выбранное имя.
Теперь вы также можете изменять размер шрифта, увеличивая или уменьшая его.
- Выберите текстовый слой.
- Перейдите к правой боковой панели и измените размер шрифта на “Текст” раздел. Вы также можете изменить шрифт или оставить вариант по умолчанию.
Преобразуйте текстовый слой во фреймы автомакета
На этом этапе кнопку нужно подправить, чтобы она выглядела гламурно. С автоматической компоновкой вы можете немного оживить ситуацию. Автоматическая компоновка — мощная функция Figma, которую можно применять для адаптивного дизайна. Эти дизайны автоматически адаптируются к таким изменениям, как размер содержимого, размещение объектов и тип устройства.
Автоматическую компоновку можно применять для превращения слоев в кадры или к существующим кадрам. Чтобы применить макет к существующему фрейму, выберите текстовый слой и нажмите клавишу “Shift” «А» ярлык. После применения макета вы заметите некоторые изменения.
- Текстовый слой будет внутри фрейма. Автоматическая компоновка применяется только к компонентам и фреймам, поэтому Figma автоматически помещает текстовый слой в новый фрейм. Рамка не имеет цвета заливки. Это применяется на этапе настройки стиля кнопки.
- При выборе фрейма настройки автоматического макета отображаются на правой боковой панели. Автоматические макеты можно дополнительно настроить.
- Вы заметите, что рамка сжимается и увеличивается при изменении текста. Благодаря таким динамическим элементам вы экономите время, затрачиваемое на разработку контента, который просматривается на различных устройствах или переводится на другие языки.
Стиль кнопки
Можно начать с добавления цвета.
- Выберите слой с рамкой, затем выберите “Настройки заливки” в правой боковой панели. Это заполняет цвет
автоматически. Палитра цветов меняет цвет.
- Выберите текстовый слой и настройте заливку на #FFFFFF.
- Снова выберите рамку, затем используйте параметр правой боковой панели, чтобы отрегулировать радиус угла.
Следующее, что нужно сделать, это исправить обивку рамы. После того, как буквенный текст преобразуется в макет с автоматическим фреймом, между текстом и границей фрейма автоматически добавляется отступ. Заполнение в этой точке кажется одинаковым со всех сторон. Вы можете изменить нижнее и верхнее отступы, чтобы они были меньше правого и левого отступов.
Вы можете изменить отступы по своему усмотрению. Левое и правое заполнение или верхнее и нижнее заполнение можно изменить одновременно с помощью приведенных ниже сочетаний клавиш:
- Удерживайте <⌥ Опция> или <Alt>, затем нажмите область отступа, чтобы ввести значение отступа для противоположных сторон.
- Удерживайте <⌥ Опция> или <Alt> при перетаскивании маркеров для изменения отступов для противоположных сторон
На данный момент кнопка выглядит хорошо, но вы все еще можете обновить метку. Вам нужно дважды щелкнуть текст, чтобы разрешить редактирование. Введите слова “Зарегистрироваться” Размер кнопки изменяется по мере ввода. Вот как вы создаете кнопку, используя автоматический макет и текстовый инструмент. Теперь вы можете попробовать что-то новое, например превратить кнопку в компонент или добавить вариант.
Создание кнопки, на которую можно нажать
Figma используется такими компаниями, как Uber, Facebook, Google и Netflix. Функция интерактивных кнопок облегчает дизайнерам в таких компаниях создание интерактивных и интерактивных кнопок. Кнопки значительно упрощают навигацию на таких платформах.
Вот как разработать такие кнопки в Figma:
- Выберите «Прототип» в меню (справа).
- Нажмите “Плюс” Значок (+) находится под вкладкой «Прототип». Это позволяет добавить взаимодействие.
- Выберите “При нажатии” в окне сведений о взаимодействии.
- Выберите ссылку “Открыть” option.
- Добавьте ссылку на страницу, на которую будет вести кнопка после нажатия.
- Нажмите на значок “X” значок , чтобы закрыть окно сведений о взаимодействии.
- Перейдите к “Play” кнопку выбора в правом верхнем углу.
- Нажмите кнопку “Воспроизвести” кнопку для предварительного просмотра дизайна.
Если вы наведете курсор на кнопку, она изменится на значок в виде руки . Это означает, что кнопка теперь активна.
Примечание. При создании кнопки Figma, на которую можно нажать, всегда используйте “По клику” не “На перетаскивании” “По клику” позволяет добавить кликабельную ссылку на кнопку возможно. «На перетаскивании» кнопки нельзя нажимать.
Улучшайте дизайн с помощью кнопок Figma
Кнопки Figma имеют переменные, такие как тема, состояние, внутреннее заполнение, длина таблицы, ширина и высота. Узнав, как создавать кнопки на платформе, вы сможете максимально эффективно использовать Figma и добавлять полезные компоненты в библиотеку Figma.
Вы пробовали создавать кнопки на Figma? Если да, то каким был ваш опыт? Дайте нам знать в разделе комментариев ниже.
