Подготовка иконок к работе в дизайн системе
![](https://habrastorage.org/getpro/habr/upload_files/ede/3bc/470/ede3bc4708f4549d36ef642f5daa5662.png)
Кто я и почему об этом пишу?
Привет, меня зовут Андрей Насонов, я UI/UX дизайнер работаю руководителем дизайн отдела в компании которая создаёт веб-сервисы и помогает компаниям из разных отраслей масштабировать свой бизнес. Я занимаюсь дизайном с 2008 года, начинал как графический дизайнер, но с 2015 года работаю веб дизайнером. Мне интересна разработка сервисного дизайна, проектирование дизайн систем, и автоматизация дизайн и бизнес процессов.
В этой серии статей я хотел бы поделиться своим опытом построения дизайн-систем и предложить несколько идей по автоматизации. В первой статье мы поговорим на довольно простую, но важную тему — иконки. Поехали!
Помещайте иконки во фреймы
Поскольку все иконки разного размера в силу своих геометрических особенностей, все они должны быть помещены во фреймы одинакового размера.
Допустим, у нас три иконки: 22x15px, 18x20px и 10x5px. Каждая из них должна быть во фрейме 24x24px.
![Оставлять иконки без фрейма нельзя Оставлять иконки без фрейма нельзя](https://habrastorage.org/getpro/habr/upload_files/65f/c82/943/65fc829439b418847eca66d351605a8f.png)
![Всегда помещайте иконки во фрейм Всегда помещайте иконки во фрейм](https://habrastorage.org/getpro/habr/upload_files/b9d/20c/cc6/b9d20ccc68f7d8fc40c2459a969c1969.png)
Экспортировать иконки нужно также во фрейме.
Важно! Экспортировать нужно именно иконку во фрейме, а не слой иконки. После чего помещать ее уже в контейнер 24x24px.
Причем, важно делать именно в такой последовательности, поскольку дизайнер зачастую выравнивает иконку изнутри фрейма по визуальному центру, а не по геометрическому. Разработчик же зачастую выравнивает иконку по геометрическому центру не замечая разницы.
![Иконка выровнена по фактическому центру. Отступы: слева и справа по 10px. Но из-за особенностей формы иконки возникает ощущение, что она сдвинута влево Иконка выровнена по фактическому центру. Отступы: слева и справа по 10px. Но из-за особенностей формы иконки возникает ощущение, что она сдвинута влево](https://habrastorage.org/getpro/habr/upload_files/07d/228/b89/07d228b894b775bf0693d6b076c90bc7.png)
![Иконка выровнена по визуальному центру. Отступы: слева 12px, справа 8px. Иконка специально сдвинута вправо, чтобы визуально казалось, что иконка располагается по центру Иконка выровнена по визуальному центру. Отступы: слева 12px, справа 8px. Иконка специально сдвинута вправо, чтобы визуально казалось, что иконка располагается по центру](https://habrastorage.org/getpro/habr/upload_files/993/9db/014/9939db01446ea3bb6156c197393411c5.png)
Компонент из фрейма с иконкой
Создайте компонент из фрейма с иконкой.
![Компонент из фрейма с иконкой Компонент из фрейма с иконкой](https://habrastorage.org/getpro/habr/upload_files/4a4/129/206/4a4129206874d2103554a989f98a9671.gif)
Это поможет вам быстро заменить одну иконку на другую, использовав функцию «Instance».
Чтобы замена через инстанс сработала, компоненты иконок должны находиться в одном фрейме (об этом дальше).
![Замена иконок с помощью функции "Instance" Замена иконок с помощью функции "Instance"](https://habrastorage.org/getpro/habr/upload_files/3db/d4d/4b8/3dbd4d4b8adbdb94475b0120007a7757.gif)
Иконки лучше всего именовать на английском. Если вы скачали иконку, а у нее уже есть название на английском — не переименовывайте ее.
Так вы быстрее запомните название иконок и будете легко находить на тех ресурсах, где их берете.
Заодно и новые слова на английском выучите если у вас с ним беда, как и у меня. ????
Хранение иконок
Статья 224, лишение свободы…….. ладно ????
Один проект может содержать иконки разных размеров. Например, стандартные 24x24px, 16x16px или 20x20px для элементов меньшего размера.
Основные иконки 24x24px мы храним в артборде “Icons 24”. Остальные иконки размер которых больше или меньше 24px храним в “Other Icons”. Обычно их не очень много.
Артборд “Trash Icons” нужен чтобы хранить в нем различные варианты иконок. Например, вы подобрали или нарисовали три иконки чата, выбрали из них одну и поместили ее в артборд “Icons 24”, а другие два варианта иконки перемещаете в артборд “Trash Icons”. На случай, если вы передумаете и захотите изменить свой выбор вам не придется искать их снова.
![](https://habrastorage.org/getpro/habr/upload_files/a70/e40/f6a/a70e40f6a631409d9ac13c2e3720a378.png)
Фон и цвет
Чтобы при выделении компонентов с иконкой в настройках Fill не отображались лишние цвета - удалите у компонента белый фон, даже если он отключен.
Так же рекомендую сразу применять к иконке стиль цвета, чтобы при дальнейшей работе было удобнее менять цвет иконки.
![Удаление фона и применение стиля цвета Удаление фона и применение стиля цвета](https://habrastorage.org/getpro/habr/upload_files/1d8/c31/967/1d8c31967b78d3edadf8f9fe2550f868.gif)
Стиль цвета нужен чтобы при замене через инстанс вы не забывали перекрашивать иконку в нужный цвет.
Советую выбрать броский цвет, который вы очень редко используете на проекте. Оставляя иконку черной или серой есть вероятность что вы будете забывать ее перекрашивать. Я выбрал коричневый.
![](https://habrastorage.org/getpro/habr/upload_files/e39/7c5/dcd/e397c5dcd2932ce937d78052d56dcf9f.png)
![Яркий цвет иконки четко дает понять, что после замены ее нужно перекрасить в нужный стиль Яркий цвет иконки четко дает понять, что после замены ее нужно перекрасить в нужный стиль](https://habrastorage.org/getpro/habr/upload_files/2be/367/c9b/2be367c9b9b8ae93fbf37ccb21e4c695.gif)
Констрейнтс
Настройте у слоя с иконкой constraints по вертикальному и горизонтальному центру. Это нужно на случай, если вы захотите уменьшить или увеличить компонент иконки, но так чтобы сама иконка не меняла свой размер.
Важно! Сonstraints нужно настраивать именно у слоя с иконкой, а не у всего компонента.
![Настройка constraints Настройка constraints](https://habrastorage.org/getpro/habr/upload_files/05e/337/c39/05e337c39d6677d3f116f63a7f864aa2.gif)
Массовые действия с иконками
Все вышеописанные действия можно проделать с несколькими иконками сразу.
![](https://habrastorage.org/getpro/habr/upload_files/a19/bf8/96d/a19bf896d9bef76a8ef7c76044d1f6fe.gif)
Для того, чтобы выбрать слои с иконкой сразу во всех компонентах иконок — выберите все компоненты иконок и нажмите Enter.
Мусор в иконках
Во фрейме компонента, кроме иконки ничего не должно быть. Не забывайте удалять все скрытые слои из фрейма с иконкой.
Например, Material Design иконки имеют белый фоновый слой.
![](https://habrastorage.org/getpro/habr/upload_files/0d6/ced/0c7/0d6ced0c704a8dcfa0022ab33b045bbd.gif)
В итоге компонент иконки должен содержать только один слой (слой с иконкой). Но могут быть и исключения, например, двухцветные иконки.
В случае с одноцветной иконкой — все элементы должны быть объединены в один слой.
![](https://habrastorage.org/getpro/habr/upload_files/68e/ca0/194/68eca019407e5080d0e584a4592cee5e.png)
После того, как вы объединили слои, не забывайте применять “Outline Storke” к объединенной фигуре.
![Объединение иконки в один слой Объединение иконки в один слой](https://habrastorage.org/getpro/habr/upload_files/59a/9d0/6b3/59a9d06b36f9bbd27432b0dc1a112480.gif)
Все это нужно для того, чтобы иконки меньше весили, SVG код был гораздо меньше и понятней, а у разработчиков не возникли проблемы с перекрашиванием иконок.
Так выглядит SVG код иконки когда компонент иконки имеет несколько слоев и они не объединены в один. Код получился очень длинным и имеет целых 7 параметров “Fill” для разных элементов иконки. Так делать нельзя.
![Размер файла иконки 1318 байт Размер файла иконки 1318 байт](https://habrastorage.org/getpro/habr/upload_files/28e/164/9bd/28e1649bd5e1c13cf297ad43213fab7c.png)
А так выглядит SVG код иконки когда все слои объединены. Код гораздо меньше и имеет всего 2 параметра “Fill”. Один для фона контейнера, другой для цвета иконки. Так делать можно.
![Размер файла иконки 803 байта Размер файла иконки 803 байта](https://habrastorage.org/getpro/habr/upload_files/5f0/5d8/9b4/5f05d89b42999e5bed53f9d7c86e030d.png)
После экспорта иконки вы можете ее дополнительно сжать используя этот сайт.
После сжатия код иконки стал еще меньше, но внешний вид иконки не изменился.
![Размер файла иконки 588 байт Размер файла иконки 588 байт](https://habrastorage.org/getpro/habr/upload_files/36d/528/11d/36d52811d10180916d6a601afa329ff8.png)
Ресурсы с иконками
Ну и напоследок несколько ресурсов откуда можно брать иконки.
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 созданные самой компанией и сообществом.
Remixicon
Большое количество хороших Fill и Outline иконок
Спасибо
А если хотите узнать больше фишек — подписывайтесь, чтобы не пропустить новые статьи.