Ограничения в использовании иконок в Figma

Знаком ли вам случай, когда дизайнеры используют не совсем те иконки, которые вам хотелось бы? В одной части интерфейса, к примеру, могут использоваться только иконки типа 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).

   

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

   

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

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

Итог

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

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

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