Ограничения в использовании иконок в Figma
Знаком ли вам случай, когда дизайнеры используют не совсем те иконки, которые вам хотелось бы? В одной части интерфейса, к примеру, могут использоваться только иконки типа stroke, в другой части — типа fill. В компоненте chip могут использоваться иконки размером 16px, а в кнопках — 24px и т. п. Но написать в мануале об этом будет недостаточно: кто-то не прочитает, кто-то забудет. Но что, если бы можно было ограничить их использование свойствами компонента? Такой способ есть. Давайте расскажу, как это сделать.
Предупреждение
Данный метод имеет несколько нюансов:
- Новые иконки в компоненты подшиваются за доли минуты;
- При необходимости можно указать, какой тип иконки можно использовать, а также её размер;
- В любом месте системы можно указать возможность смены типа иконки или её размер;
И как сделать такой функционал?
Данный функционал отлично работает, даже если иконки хранятся в отдельном файле от библиотеки. Но сначала давайте выясним.
Что мы хотим получить?
На примере ситуации: «Я как дизайнер хочу, чтобы в кнопке была возможность выбрать только иконки 24-го размера и типа stroke». Следовательно, требования к функционалу следующие:
- Тип иконки должен быть stroke;
- Размер — 24px;
- Иконки должны быть заменяемыми и выведены в правый бар компонента.
Как сделать?
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 можно задавать как возможности, так и ограничения — всё зависит от вашего воображения и желания.
🚀 Подписывайтесь, чтобы узнать то, чего не знают другие! Уникальные инсайты и редкие темы для вашего роста и вдохновения! 💡