Дизайн
Андрей Насонов

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

Подготовка иконок к работе в дизайн-системе.

Кто я и почему об этом пишу?

Привет, меня зовут Андрей Насонов, я UI/UX-дизайнер, работаю руководителем дизайн отдела в Elonsoft. Мы создаём программные продукты и помогаем компаниям из разных отраслей масштабировать свой бизнес.
Я занимаюсь дизайном с 2008 года, начинал как графический дизайнер, но с 2015 года работаю веб-дизайнером.

Мне интересна разработка сервисного дизайна, проектирование дизайн-систем и автоматизация дизайн- и бизнес-процессов.

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

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

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

Допустим, у нас три иконки: 22x15px, 18x20px и 10x5px. Каждая из них должна быть во фрейме 24x24px.

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

Экспортировать иконки нужно также во фрейме.

Важно! Экспортировать нужно именно иконку во фрейме, а не слой иконки. После чего помещать ее уже в контейнер 24x24px.

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

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

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

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

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

Это поможет вам быстро заменить одну иконку на другую, использовав функцию «Instance».

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

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

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

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

Заодно и новые слова на английском выучите, если у вас с ним беда, как и у меня. 😄

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

Статья 224, лишение свобод…… .. ладно 😄

Один проект может содержать иконки разных размеров. Например, стандартные 24x24px, 16x16px или 20x20px для элементов меньшего размера.

Основные иконки 24x24px мы храним в артборде «Icons 24». Остальные иконки размер которых больше или меньше 24px храним в «Other Icons». Обычно их не очень много.

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

Фон и цвет

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

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

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

Стиль цвета нужен чтобы при замене через инстанс вы не забывали перекрашивать иконку в нужный цвет.

Советую выбрать броский цвет, который вы очень редко используете на проекте. Оставляя иконку черной или серой есть вероятность что вы будете забывать ее перекрашивать. Я выбрал коричневый.

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

Констрейнтс

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

Важно! Сonstraints нужно настраивать именно у слоя с иконкой, а не у всего компонента.

Настройка constraints

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

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

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

Мусор в иконках

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

Например, Material Design иконки имеют белый фоновый слой.

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

В случае с одноцветной иконкой — все элементы должны быть объединены в один слой.

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

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

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

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

Размер файла иконки 1318 байт

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

Размер файла иконки 803 байта

После экспорта иконки вы можете ее дополнительно сжать используя этот сайт.

После сжатия код иконки стал еще меньше, но внешний вид иконки не изменился.

Размер файла иконки 508 байт

Ресурсы с иконками

Ну и напоследок несколько ресурсов откуда можно брать иконки.

Material Design Icons Community
Огромный набор иконок, который содержит официальные иконки Material Design, а также иконки созданные сообществом по гайдам Material Design. На мой взгляд, это лучший набор на данный момент. Он покрывает 90% моих потребностей.
В Figma есть специальный плагин.

Material Design Icons
Официальные иконки Material Design. К сожалению, на этом сайте иконки имеют довольно странные тэги. Из-за этого некоторые иконки нереально найти через поиск. Да и файл иконки содержит в себе лишний слой с белым фоном, который на мой взгляд, не нужен.
Плагин в Figma.

Boxicons
Есть хорошие альтернативы иконкам из предыдущих ресурсов. Но не все иконки pixel perfect.
Так же имеется плагин в Figma.

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

IBM icons
Иконки от IBM созданные самой компанией и сообществом.

Спасибо

Если вы узнали что-то новое или статья была вам полезна — жмите ^

{ "author_name": "Андрей Насонов", "author_type": "self", "tags": [], "comments": 65, "likes": 172, "favorites": 523, "is_advertisement": false, "subsite_label": "design", "id": 197293, "is_wide": true, "is_ugc": true, "date": "Sat, 16 Jan 2021 10:15:06 +0300", "is_special": false }
0
65 комментариев
Популярные
По порядку
Написать комментарий...
10

Профессионально. Исчерпывающие рекомендации по иконкам. 👏👏👏

Ответить
1

Ребята, я новичок на этой площадке. Хочу подписаться на этот паблик, а как это сделать, не могу понять. Не вижу куда нажать. 

Ответить
2

Если речь идёт о паблике "Дизайн" то в начале статьи нажми на само название "дизайн" возле розовой аватарки и там уже будет "подписаться"

Ответить
2

Спасибо за помощь. 

Ответить
3

Полезные практически рекомендации. Спасибо! Буду ждать продолжения.
Фактический центр обычно называют геометрическим, лучше отражает его суть.

Ответить
1

Спасибо, исправлю

Ответить
2

Спасибо! В избранное !!

Ответить
1

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

