Обложка
Обложка

Знаком ли вам случай, когда дизайнеры используют не совсем те иконки, которые вам хотелось бы? В одной части интерфейса, к примеру, могут использоваться только иконки типа stroke, в другой части — типа fill. В компоненте chip могут использоваться иконки размером 16px, а в кнопках — 24px и т. п. Но написать в мануале об этом будет недостаточно: кто-то не прочитает, кто-то забудет. Но что, если бы можно было ограничить их использование свойствами компонента? Такой способ есть. Давайте расскажу, как это сделать.

Предупреждение

Данный метод имеет несколько нюансов:

  • Новые иконки в компоненты подшиваются за доли минуты;

  • При необходимости можно указать, какой тип иконки можно использовать, а также её размер;

  • В любом месте системы можно указать возможность смены типа иконки или её размер;

И как сделать такой функционал?

Данный функционал отлично работает, даже если иконки хранятся в отдельном файле от библиотеки. Но сначала давайте выясним.

Что мы хотим получить?

На примере ситуации: «Я как дизайнер хочу, чтобы в кнопке была возможность выбрать только иконки 24-го размера и типа stroke». Следовательно, требования к функционалу следующие:

  1. Тип иконки должен быть stroke;

  2. Размер — 24px;

  3. Иконки должны быть заменяемыми и выведены в правый бар компонента.

Как сделать?

  1. Разбиваем все иконки на категории, папки и т. п. Например, icon/24/fill/ok и icon/24/stroke/ok. В итоге получается раздел icon, в котором лежит размер 24, а уже в нём лежат две папки, и в каждой папке свой тип иконок.

    Пример двух типов иконок
    Пример двух типов иконок
  2. Создаём компонент stroke/itemIcon_24 и кладём внутрь соответствующую иконку типа stroke (нейминг и структура могут отличаться).

    Пример собранной иконки
    Пример собранной иконки
  3. У данного компонента создаём функцию swap и подшиваем все иконки данного типа (stroke) из соответствующей папки (24px).

    Внедрение функции swap
    Внедрение функции swap
  4. Инстанс созданного компонента размещаем в кнопке. Кнопку делаем компонентом и выводим функционал itemIcon_24 на верхний уровень.

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

Если же требуется сделать в кнопке возможность смены типа иконки с stroke на fill, то создаем по этой же инструкции fill/itemIcon_24 и далее в самой кнопке с помощью функции swap создаем возможность сменить тип иконки в самой кнопке. 


Итог

Вот таким простым способом мы получаем возможность ограничить дизайнеров в использовании компонента для соблюдения консистентности. А это, как мы отлично знаем, очень важно для продукта и его визуального представления. Да, мелочь, скажете вы, но отношение пользователя к продукту создаётся из мелочей. С помощью функции swap можно задавать как возможности, так и ограничения — всё зависит от вашего воображения и желания.


? Подписывайтесь, чтобы узнать то, чего не знают другие! Уникальные инсайты и редкие темы для вашего роста и вдохновения! ?

Telegram канал   |   Хабр   |  vc.ru

Комментарии (1)


  1. datacompboy
    17.09.2024 08:51
    +1

    Спасибо ИИ за то, что теперь может укачать при прокручивании ленты от КДПВ.