Дизайн-система в Figma. Часть 2: Кнопки
Продолжаем проектировать нашу дизайн-систему. В прошлой статье мы задали основные стили для текста, цветовую гамму нашего проекта, стили теней, а также создали компонент для плашек. Теперь пришло время поговорить о кнопках.
Проектируя кнопки, следует учесть, что они могут иметь несколько состояний:
- Кнопка в спокойном состоянии,
- Кнопка при наведении,
- Кнопка, подсвеченная при навигации по странице при помощи таба,
- И неактивная кнопка.
Все эти состояния нам необходимо прорисовать.
Мне известны 2 основных способа создания кнопок: кнопки с использованием Auto Layout (масштабируются вместе с текстом внутри) и кнопки с оцентрированным текстом (такую кнопку можно масштабировать, текст при этом всегда будет по центру). В разных ситуациях удобны разные варианты кнопок.
Базовый (родительский) компонент кнопки с использованием Auto Layout
Создайте прямоугольник. Задайте ему необходимый размер и степень скругления углов. Выберите цвет — цвета используйте обязательно из нашей палитры, которую мы создавали в предыдущей статье. В моем примере это будет синий цвет. Если необходимого цвета нет, создайте для него новый стиль. Это позволит в дальнейшем легко менять цветовую гамму всего проекта.
Выберите Text Tool (T) и напишите название кнопки. Задайте стиль текста, который вы определили специально для кнопок (см. предыдущую статью).
Нажмите на иконку с тремя точками в правой панели. Установите настройки, как показано на рисунке. Теперь рамка текста будет масштабироваться вместе с самим текстом по мере набора фразы.
После этого выровняйте слой с текстом по центру относительно нашего прямоугольника. Для этого выделите оба слоя и последовательно нажмите две иконки вверху в правой панели:
Далее нужно выделить оба слоя и в правой панели нажать на создание компонента. Не забудьте дать компоненту членораздельное имя.
Не снимая выделения, в правой панели ищем вкладку Auto Layout и нажимаем плюсик. Теперь, если мы захотим отредактировать текст на кнопке, размер кнопки изменится вместе с этим текстом.
Изменяя два правых параметра на вкладке Auto Layout, можно добиться нужного нам размера отступов по вертикали и горизонтали от границ текста.
Расширяем функционал кнопки
Мы также можем расширить функционал нашего компонента, например, добавить в кнопку иконку каталога или корзины, которые можно будет скрывать или показывать при необходимости.
Рисуем необходимые иконки, задаем им цвет из палитры. запаковываем в компоненты.
Внимание: важно, чтобы размеры компонентов иконок были одинаковыми. В моем случае для кнопок это поле 20x20 пикселей. Иконка внутри необязательно должна занимать все это поле, но сами компоненты должны быть идентичны по размеру.
Сгруппируйте все эти иконки у одну группу и назовите ее членораздельным именем. Чуть позже это нам пригодится.
Теперь копируем одну из иконок (Contrl+d или Comand+d) и помещаем ее внутрь компонента с нашей кнопкой перед текстом).
Остальные иконки пока не трогаем. В конце статьи я покажу, как можно очень быстро манипулировать кнопками.
Теперь нужно на палитре слоев скрыть эту иконку, чтобы наша базовая кнопка была без нее, но при этом иконку всегда можно было отобразить в процессе работы с экземплярами компонента.
Другие состояния кнопки
Наведение
Итак, наш базовый компонент готов. Теперь перейдем к различным состояниям нашей кнопки.
Копируем экземпляр компонента базовой кнопки (Contrl+d или Comand+d). Не снимая выделения с компонента, задаем параметры оформления для этого состояния кнопки: можно поменять, цвет, обводку или даже добавить тень (не забудьте предварительно задать стиль для тени). Можно выделить внутри слой самого текста и поменять его параметры (к, примеру, цвет).
В моем случае было достаточно поменять стиль цвета кнопки, сделать ее немного темнее.
После этого выделяем экземпляр кнопки и снова запаковываем ее в компонент, не забываем дать имя компоненту. Таким образом мы создали компонент, который унаследовал компонент базовой кнопки. Теперь, если мы что-либо поменяем в базовой кнопке (кроме цвета, который мы переопределили, это тут же отразится на состоянии всех других, созданных таким же образом кнопок.
Активность по табу
Вновь создаем экземпляр нашей базовой кнопки.
Придаем кнопке нужный стиль. Я решила, что активные по табу кнопки у меня будут подсвечиваться синим цветом. Как создавать стиль для теней и подсветок я рассказывала в предыдущей статье.
Неактивная кнопка
Для кнопок, на которые еще нельзя нажать (например, не введен код, не заполнены все поля и т.д.), создадим еще один компонент.
Я решила, что такая кнопка будет иметь полупрозрачный фон, чтобы интереснее смотреться не только на белом, но и на на каком-либо неоднородном цветном фоне. Для этого мне пришлось создать новый стиль заливки цвета с прозрачностью в 15%. Также я понизила прозрачность текстового слоя внутри кнопки до 50%. И точно также, как и предыдущие состояния кнопки, запаковала все в новый компонент.
Масштабируемые кнопки
Бывают ситуации, когда необходимо очень четко вписать кнопку в сетку, либо сделать кнопку огромной — по ширине всего контента. В таких случаях Auto Layout не подойдет. Рассмотрим еще один способ создания кнопок.
Начинаем так же, как в предыдущем варианте: создаем прямоугольник, текстовый слой, центрируем их и создаем компонент.
Для текстового слоя задаем Constraints: Center, Center:
Если вы также хотите добавить в такие кнопки иконки, то текст и иконка группируются и на группу настраивается Auto Layout. Сама же группа центрируется при помощи Constraints.
Constraints для фонового прямоугольника: Left+Right, Top+Bottom
Состояния масштабируемой кнопки: Дублируем экземпляр компонента масштабируемой кнопки, настраиваем внешний вид. Запаковываем его в новый компонент с настройками Constraints : Left+Right, Top+Bottom.
Auto Layout в данном случае уже не используется.
Кнопки могут состоять не только из прямоугольника и текста. Очень интересно смотрятся разного рода кнопки, построенные шейпах с различными настройками Constraints или Auto Layout:
Итог
Таким же образом можно создать варианты кнопок другого цвета, кнопки с обводкой и т.д. Главное, все варианты наследовать от одной базовой кнопки, которая будет задавать основные свойства кнопок.
В итоге для своей системы я продумала несколько вариаций кнопок и их состояний. За счет наследования мы можем легко управлять всеми кнопками сразу:
А так можно быстро менять варианты кнопок прямо в макете, отображать дополнительную иконку, которую мы предусмотрели в базовом компоненте, менять ее:
П.С. Наводим порядок
Век живи — век учись! Ввожу некоторые корректировки в нашу систему по прошествии какого то времени.
Если задать грамотные имена нашим кнопкам и иконкам с использованием знака «/», то они сгруппируются на панели компонентов и при выборе instance:
Кстати, чтобы быстро переименовать группу слоев, выделите их и нажмите правую кнопку мыши. в появившемся меню выберите Rename:
Далее в появившемся окне в поле «Rename to» впишите правила переименовывания. Например, выражение «icon/$&» добавит к текущим именам иконок префикс «icon/».
Кнопки под полем «Rename to» подскажут, как построить нужное вам выражение:
После того: как вы переименуете кнопки и в левой панели перейдете со вкладки Laere на вкладку Assets, вы увидите, что все кнопки сгруппировались в одну вкладку Button:
при этом если вам надо заменить одну кнопку на другую, то при изменении Instance компоненты кнопок также сгруппируются:
Задавайте вопросы, делитесь своими идеями и мнениями в комментариях. А если статья была вам полезна, поддержите клапсом 👏 (кстати, клапснуть можно до 50 раз).
Предыдущие статьи:
Продолжение:
Behance — мои лучшие работы
Telegram-канал — публикую, заметки и мысли о своей работе, figma, портфолио, дизайн-системах, автоматизации задач и ускорении работы. Делюсь ссылками, крутыми кейсами.