Ответить
1

Спасибо, постараюсь)

Ответить
1

Крайне интересно! Спасибо за материал. Могу ещё порекомендовать софтину iconjar для хранения разных наборов иконок, отлично подтягивает теги и синхронизирует библиотеку на разных пк.
Может знаете ещё какие-то качественные наборы иконок с хорошими тегами для поиска?

Ответить
1

Спасибо)
Да, я видел этот софт, правда не нашел большой пользы дня нас.
У нас рабочий процесс выстроен так что подобный софт не особо нужен. Хотя может я просто не увидел плюсы. Есть еще хороший софт iconset для таких целей, работает в облаке вроде и теги тоже можно присваивать.

Я больше склоняюсь к тому чтоб сделать автоматический экспорт всех иконок через API из фрейма "Icon 24" и чтоб они уже сразу подгружались фронтам в проект. Видел что подобное уже реализовали другие ребята, но у нас пока руки не доходят до этого.

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

Ответить
1

А еще иконки можно объединять в варианты (variants), иметь несколько размеров фреймов в одной системе (20x20, 24x24, 32+ или другие, если другая кратность), иметь несколько стилей для обводок (1-2px) и при этом все это может выглядеть как единая система, а не разносортный набор иконок. Статья бесполезна, написаны азы работы в фигме и с иконками.

Ответить
0

Зачем объединять иконки разного размера в варианты если в 95% случаев иконки находятся внутри другого компонента?
Как известно заменяя один компонент иконки на другой, внутри компонента кнопки например, иконка наследует размер компонента иконки который находится в родительском компоненте кнопки.

А объединять по толщине линии мне не нужно, хотя бы по тому что у меня 99% иконок по гайдам гугл материал и все они имеют 2 px линию

Статья может и правда описывает азы, я на статью года не претендую))
Если у тебя есть действительно какой то полезный совет лучше напиши его а не придирки)

Ответить
0

Нет, спасибо, я тут не для обучения сижу. Но один вопрос есть:

А объединять по толщине линии мне не нужно, хотя бы по тому что у меня 99% иконок по гайдам гугл материал и все они имеют 2 px линию

У тебя в проекте не бывает такого, что есть большие и маленькие иконки? Для всех одни и те же правила?

Ответить
0

Я так и понял)

Что конкретно тебя интересует, конкретизируй вопрос?

Есть основной размер 24 на 24, и есть 16 на 16 или 20 на 20 но их очень мало.
Во всех outline иконках я стараюсь придерживаться правила 2 пиксельной линии, за редким исключением может быть иконка с однопиксельными линиями или 1.5 линиями.

Ответить
0

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

Ответить
1

Вот Например "полупиксели" в иконках в IBM Design System. Да и вообще многие айкон-паки идут со stroke 1.5px 

Ответить
0

Ну идут, ок. Но это же бред.

Ответить
0

Почему же? Тот же вконтакте  использует 1.8 толщину для 24 размера и 1.5 для 20 размера...

Ответить
0

Про размеры фреймов в статье есть

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

Ответить
0

Не знал. Очень странное решение. Хотя пользуясь интерфейсами гугла, не удивляет.

Ответить
1

Четко и по делу. Очень полезно! Спасибо!

Ответить
1

Достаточно интересная статья, спасибо, читала с удовольствием

Ответить
1

Разработчик же зачастую выравнивает иконку по геометрическому центру не замечая разницы.

У разработчика нет инструментов для выравнивания изображений по визуальному центру. Поэтому если, например, все иконки должны быть 24*24, а дизайнер экспортирует 15*19, то разработчик может или автоматически выводить её по центру блока 24*24 (компьютер выравнивает по геометрическому центру), или выводить как есть (всё разъезжается), или открывать иконку в редакторе, выставлять артборд 24*24 и выравнивать самостоятельно. Иногда выходит так, что такие кривые иконки не центруются в блоке, а автоматически растягиваются непропорционально — получается ещё хуже.

Ответить
1

Спасибо за статью. Полезно

Ответить
1

Четко, по делу и соответствует тому как это делают в реальных дизайн системах. Хороший материал.

Ответить
1

 Спасибо!! 

Ответить
1

Спасибо за статью и ресурсы с иконками

Ответить
1

Про код не знал, клевая статья) 

Ответить
–1

да вы епанулись. шел 21й год 21го века.. до сих пор учимся иконки рисовать.

Ответить
1

Ну вот например Вконтакте до сих пор не умеет ровные иконки рисовать, а между прочим это чуть ли не самая главная иконка, которую постоянно видишь :)

Ответить
0

Не знаю откуда вы взяли эту иконку, но в их библиотеке все в порядке с ней

