{"id":13799,"url":"\/distributions\/13799\/click?bit=1&hash=865a89ddf5e1b9e468c75aafc8397c3511c1f5c9a63c9b3d346956d539f26271","title":"\u042d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u043f\u0440\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430 \u00ab\u041c\u0430\u0440\u043a\u0435\u0442\u0435\u00bb ","buttonText":" \u041a\u0430\u043a?","imageUuid":"f7affe9f-a742-5820-ac81-04ba4a1a8f84","isPaidAndBannersEnabled":false}

Figma Starter Kit: как дизайнеру работать быстрее (часть 2. Кнопки)

Привет друг!
Я закончил работу над большим проектом, поэтому снова готов уделять время статьям и обучению. Во время столь длительного отсутствия я составил большой список полезных материалов, которыми обязательно поделюсь с тобой позже, поэтому не забудь подписаться. 😉
Ладно, давай ближе к делу!
Прошлый раз мы начали формировать Starter-kit, который сбережет твоё время при создании однотипных элементов в дизайне. Если ты не читал первую статью, то обязательно ознакомься: Figma Starter Kit: (pt.1)

Кнопки

Трудно представить web или mobile дизайн без кнопок. Мне кажется, это один из самых основных элементов интерфейса, именно поэтому речь сегодня пойдет об их создании. Давай я немного расскажу о типах кнопок и правилах их создания, а ниже приложу макет с уже готовыми.

1. Типы кнопок

Существует огромное количество типов кнопок и вариаций расположения контента в них, но для нашей цели я хочу выделить 3 основных типа:

  • Текстовая кнопка
  • Иконка + текст (Иконка может располагаться слева от текста или справа)
  • Кнопка — иконка

2. Анатомия кнопки

Основные элементы, из которых состоит кнопка:

  • Текст
  • Заливка (бэкграунд)
  • Обводка
  • Иконка

3. Состояние кнопки

Для себя я выделаю 4 основных состояния, в которых может пребывать кнопка:

  • Normal — стандартное состояние кнопки, на которую не оказывается никакого взаимодействия
  • Hover — это промежуточное состояние при наведении курсора на кнопку
  • Pressed — состояние нажатой кнопки
  • Disabled — неактивное состояние

Я бы настоятельно рекомендовал не лениться и сделать набор из всех четырех состояний. Когда мы дизайним большой сайт или веб-сервис, то тратим огромное количество времени на рисование кнопок в разных состояниях, а могли бы потратить его на что-то действительно интересное.

Цвета

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

  • Primary
  • Danger
  • Warning
  • Info
  • Success

Домашнее задание

Ниже я приложу небольшой Figma-исходник, в котором будет лежать небольшой набор кнопок. Но они будут в одном размере — Big, твоя задача сделать этот набор в двух размерах: Medium, Small. И в следующей статье ты сверишь свой получившийся набор с моим.
Figma- исходник

Забегай в мой Telegram

Предыдущая статья- Figma Starter Kit: (pt.1)

0
4 комментария
Pontus_Frykter

Дабы эта кнопка была выключена, у белого цвета нужно поставить 50% заливки. У вас же это просто кнопка. Серая, но просто кнопка. Эффект выключенности достигается за счет уменьшения показателя контрастности текста на ней.

Ответить
Развернуть ветку
Макс О дизайне
Автор

Благодарю за верное замечание!

Ответить
Развернуть ветку
Uladzislau Sabbage

Не понял, почему стейты кнопок вы делаете отдельными независимыми компонентами, когда это не что иное как мастер с твиками. И зачем в фигме отдельные слои текста с разным выравниванием, когда это все можно спокойно оверрайдить (но хотя бы 1 стиль, да. в скетче не прокатит так).

Ответить
Развернуть ветку
T K

можно файл пример пжл?

Ответить
Развернуть ветку
Читать все 4 комментария
null