Пошаговая инструкция как сделать простые и красивые кнопки в Фигма. Будем использовать всего 2 инструмента (прямоугольник и текст), затем добавим функцию Auto Layout, чтобы кнопками было удобней пользоваться.
Пошаговая инструкция по созданию кнопки в Figma
1. Создайте прямоугольник с помощью инструмента «Rectangle». Он находится в верхней панели инструментов.
![](https://web-design.center/wp-content/uploads/2021/01/knopka-v-figma-rectangle.jpg)
2. Измените цвет прямоугольника. Например можно использовать желтый цвет. В правой панели впишите FDD84C.
![Цвет кнопки в фигме](https://web-design.center/wp-content/uploads/2021/01/knopka-v-figma-color.jpg)
Подходящие, контрастные и красивые цвета цвета для кнопок. FF2A54 — розовый цвет, 226CE6 — синий цвет. Смотрятся отлично, а главное их заметят посетители сайта (если фон вокруг кнопки будет контрастным).
![Цвет кнопок в фигме, желтый, розовый, синий.](https://web-design.center/wp-content/uploads/2021/01/color-button-figma-1024x599.jpg)
3. Чтобы задать скругление сверху измените параметр (к примеру на 4). На мой взгляд скругленные кнопки смотрятся лучше.
![Скругление кнопок в figma](https://web-design.center/wp-content/uploads/2021/01/knopka-v-figma-round.jpg)
4. Поверх кнопки напишите текст, для примера «Купить сейчас».
![Текст поверх кнопки в figma](https://web-design.center/wp-content/uploads/2021/01/knopka-v-figma-text.jpg)
5. Для удобства можно добавить функцию «Auto Layout». При изменении текста это позволит изменять размеры кнопки автоматически.
![«Auto Layout» в кнопках в фигме](https://web-design.center/wp-content/uploads/2021/01/knopka-v-figma-auto-layout.jpg)
Для примера изменим текст кнопки на «Заказать». Отступы слева и справа будут меняться. Кнопка увеличивается или уменьшается и вам не нужно делать лишних телодвижений.
![](https://web-design.center/wp-content/uploads/2021/01/knopka-v-figma-auto-layout-exsample.jpg)
Как делать объемные кнопки в Фигма
![Как сделать объемные кнопки в фигме](https://web-design.center/wp-content/uploads/2021/01/knopka-v-figma-obiem.jpg)
Чтобы сделать объемную кнопку в фигме напротив надписи «Effects» нажмите плюсик. Затем перейдите в расширенные настройки эффекта «Drop shadow».
Поставьте следующие параметры. X — 0, Blur — 0, Y — 3. Цвет можно сделать чуть темнее, чем сама кнопка. Например BB9E31.
В дальнейшем можно создать целую дизайн систему, чтобы не создавать одни и те же элементы снова. Также можно пользоваться готовыми решениями, которые создают другие люди.
Если хотите узнать как создать дизайн сайта Landing Page с нуля с помощью готовых материалов (Wireframe), то перейдите по ссылке и скачайте бесплатный комплект из 24 разделов для дизайна сайта (Landing Page). Также я подготовил специальный видео урок. С его помощью вы узнаете как сделать дизайн за 60 минут. Там есть не только кнопки, но и готовые разделы сайта, которые удобно использовать.
Больше полезных материалов и уроков по Figma смотрите в плейлисте на канале YouTube.
Вступайте в наше сообщество вконтакте.
![Дизайн генератор — комплект figma](https://web-design.center/wp-content/uploads/2021/09/banner-design-generator.png)
P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).