Ответить
0

С сайта ) В библиотеке в фигмакомьюнити она поровнее, но не идеальна, если приглядеться ) 

Ответить
0

Скорее всего эти артефакты появились после сжатия, переборщили немного)

Ответить
0

А я что-то не вижу, или реально нигде не написано, что в качестве примера используется фигма? Пока не дошёл до комментов, не понимал, что происходит. Словно урок из подборки, но не ясно какой) И это я хотя бы слышал/видел, что такое фигма.

Ответить
0

Так примеры интерфейса приложены, вы чего :)

Ответить
0

кто постоянно меняет картинки нам в превью к новости, мне вот что интересно. 😩

Честно говоря уже начинает бесить. Специально готовишь обложку, а ее меняют. 

Ответить
1

Да, тоже заметил) я думал это я неправильно обложку выбрал, пошёл поменял на нужную, а оно опять поменялось))

Ответить
3

это походу редакторы VC сами меняют

Ответить
0

Оооо да, это прям мечта что бы иконки делали нормально, без напоминаний! В последние годы когда что-то делаем, просим дизайнеров что бы сразу шрифты делали, а не просто картинок налепили.

Ответить
1

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

А так не всегда и не всем подходит использование шрифтовых иконок, иногда лучше иконку в виде компонента в коде делать, но там везде есть свои плюсы и минусы)

Ответить
1

Удобства шрифта в том что ты цвет, фон, градиент, размер задаёшь в стилях и это очень удобно

Ответить
5

На svg тоже можно вешать стили, при этом не обязательно тянуть весь сэт в проект. Тут скорее от задачи зависит

Ответить
0

Я помню что там были проблемы с тенями и с градиентом, как сейчас с этим даже хз. И еще не работает сглаживание и вроде как до сих пор.

Ответить
1

Ну как я и говорю во всех способах есть плюсы и минусы) Каждый выбирает то что больше подходит для его проекта)

Вот хорошая статья-сравнение разных реализаций иконок)
https://medium.com/@marcintreder/design-system-sprint-6-the-fastest-icons-on-earth-bf91c0a47ef9

Ответить
0

цвет можно ограниченно передавать в svg, задав для fill или stroke "цвет" currentColor.

Ответить
0

да, это я знаю. Но я говорил про градиент, я знаю что не работало, как сейчас обстоят дела я хз

Ответить
0

Удобно ли все это менять - да. Нужно ли это в реальном проекте, где утвержденный макет дизайна - НЕТ!
Владельцы админкой-то пользуются раз в году, им проще ватцапнуть программеру, чтобы два абзаца в тексте переставить))) Или вайбернуть.

Ответить
0

(; я верстаю иногда, мне лень иконки иконки подгонять, хочу что бы все просто было 

Ответить
0

Вопрос не по иконкам, а в целом в фигме. Нужно ли такие элементы как хедер, карточка товара и тд делать в фрейме? Или достаточно просто сгруппировать в папку

Ответить
1

Если я правильно понял "сгруппировать в папку" это просто сделать группой?

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

Группы я расцениваю чисто как способ объединения нескольких слоев, чтоб в панели слоев был порядок. У меня например из 100% только в 2-5% используются группы, остальное все на фреймах.

Ответить
0

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

Ответить
2

Я думаю легче посмотреть видео на ютубе, чем мне объяснять.
Это основы, в ютубе много видео на данную тему

https://www.youtube.com/watch?v=T_1gBIZrmB8
https://www.youtube.com/watch?v=nxCbgkWdYyY

Ответить
1

Польза в том что изменив мастеркомпонент хедера на 1 странице
он изменится на дочерних компонентах на к примеру 100+ и более остальных экранах сайта. Представьте себе это все искать и менять руками по одному ) 

Ответить
0

А каким инструментом делаете иконки?

Ответить
0

80% иконок использую из тех ресурсов что описал в конце статьи, а остальные 20% прям в фигме и рисую

Ответить
0

Так, а каким инструментом? Ручкой? 
А как меняете иконки с ресурсов? Они же нарисованы ручкой часто. Как, например, сузить толщину линии, когда там везде точки от ручки..

Ответить
1

Иконки рисуются пером. У нарисованный путей задается их толщина через Stroke.

Ответить
0

Если надо что-то нарисовать - рисую и пером (инструмент pen), и просто фигурами, прямоугольниками и ТД, в общем использую все стандартные инструменты для работы с шейпами.

Насчёт сделать линию в иконке тоньше, то это очень редко бывает, в основном всегда используем 2-х пиксельные линии как в наборах

Ответить
0

Понятно. Спс

Ответить

Комментарий удален

Комментарии

null