Дизайн-система: иконки

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

Поместите иконки во фреймы

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

JavaMentor
JavaMentor

Представим, что у нас есть три иконки: 22x15px, 18x20px и 10x5px. Все они должны быть умещаться во фрейме 24x24px.

Нельзя оставлять иконки без фрейма
Всегда помещайте иконки во фрейм

Важно! Необходимо экспортировать именно иконку во фрейме, а не только её слой. Затем поместите иконку в контейнер 24x24px.

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

Иконка настроена в соответствии с фактическим центром. Отступы: слева и справа 10 пикселей. Однако из-за особенностей формы иконки возникает ощущение, что она смещена влево
Иконка настроена в соответствии с визуальным центром. Отступы: слева 12 пикселей, справа 8 пикселей. Значок намеренно смещен вправо, чтобы визуально выглядеть так, как будто он находится в центре

Элемент из фрейма с иконкой

Создайте компонент из фрейма с иконкой.

Компонент из фрейма с иконкой

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

Замена иконок при помощи функции «Instance»

Помечать иконки лучше всего на английском языке. Если вы загрузили иконку с английским названием, не стоит ее переименовывать.

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

Хранение иконок

В одном проекте могут находиться иконки разных размеров. Например, стандартные 24x24px, 16x16px и 20x20px используются для небольших элементов. Основной формат 24x24px можно хранить в монтажной области «Icons 24». Остальные значки, размер которых больше или меньше 24 пикселей, хранятся в разделе «Other Icons». Обычно их не так много.

Монтажная панель «Trash Icons» необходима для хранения различных версий значков. Например, вы нашли или нарисовали три значка чата, выбрали один из них и поместили его в «Icons 24». Затем вы переместили две другие версии в «Trash Icons». Если вы решите изменить свой выбор, вам не придется искать их снова.

Монтажная панель для иконок

Фон и цвет

При выборе компонентов с иконками удалите белый фон (даже если он отключен), чтобы предотвратить появление ненужных цветов в настройках Fill. Также стоит сразу же применить цветовой стиль к иконке, чтобы во время дальнейшей работы было удобнее менять ее цвет.

Удаление фона и применение цветового стиля

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

Яркий цвет иконки напомнит вам, что после замены его нужно перекрасить в нужный стиль

Constraints 

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

Настройка Сonstraints

Массовые действия с иконками

Все вышеописанные действия можно выполнить с несколькими иконками одновременно.

Выделите все компоненты и нажмите Enter, чтобы выбрать слои с иконкой сразу во всех её компонентах.

Лишние слои во фрейме иконки 

Во фрейме компонента не должно быть ничего, кроме иконки. Не забудьте удалить все скрытые слои. Например, иконки Material Design имеют белый фоновый слой.

Иконки с белым фоновым слоем

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

У однотонной иконки все элементы должны быть объединены в один слой. После этого не забудьте применить «Outline Storke» к фигуре.

Объединение в один слой

Данная процедура необходима для того, чтобы иконки весили меньше, а SVG-код стал более понятным. Таким образом у разработчиков не будет проблем с перекрашиванием иконок.

Ниже вы увидите, как выглядит SVG-код, когда компонент иконки обладает несколькими слоями. Код получился достаточно длинным и включает 7 параметров «Fill» для различных элементов значка. Однако он не должен выглядеть таким образом.

Размер файла — 1318 байт

И вот как выглядит SVG-код, когда все слои объединены. Код намного меньше и имеет только 2 параметра «Fill»: для фона контейнера и цвета иконки.

Размер файла — 803 байт

После экспорта иконки вы можете дополнительно сжать ее с помощью этого сайта. После сжатия код становится еще меньше, но его внешний вид не меняется.

Размер файла — 508 байт

Источники

Вот несколько источников, где вы можете найти подходящие иконки.

  • Material Design Icons Community. Один из лучших наборов, в котором вы найдете официальные иконки Material Design. Более того, у Figma есть специальный плагин.
  • Material Design Icons. Официальные иконки Material Design. Но, к сожалению, у них довольно странные теги, поэтому многие нельзя найти через поисковую строку. Помимо этого, файлы иконок содержат дополнительный слой с белым фоном, в котором нет особого смысла. У данной платформы также есть плагин в Figma.
  • Boxicons. На этом сервере можно найти множество хороших иконок, но некоторые из них потребуют дополнительной настройки. Также имеется плагин в Figma.
  • Feathericon. На данной платформе вы найдете хороший набор качественных иконок. Они включают контур, что позволяет масштабировать и изменять толщину линий. Имеется плагин Figma.
  • IBM icons. Иконки IBM созданы самой компанией и сообществом.

Читайте также:

Читайте нас в Telegram, VK и Яндекс.Дзен


Перевод статьи Andrey Nosov: Design System: Icons

Предыдущая статьяКак очистить код с помощью SASS
Следующая статья6 актуальных советов по созданию чистого кода React