Библиотека иконок дизайн-системы в Figma

Тема казалась мне слишком очевидной, но наткнулся на несколько статей на Хабре, где советовали складывать все иконки в один мастер-компонент через варианты. Более того, на мой комментарий в духе «Вы что творите?» откликнулась целая армия защитников такого подхода. Особенно впечатлил аргумент: «...особенно удобно в больших дизайн-системах...»🤦‍♂️

Ну… кажется, автор этого комментария не работал с по-настоящему большой системой. Хотелось бы взглянуть на 1000+ иконок, организованных таким образом, да ещё и с разными размерами и стилями начертания.

Если у вас тоже закралась мысль сложить все иконки в варианты — не надо так!

Первая и главная проблема в том, что такие иконки нельзя будет нормально искать при замене. Когда их становится много, а дизайнеров хотя бы 3–5 в команде, поиск превращается в бесконечный скролл вариантов. В случае же отдельных мастер-компонентов можно искать иконки не только по названию, но и по описанию (description), добавляя туда ключевые слова, в том числе на русском, что сильно облегчает навигацию.

Выбор иконок через панель свойств можно настроить через swap instance, вынеся пропсу в свойства компонента и привязав её к нужному элементу. Варианты уместны, но только в рамках одной иконки — например, для размеров, начертаний контуром или с заливкой. При этом важно, чтобы единообразие сохранялось для всех иконок библиотеки. Но объединять разные иконки в один компонент с вариантами — плохая идея.

🛫 Канал: UXFLOW • Сергей Мухин Сайт: uxflow.ru