Эта статья основана на реальном опыте создания набора из 250 иконок. Расскажу, как подойти к созданию библиотеки иконок с нуля: чем руководствоваться, как не наломать дров, где легко ошибиться и что делать, чтобы потом не пришлось всё переделывать. Покажу технические аспекты. Это сэкономит время, а значит — деньги.

Никитин Александр

UX/UI-дизайнер в Экзон

Кому полезно?

• Дизайнерам — потому что покажу структуру, драфт, технические детали и организацию.

• Продактам, руководителям и лидам — потому что расскажу, на что смотреть, чтобы работа дизайнера не пошла впустую.

С чего начать?

Парадокс: лучше всего начать с конца. То есть — с понимания, какой библиотекой иконок вы хотите пользоваться в итоге. От этого зависит всё: нейминг, структура, формат, и то, насколько легко её будет масштабировать и поддерживать. В рамках продукта вам надо сформулировать себе примерно следующие мысли:

«В итоге мы хотим иметь библиотеку иконок, в которой будет порядка 230 компонентов. Их можно будет добавлять из ассетов и менять иконки внутри уже созданных макетов. В паке должны быть иконки с обводкой и залитые. размеры 24×24px и 16×16px.»

Это базовые ориентиры, с которых стоит начать. Все нюансы вроде толщины обводки, скруглений придут позже. А выше уже неплохой лид–текст для таски.

Определяем пул иконок

Это можно сделать вместе с командой:

• оттолкнуться от интерфейса;

• проанализировать похожие продукты;

• поштурмить с коллегами или нейросетями.

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

Готовим драфт в Figma

Сначала определимся с размером иконок. Я рекомендую отталкиваться от атома вашей дизайн-системы или используйте стандартные размеры, например 24 или 16px.

Теперь обводка и скругления. Подбирайте в зависимости от используемого в интерфейсе шрифта.

Мы для своего продукта выбрали размер фрейма 20×20px по размеру атома. Скругление определили через тесты с меню, кнопками и другими частями интерфейса.

Определим структуру будущей библиотеки.
IconsProduct\
\Outline20
\Fill20
\Outline16
\Fill16

Назовем fig-файл «IconsProduct» — это заглушка, у вас будет своё. Создадим страницу draft. В ней будем работать все ближайшие дни.Важно сразу её грамотно организовать.

Пиксельная сетка и хинтинг

Сразу можно включить:

ctrl+’ — пиксельная сетка. Если не видите изменений по нажатию — приблизьте на максимум. Должна появиться квадратная сетка.

ctrl+shift+’ — привязываем наши объекты к пиксельной сетке. Так наши фреймы, а главное объекты и контуры будут занимать положения в край или в целый пиксель. Это важно для хинтинга.

Хинтинг — это понятие из шрифта, но относительно иконок я бы сформулировал его так:

Хинтинг (англ. hinting, от hint «намёк, совет») — сглаживание контура при его обработке браузером или устройством с помощью специальных программных инструкций. Обеспечивает чёткое отображения контуров на устройствах с низким разрешением экрана или при отображении в мелком формате.

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

Чтоб увидеть наглядно можете посмотреть и подвигать свою иконку в пиксельном превью фигмы. Для этого нажмите ctrl+shift+p. Это отлично показывает принцип по которому будет производиться хинтование, но помните, в разных операционных системах и браузерах будет выглядеть иначе. Сохраняйте .svg в размере 1к1, закидывайте в нужный браузер и проверяйте на масштабе 100%, если есть такая необходимость в процессе работы.

Сетка

Сетка должна включать:

• отступы от краёв;

• окружность

• примитив под квадрат;

• примитивы под вертикальный и горизонтальный прямоугольники.

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

Если будут скругления — закладываем их сразу. Лучше сделать сетку компонентом: если что-то поменяется, правки пройдут по всему драфту.

Совет: в сложных интерфейсах часто нужны иконки с выносными элементами: документ со стрелкой, крестиком, галочкой. Лучше заранее продумать для них сетку и правила размещения.

Мы с коллегами не нашли готовых подходящий решений или рекомендаций по выносным элементам — сформулировали принципы и реализовали дополнительную сетку сами.

Логика

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

Драфт рекомендую организовать так:

1. Каждая новая иконка — новая строка по вертикали с фиксированным отступом

2. Всё что относится к иконе — в строке справа от нее в хронологическом порядке.

Для чего так делать?

• показать логику, которой вы следовали;

• сохранить промежуточные варианты и базы;

• обозначить, что в итоге пошло в библиотеку;

• оставить наработки или обозначить ошибочные пути.

Если вам категорически не хочется заниматься структурой, нравится «царить над хаосом» и быть тем единственным, кто знает, что где лежит, то возьмите из этого только одно правило:

Сохраняйте базы

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

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

Последовательность

Будьте последовательны. Сначала определите зону для outline20, 16 и fill20, 16. Иконки создавайте так же: сначала все с обводкой или все залитые, потом то же, но в 16px.

Отведите отдельную зону в драфте, где будете тестировать иконки на реальных интерфейсах.

Утвердили что-то — удалите лишнее. Лишнее — это не промежуточные варианты, а то что больше не имеет практической ценности или точно не будет иметь её в будущем. Обычно это сопроводительные иллюстрации для объяснения или обоснования своей точки зрения: почему сделали именно так, а не иначе.

Нейминг

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

Создали фрейм для новой иконки — сразу назвали согласно структуре и выбранному синтаксису, например: DocumentOutline20

Вектор

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

• сtrl+alt+O — преобразует обводки в кривые;

• ctrl+shift+O — уберет всю графику и покажет только контуры — это на случай, если вы запутались или хотите себя проверить;

• shift+alt+U — объединит выделенные контуры. Создаст новый слой с вложенными контурами, которые можно редактировать. Таких слоев в финальной библиотеке быть не должно.

• shift+alt+S — исключит один контур из другого и сделает все то же, что описано выше в объединении.

• ctrl+E — сведет все виды контуры в единый — то, что надо когда иконка готова.

Все фреймы называют и описывают иконку, а все векторы иконок называются одинаково. Мы называем «f».

Драфтим

Самая длинная и ответственная часть работы. В большинстве своем монотонная, но местами, медитативная.

На этом этапе я бы деражл в голове что-то врдое Jobs to Be Done для иконок. Базовая формула JTBD: «Когда [контекст], я хочу [действие], чтобы [результат]». Применяйте это к иконкам — и получите ясные цели для их создания и проверки.

На этом этапе я бы деражл в голове что-то врдое Jobs to Be Done для иконок. Базовая формула JTBD: «Когда [контекст], я хочу [действие], чтобы [результат]». Применяйте это к иконкам — и получите ясные цели для их создания и проверки.

Пример JTBD для иконок:

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

2. Для фронтенд-разработчика
   Когда я собираю компонент на фронте, я хочу использовать иконку без артефактов в .svg из библиотеки, чтобы не тратить время на её поиск экспорт, адаптацию или правки. Это про названия, структуру и формат, которые легко подключить к коду.

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

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

Коммуникация

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

2. Держите в курсе и будьте в курсе
   Созванивайтесь с руководителем. Дайте ему понять, успеваете ли, и на сколько в процентах сейчас готова задача. Пример: «Вова, привет, сделал еще 30 иконок. Давай посмотрим. Вместе с ними готово примерно 30% от всей задачи. Становится понятно, что мы не успеем. Возможно скорректировать дедлайн и оценку? Я думаю, что понадобится столько-то времени сверху…» Или наоборот: «Саш, привет, поставь созвон по иконкам, давай посмотрим, синканемся, что там у нас готово…»

3. Дробите
   Особенно на страте. Не делайте сразу сто штук. Согласуйте детали: скругления, обводки. Покажите в интерфейсе. Взгляните критически. Согласовали детали на примере 5-10 иконок — делайте итерацию побольше. Не согласовали — правьте на этих 5-10. Если не можете долго сохранять концентрацию — дробите время. Pomodoro и другие таймеры в помощь. Концентрация понадобится.

4. Смиритесь
   Потратили много времени на иконку? Придумали классную метафору? Отрисовали? Покажите коллегам, а лучше вообще не дизайнерам и спросите, для чего эта иконка. Если вы рисовали колокольчик, а вам говорят, что это нос — смиритесь. Увы, первая ассоциация — самая верная. Помните, цель коммуникации — реакция. Если реакция не совпадает с ожидаемой, значит коммуникация была проведена не верно. Это полностью актуально для иконок. Конечно, вам будет казаться, что вы сделали классно, образ и метафора верны и считываются, но нет. Оставьте амбиции и переделывайте. Помните о том, для чего и для кого вы создаете иконки. Пользователь должен считывать образ на подсознании, не отвлекаясь на иконку и не разгадывая ребус.

5. Все иконки одинаково важны
   Не делите, иконки на важные и неважные, основные и второстепенные или другие группы, в которых можно сделать получше и похуже. Каждая иконка должна быть сделана с одинаковым техническим уровнем и вниманием к деталям.

Создаем и наполняем библиотеку

Организация

Правила организации библиотеки похожи на те, что я описывал для драфта.

Создаем в нашем fig-файле новую страницу. Теперь уже IconsProduct — подставьте своё. Там добавляем строки с группами иконок. Например:

• Documents

• Folders

• Users

• Arrows и так далее

Подготовка иконок

Каждый фрейм должен быть назван на английском языке, иметь единую структуру и описывать иконку внутри. Например: DocumentOutline20, DocumentAddOutline20

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

Быстрая проверка

1. Цвет
   Выделите все фреймы с иконками. Если в панели Fill видите лишние цвета — исправялйте.

2. Scale и скругления
   Тут чуть дольше. Нужно выделить не фреймы, а векторы. Сделать это можно если тянуть выделение мышкой с зажатым контролом по строке с иконками. Высота области выделения, которую вы тянете должна быть меньше высоту фрейма, чтобы выбрались именно иконки. Выбрали — смотрим Position. Если там Mixed — исправляем. Сталкивался с багами — на конкретных иконках не выставлялсся Scale. Выделял, объединял shift+alt+u, сливал ctrl+e, называл ctrl+r «f» и тогда scale выставлялся. То же со скруглениями: если в панели Appearance, есть скругление или Mixed — исправляем.

3. Дубли и нейминг
   Выделяем вообще все фреймы с иконками в панели экспорт смотрим количество. Допустим, 200. Нажимааем ctrl+f или лупу над слоями. Вводим название иконок, в моем случае «f». В фильтре добавляю Match case и Whole word. Если рузельтатов в поиске больше, чем в экспорте, значит есть дубли слоев. Если меньше, значит часть слоев названа некорректно.
   Подобный поиск проведите с учетом регистра. В моем пример «F» вместо «f». Так же поищите, что забыли слить: Union и Substract — автоматические названия для слоев со вложенностью после действий с вектором.
   Если не можете отыскать попробуйте снова найти все варианты по запросу «f» и в панели слоев выберите все через ctrl+a. Глазами найдите невыделенные фреймы. С ними что-то не так.

Публикуем библиотеку

Слева над панелью слоев есть вкладки. File и Assets. Выбираем Assets. Справа в той же строке появится иконка книжки. Жмем её. В открывшемся окне выбираем This file, видим нашу либу и жмем Publish.
После обновления иконка либы находится внизу левой панели.

По этим же путям можно обновить библиотеку, нажимая Update и подтверждая публикацию изменений.

Теперь эту библиотеку можно добвлять в другие фигма-файлы или брать иконки из ассетов.

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

Поддерживаем

Иногда библиотеку надо дополнить или отредактировать. Чтобы дополнить — создаем иконку, добавляем её в нужны раздел библиотеки и делаем компонентом. Чтобы отредактировать — вносим правки как в обычные макеты.

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

О красоте

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

Базовые знания о композиции и свето-теневом рисунке сделают иконки более качественными.

Заключение

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

Статью написал

Никитин Александр

дизайнер команды Экзон

Отредактировал Владимир Калинин — руководитель отдела.
С иконками мне помогали Михаил Лисин — ведущий проектировщик и вся команда дизайнеров Экзон.

Всем спасибо, всем пока ?
Хабр Экзон https://habr.com/ru/companies/exon_group/profile/
Мой ТГ https://t.me/+9QBueZEXMb1iOGYy