Как приручить иконки в дизайн системе и не только?

В этой статье: как быстро и понятно передавать смысл через иконки, как настроить оптическую компенсацию и как организовывать иконки в Figma.

Среднее время прочтения ≈ 8 мин

—————

Иконки помогают пользователю быстро считывать смысл — быстрее, чем через текст. Главная задача иконки — быть понятной.

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

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

Иконка — это в первую очередь помощник для пользователя, а не украшение. Если нужно выбрать между «сделать удобно» или «сделать красиво», лучше ориентироваться на удобство. Эстетику можно добавить другими элементами дизайна.

Дальше поговорим об оптической компенсации, но уже при использовании фреймов одинакового размера у вас появится понятная система правил. Это ускорит работу и сделает дизайн более целостным.

Объедините все векторные части в одну и переименуйте ее в Vector. Это необходимо, чтобы при замене иконки у нее не ломался цвет.

—————

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

1. Одинаковая толщина линий. Иконки должны иметь одинаковую толщину линий или хотя бы быть из одного пака. По опыту, легче найти подходящий пак или «скрестить» две иконки для получения желаемой, чем пытаться кастомизировать иконку из другого набора.

2. Проверяйте контраст. Проверьте контраст между цветами иконок и фоном (bg). Самый простой способ сделать это — здесь.

3. Контраст форм. Все видели картинку, где круг рядом с квадратом визуально кажется меньше.

Чтобы не заморачиваться с иконками, запомните отступы для разных типов фигур (для самых ленивых создал файлик, заберите отступы тут).

Если объект сложный, используйте круг — не страшно, если какие-то части будут выступать. Это всего лишь небольшая подсказка, а не жесткое правило.

—————

Лучше вынести иконки на отдельную страницу или даже в отдельный файл, если их много. Кажется мелочью, но если потом всё переделывать — будет треш. Меня на эту статью и натолкнул подобный случай.

Определите для иконок единую сетку и размер. Если непонятно, что выбрать — берите 24×24 и учитывайте визуальную компенсацию из предыдущего пункта. В 95% случаев этого достаточно. Например, Material Icons используют похожий принцип.

—————

Плюсы: поиск по имени и превью при выборе.

Минусы: если у вас много разных файлов, то в поиске по названию можно запутаться.

Используйте в названии слэш «Icons / *name*», чтобы иконки группировались в одной папке. Можно положить в секцию, но нужно минимум две секции — тогда иконки разделятся по папкам/категориям.

Можно сделать «суперкомпонент» со всеми иконками — нажать “Combine as variants”. Подходит, если иконок мало: легко менять одну на другую. Но без превью будет сложно, когда иконок станет много. И правильный нейминг игнорировать не выйдет.

Плюсы: есть готовые наборы (например, SF Symbols), которые четко соответствуют гайдлайнам. Можно перевести и собственные иконки в шрифт — это удобно для передачи разработчикам.

Минусы: сложно обновлять и поддерживать. Не быстренько поправил компонент — надо пересобирать весь шрифт

Скачайте иконки, преобразуйте их в .png (Cmd+Shift+C, чтобы скопировать как .png) и добавьте их в стили. Теперь у вас есть иконки в стилях.

Плюсы: вариант подходит для очень кастомных иконок (с тенями, 3D).

Минусы: если использовать так обычные иконки, то с вами перестанут общаться.

Кстати, недавно писал пост о сравнении стилей и переменных в своем тг — заходите, там тоже полезно.

—————

Под конец — сравнение иконки «папки» в нескольких крупных дизайн-системах:

Стандартная иконка 24 px, оптическая компенсация, деление по стилю (заливка, скругления, цвета).

Иконки от 16 до 48 px, два варианта — с заливкой и без.

Иконки по 20 px; деление на Desktop и Mobile (для мобилок — иконка чуть больше).

сего две иконки папки по 24 px, также два варианта по заливке.

аБазовый размер 24 px, существует разделение по заливке: Outlined, Filled и TwoToned.

Вывод: оптимально использовать 24 px, делить иконки на Outlined и Filled. А правила компенсации применяйте, но не зацикливайтесь.

—————

Чаще, чем на VC, я пишу в телеграме. Заходите в гости.