Новая Tesla Model Y
Grok vs ChatGPT vs Claude
Роботы за $40 млрд
Экзоскелет для подъёма в горы
iPhone 17 Air
Apple Event 19.02

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

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

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

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

—————

Пару правил, для начала

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

Используйте одинаковые иконки, если для пользователя цель тождественна.

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

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

Поддерживайте единообразие иконок.

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

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

Выбирайте простые иконки.

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

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

Все иконки помещайте в фрейм, а сам фрейм делайте одного размера.

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

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

В 90% случаев иконкам нужен один цвет.

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

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

—————

Визуальный вес иконок

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

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

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

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

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

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

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

Откройте изображение полностью и полистайте лево-право, чтобы увидеть минимальную, но важную разницу между иконками.
Откройте изображение полностью и полистайте лево-право, чтобы увидеть минимальную, но важную разницу между иконками.
Откройте изображение полностью и полистайте лево-право, чтобы увидеть минимальную, но важную разницу между иконками.
Откройте изображение полностью и полистайте лево-право, чтобы увидеть минимальную, но важную разницу между иконками.

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

—————

Стандартизация и организация иконок в Figma

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

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

—————

Способы добавления иконок

Много компонентов в фрейме

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

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

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

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

В один компонент с выбором вариантов

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

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

Иконки в виде шрифтов

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

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

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

Треш вариант: Иконки в стилях как PNG изображение

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

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

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

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

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

—————

Использование иконок в больших дизайн-системах: Примеры и лучшие практики

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

Material

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

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

Fluent

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

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

Polaris (Shopify)

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

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

Atlassian

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

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

Ant:

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

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

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

—————

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

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

За время своей работы я достаточно изучил Figma, чтобы не только хорошо ей пользоваться и получать результат, но и начать делиться своими знаниями.

Ультимативный гайд по работе в Figma: организация проекта, слои, автолейауты, ограничители, компоненты, варианты и стили. Для новичков, чайников, любителей и профессионалов
1414
11
реклама
разместить
Как нарисовать иконку для сайта и приложений через нейросети для генерации изображений

Как нарисовать иконку для сайта и приложений через нейросети для генерации изображений? Разбираем лучшие способы создания иконок для сайта, приложений и презентаций, рассказываем, где скачать плоские иконки для презентации, и делимся инструментами, которые помогут сделать уникальный дизайн. Узнайте, как быстро и легко создать иконку онлайн или найт…

Как нарисовать иконку для сайта и приложений онлайн? Используйте нейросети с готовыми шаблонами промптов
22
11
5 бесплатных инструментов, которые экономят время веб-дизайнера
5 бесплатных инструментов, которые экономят время веб-дизайнера
11
Переработка навигации в продуктах Atlassian, поиск подхода к ранжированию проблем и методы пользовательских исследований в Lightroom: главное в продуктовом дизайне за ноябрь

Традиционный дайджест Юрия Ветрова, директора по дизайну и бренду Muse Group.

Переработка навигации в продуктах Atlassian, поиск подхода к ранжированию проблем и методы пользовательских исследований в Lightroom: главное в продуктовом дизайне за ноябрь
88
Как подготовить печатные макеты из Figma в Adobe Illustrator так, чтобы типография не взвыла? Личный опыт и советы

Цель этой статьи – поделиться своим опытом и в комментариях сообщества обсудить ваши лайфхаки. Не претендую на истину в последней инстанции, и понимаю, что профессионалы часто смеются над использованием Figma для предпечатки, как и некоторые иронизируют над использованием Corel Draw.

Как подготовить печатные макеты из Figma в Adobe Illustrator так, чтобы типография не взвыла? Личный опыт и советы
44
11
11
Область нажатия в Figma
Обложка

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

33
11
Топ 3 альткоинов, за которыми стоит следить на будущей неделе

На этой неделе Litecoin (LTC) вырос почти на 30% и достиг капитализации $10 млрд; DeXe (DEXE) подешевел на 11%, продолжая откат от февральских максимумов, а ONDO готовится выйти из нисходящего тренда.

Топ 3 альткоинов, за которыми стоит следить на будущей неделе
Что делает дизайнер в команде разработки?

Статья для тех, кто думал, что дизайн — это просто рисовать картинки за деньги :)

Что делает дизайнер в команде разработки?
99
11