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

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

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

Пошаговая инструкция как сделать простые и красивые кнопки в Фигма. Будем использовать всего 2 инструмента (прямоугольник и текст), затем добавим функцию Auto Layout, чтобы кнопками было удобней пользоваться.

Видео урок «Как сделать кнопку в Figma»

Пошаговая инструкция по созданию кнопки в Figma

1. Создайте прямоугольник с помощью инструмента «Rectangle». Он находится в верхней панели инструментов.

2. Измените цвет прямоугольника. Например можно использовать желтый цвет. В правой панели впишите FDD84C.

Цвет кнопки в фигме

Подходящие, контрастные и красивые цвета цвета для кнопок. FF2A54 — розовый цвет, 226CE6 — синий цвет. Смотрятся отлично, а главное их заметят посетители сайта (если фон вокруг кнопки будет контрастным).

Цвет кнопок в фигме, желтый, розовый, синий.

3. Чтобы задать скругление сверху измените параметр (к примеру на 4). На мой взгляд скругленные кнопки смотрятся лучше.

Скругление кнопок в figma

4. Поверх кнопки напишите текст, для примера «Купить сейчас».

Текст поверх кнопки в figma

5. Для удобства можно добавить функцию «Auto Layout». При изменении текста это позволит изменять размеры кнопки автоматически.

«Auto Layout» в кнопках в фигме

Для примера изменим текст кнопки на «Заказать». Отступы слева и справа будут меняться. Кнопка увеличивается или уменьшается и вам не нужно делать лишних телодвижений.

Как делать объемные кнопки в Фигма

Как сделать объемные кнопки в фигме
Объемные кнопки в figma


Чтобы сделать объемную кнопку в фигме напротив надписи «Effects» нажмите плюсик. Затем перейдите в расширенные настройки эффекта «Drop shadow».

Поставьте следующие параметры. X — 0, Blur — 0, Y — 3. Цвет можно сделать чуть темнее, чем сама кнопка. Например BB9E31.

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

Если хотите узнать как создать дизайн сайта Landing Page с нуля с помощью готовых материалов (Wireframe), то перейдите по ссылке и скачайте бесплатный комплект из 24 разделов для дизайна сайта (Landing Page). Также я подготовил специальный видео урок. С его помощью вы узнаете как сделать дизайн за 60 минут. Там есть не только кнопки, но и готовые разделы сайта, которые удобно использовать.

Больше полезных материалов и уроков по Figma смотрите в плейлисте на канале YouTube.

Вступайте в наше сообщество вконтакте.

Теги

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *