Эта статья основана на реальном опыте создания набора из 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%, если есть такая необходимость в процессе работы.
Сетка
Сетка должна включать:
отступы от краёв;
окружность
примитив под квадрат;
примитивы под вертикальный и горизонтальный прямоугольники.
Эти формы уже устаканились в плане соотношения друг с другом и позиционирования в квадратных фреймах.
Если будут скругления — закладываем их сразу. Лучше сделать сетку компонентом: если что-то поменяется, правки пройдут по всему драфту.
Совет: в сложных интерфейсах часто нужны иконки с выносными элементами: документ со стрелкой, крестиком, галочкой. Лучше заранее продумать для них сетку и правила размещения.
Мы с коллегами не нашли готовых подходящий решений или рекомендаций по выносным элементам — сформулировали принципы и реализовали дополнительную сетку сами.
Логика
Набил шишки за вас. Делюсь опытом, как стоит организовать драфт. Да, черновик лучше организовать. Вы будете возвращаться к нему через месяцы и годы. Ваши коллеги будут обращаться к нему. Облегчите жизнь всем. Делайте структуру драфта четкой и понятной сразу, а не откладывайте, с надеждой навести порядок потом.
Драфт рекомендую организовать так:
Каждая новая иконка — новая строка по вертикали с фиксированным отступом
Всё что относится к иконе — в строке справа от нее в хронологическом порядке.
Для чего так делать?
показать логику, которой вы следовали;
сохранить промежуточные варианты и базы;
обозначить, что в итоге пошло в библиотеку;
оставить наработки или обозначить ошибочные пути.
Если вам категорически не хочется заниматься структурой, нравится «царить над хаосом» и быть тем единственным, кто знает, что где лежит, то возьмите из этого только одно правило:
Сохраняйте базы
Базы — векторные объекты, из которых вы создавали иконку до их преобразования различными функциями. Они сохраняют обводку как настройку, а не контур, например, или не объединены, не вычтены и не слиты.
Когда вернетесь, чтобы создать что-то новое или отредактировать старое — скажете себе спасибо за сохраненные базы и промежуточные варианты.
Последовательность
Будьте последовательны. Сначала определите зону для 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 для иконок:
Для интерфейсного дизайнера
Когда я делаю макет интерфейса, я хочу быстро вставить нужную иконку, чтобы сделать элемент визуально понятным, а не отвлекаться на правки, поиски, адаптацию и доработки. Это про готовую библиотеку, где всё подписано, структурировано, в одном стиле и не нужно доделывать «на лету».Для фронтенд-разработчика
Когда я собираю компонент на фронте, я хочу использовать иконку без артефактов в .svg из библиотеки, чтобы не тратить время на её поиск экспорт, адаптацию или правки. Это про названия, структуру и формат, которые легко подключить к коду.Для продакт-менеджера
Когда я согласовываю визуальную часть продукта, я хочу быть уверен, что иконки читаются и работают в интерфейсе, чтобы не было срывов сроков из-за переделок и жалоб пользователей. Это про качество, читаемость, единую визуальную логику и соблюдение сроков.Для нового дизайнера в команде
Когда я подключаюсь к проекту, я хочу быстро разобраться в библиотеке иконок, чтобы сразу использовать её по правилам, не нарушая стиль. Это про документацию, понятную структуру, нейминг и воспроизводимость.
Коммуникация
Показывайте коллегам и обсуждайте
Работы много, она мелкая, глаз «замыливается». Планируйте созвоны, показывайте, тестируйте метафоры и считываемость образов.Держите в курсе и будьте в курсе
Созванивайтесь с руководителем. Дайте ему понять, успеваете ли, и на сколько в процентах сейчас готова задача. Пример: «Вова, привет, сделал еще 30 иконок. Давай посмотрим. Вместе с ними готово примерно 30% от всей задачи. Становится понятно, что мы не успеем. Возможно скорректировать дедлайн и оценку? Я думаю, что понадобится столько-то времени сверху…» Или наоборот: «Саш, привет, поставь созвон по иконкам, давай посмотрим, синканемся, что там у нас готово…»Дробите
Особенно на страте. Не делайте сразу сто штук. Согласуйте детали: скругления, обводки. Покажите в интерфейсе. Взгляните критически. Согласовали детали на примере 5-10 иконок — делайте итерацию побольше. Не согласовали — правьте на этих 5-10. Если не можете долго сохранять концентрацию — дробите время. Pomodoro и другие таймеры в помощь. Концентрация понадобится.Смиритесь
Потратили много времени на иконку? Придумали классную метафору? Отрисовали? Покажите коллегам, а лучше вообще не дизайнерам и спросите, для чего эта иконка. Если вы рисовали колокольчик, а вам говорят, что это нос — смиритесь. Увы, первая ассоциация — самая верная. Помните, цель коммуникации — реакция. Если реакция не совпадает с ожидаемой, значит коммуникация была проведена не верно. Это полностью актуально для иконок. Конечно, вам будет казаться, что вы сделали классно, образ и метафора верны и считываются, но нет. Оставьте амбиции и переделывайте. Помните о том, для чего и для кого вы создаете иконки. Пользователь должен считывать образ на подсознании, не отвлекаясь на иконку и не разгадывая ребус.Все иконки одинаково важны
Не делите, иконки на важные и неважные, основные и второстепенные или другие группы, в которых можно сделать получше и похуже. Каждая иконка должна быть сделана с одинаковым техническим уровнем и вниманием к деталям.
Создаем и наполняем библиотеку
Организация
Правила организации библиотеки похожи на те, что я описывал для драфта.
Создаем в нашем fig-файле новую страницу. Теперь уже IconsProduct — подставьте своё. Там добавляем строки с группами иконок. Например:
Documents
Folders
Users
Arrows и так далее
Подготовка иконок
Каждый фрейм должен быть назван на английском языке, иметь единую структуру и описывать иконку внутри. Например: DocumentOutline20, DocumentAddOutline20
Интересное наблюдение: когда вы будете искать по ключевым запросам иконку, то фигма сама проанализиует их и по запросу circle вы всё равно найдёте иконку, на которой изображена круглая пицца с названием roundpizza.
Быстрая проверка
Цвет
Выделите все фреймы с иконками. Если в панели Fill видите лишние цвета — исправялйте.Scale и скругления
Тут чуть дольше. Нужно выделить не фреймы, а векторы. Сделать это можно если тянуть выделение мышкой с зажатым контролом по строке с иконками. Высота области выделения, которую вы тянете должна быть меньше высоту фрейма, чтобы выбрались именно иконки. Выбрали — смотрим Position. Если там Mixed — исправляем. Сталкивался с багами — на конкретных иконках не выставлялсся Scale. Выделял, объединял shift+alt+u, сливал ctrl+e, называл ctrl+r «f» и тогда scale выставлялся. То же со скруглениями: если в панели Appearance, есть скругление или Mixed — исправляем.Дубли и нейминг
Выделяем вообще все фреймы с иконками в панели экспорт смотрим количество. Допустим, 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
