Как создать правильную дизайн-систему для кнопок
Вы когда-нибудь задумывались о том, что стоит за простой кнопкой? Если нет, я покажу вам, как я организовал свою дизайн-систему. Она подходит для всех сайтов и приложений, над которыми я работаю, и, возможно, поможет вам ничего не забыть.
Также в конце этой статьи я оставлю ссылку на файл Figma, чтобы вы могли продублировать ее себе и использовать в своих проектах. В этой дизайн-системе я постарался рассмотреть и разложить по полочкам все варианты использования кнопок.
1. Сортировка по размеру
Начинаю я с разделения кнопок по размеру:
・большие;
・средние;
・маленькие;
・очень маленькие.
У них фиксированная высота, а ширина зависит от содержимого внутри. Для этого конкретного случая я выбрал скругленные углы.
2. Сортировка по типу
Некоторые кнопки должны быть заметными и привлекать внимание пользователя с первого взгляда. Будем называть их основными кнопками или кнопками призыва к действию. У других есть вторичные, третичные и четвертичные функции, поэтому я сделал их менее выделяющимися.
Теперь наша дизайн-система имеет 20 вариантов:
3. Разделение по варианту
Кнопки могут иметь иконки с обеих сторон от от текста. Более того, кнопка не может не иметь текста и состоять только из иконки.
Давайте добавим эти четыре варианта в нашу дизайн-систему! Итак, теперь их 80:
Когда вы используете иконки в кнопках, нужно создать отдельный фрейм/файл для размещения всех используемых иконок.
Хорошо бы сделать отдельные варианты иконок для всех размеров:
・крупные;
・средние;
・маленькие;
・очень маленькие.
И было бы идеально, если бы вы сделали все эти иконки в следующих вариациях:
・монохромные;
・иерархические;
・палитровые;
・многоцветные.
В итоге у вас должна получиться система из 16 вариантов каждой иконки:
После этого сделайте из них компоненты, объедините их в варианты и дайте им имя. Это позволит вам выбрать иконку прямо в компоненте.
4. Разделение по форме
Кнопки могут иметь две формы: прямоугольную и круглую. Иногда вы будете использовать их обе, но я чаще использую только один вариант.
Давайте добавим эти две формы в нашу дизайн-систему и посмотрим, как будут выглядеть эти 160 вариантов.
5. Сортировка по отступам (padding)
По моему опыту, обычные кнопки должны иметь два варианта: с отступами и без (в последнем нужно изменить высоту на значение «Hug»).
Покажу случай, когда нужна обычная кнопка без боковых отступов, чтобы вы понимали, зачем создавать этот вариант.
Давайте добавим этот вариант и посмотрим, как наша дизайн-система расширится до 192 вариантов.
6. Сортировать по состояниям
При создании кнопок для сайта вам нужно сделать пять состояний, а в мобильном приложении — только три. Но давайте сделаем сейчас сделаем выбор в пользу веба, так как ненужное всегда можно удалить.
Теперь наша дизайн-система имеет целых 960 состояний. Впечатляюще, правда?
7. Кнопки для светлой и темной темы
Сегодня все больше и больше сайтов имеют темную тему. Поэтому, если вы создаете один из таких сайтов, вам следует создать отдельные версии для кнопок в темном режиме.
Давайте сделаем цвета этих кнопок светлее, чтобы их было лучше видно на темном фоне.
Вот как будет выглядеть наша окончательная дизайн-система:
Вы можете продублировать эту систему оформления кнопок в виде файла из Figma Community по этой ссылке и использовать в своих проектах. Надеюсь, эта статья помогла вам лучше понять, как последовательно создать собственную дизай-систему для кнопок, не упустив ни одного сценария.
