Как можно реализовать иконки в качестве токенов дизайна?

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

Как и любой другой тип токена, жетоны значков должны быть уровня 1 и уровня 2, при этом уровень 3 не является обязательным.

Когда речь заходит о жетонах значков, стоит упомянуть как минимум 2 ключевых преимущества:

1. Более тщательно продумана роль каждой иконки.
2. Более структурированный, масштабируемый и удобный набор иконок.

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

Как бы вы их назвали?

Я предполагаю, что по крайней мере некоторые из вас выберут свою семантику/роль/функцию, а именно: «Главная», «Избранное/Нравится», «Корзина», «Редактировать» и «Уведомления».

Хотя это вовсе не неправильно, это не символический способ сделать это.

Итак, давайте посмотрим на первый и второй уровни Design Tokens:

1. Референсные токены

Сначала подберите оружие, позже появятся монстры.

Здесь мы устанавливаем наш выбор, например:

• Я выбираю красный #ff0044 и называю его «color.chills».
• Я выбираю Comic Sans и называю его «font.lovely».

• Я выбираю этот дом и назову его «icon.100».

• Я выбираю этот дом и назову его «icon.house».

Как видите, есть две «школы*» для именования определенных токенов ссылок, таких как цвета или значки.

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

« Семантическая» школа:

• Я выбираю этот дом и назову его «icon.house».
• Я выбираю это сердце и назову его «icon.heart».
• Я выбираю этот мусорный бак и назову его «icon.trash-can».
• Я выбираю этот карандаш и назову его «icon.pencil».
• Я выбираю этот колокольчик и назову его «icon.bell».

• Я выбираю этот дом и назову его «icon.100».
• Я выбираю это сердце и назову его «icon.120».
• Я выбираю этот хлам и назову его «icon.155».
• Я выбираю этот карандаш и назову его «icon.156».
• Я выбираю этот колокол и назову его «icon.172».

Плюсы и минусы

Если « агностический » слишком абстрактен для общения и запоминания, то « семантический » идет вразрез с корневым агностицизмом эталонных токенов (базовых токенов, примитивов, глобальных токенов).

Ссылочные токены обычно называются «font-weight.100» или «space.400». Названия цветов и значков «color.blue» и «icon.house» не вписываются в таксономию, не так ли?

В то время как «icon.100» позволяет мне добавить любую иконку внутрь, «icon.house» в 1000 раз более интуитивно понятен в работе. Тем не менее, я предпочитаю использовать первый вариант, « агностический ». Вот почему:

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

«Смысл» начнется со второго уровня токенов, «системных токенов».

2. Системные токены

Вот где все становится интереснее: решения.

Под решениями я имею в виду:

• Я решил использовать « rt.icon.house » или « rt.icon.100 » (rt = ссылочные токены) в качестве значка для Home , поэтому « st.icon.home » (st = системные токены).
• Я решил использовать « rt.icon.heart » или « rt.icon.120 » в качестве значка для избранного , поэтому « st.icon.favorite ».
• Я решил использовать « rt.icon.trash-can » или « rt.icon.155 » в качестве значка для удаления , поэтому « st.icon.delete ».
• Я решил использовать « rt.icon.pencil » или « rt.icon.156 » в качестве значка для редактирования , поэтому « st.icon.edit ».
• Я решил использовать « rt.icon.bell » или « rt.icon.182 » в качестве значка для уведомлений , поэтому « st.icon.notifications ».

Скорее всего, то, что вы будете использовать для информирования разработчиков или других дизайнеров, будет системными токенами, решениями: «Эй, Джон, пожалуйста, используйте st.icon.close для модального окна».

1. Более тщательно продумать роль каждой иконки.

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

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

2. Более структурированный, масштабируемый и удобный набор иконок.

Чтобы объяснить это преимущество, давайте вспомним некоторые повторяющиеся ситуации:

Проблема 1: Вам не нравится значок крестика, и вы хотите заменить его на более тонкий.

Решение: вы открываете свой эталонный токен и заменяете/настраиваете внутреннюю форму.

Результат: все системные токены , указывающие на этот эталонный токен, теперь будут обновлены, а именно:

• Удалить (для действия по удалению элемента)
• Удалить (для действия по удалению элемента)
• Закрыть (для действия по закрытию элемента).
• Ошибка (вместе с сообщением об ошибке)

Решение. Вы создаете новый ссылочный токен « icon.trash », затем обновляете системный токен « icon.delete », чтобы указать новый «icon.trash» . Это сохранит удаление, закрытие и ошибку без изменений.

Результат 1: Любой компонент, который использует « icon.delete », теперь будет отображать корзину.

Как видите, вся эта потенциальная гибкость в какой-то момент пригодится. С другой стороны, стоимость первоначальных работ не является существенной.

Резюме…

Вы можете изменить один rt.icon и повлиять на все токены системы и компонентов, нацеленные на этот значок. Например , я меняю значок сердца на звезду.

Вы можете изменить один st.icon и повлиять на все токены компонентов, нацеленные на этот семантический элемент. EG «Избранное» теперь представлено звездочкой, а сердце используется для «нравится».

Вы можете изменить один ct.icon и повлиять только на очень конкретный компонент. EG Компонент карты в темном режиме будет использовать закрашенную звезду вместо обведенной, используемой в светлом режиме, для «избранного».

Токены Фигма

Плагин Figma Tokens недавно начал поддерживать «активы». С его помощью вы можете легко хранить свой логотип, изображения и иконографию в удаленном репозитории и ссылаться на них через плагин. Это позволит вам добавить изображение к фигуре в Figma одним щелчком мыши, гарантируя, что руководство по живому стилю сообщит о месте его хранения.

Тем не менее, по словам команды Figma Tokens, использовать эту функцию может быть слишком рано, поскольку работа еще не завершена:

«В настоящее время источник изображения должен иметь собственную проверку CORS (Cross-Origin Resource Sharing). На некоторых веб-сайтах это уже реализовано (например, Unsplash), но в противном случае вы можете поместить это за прокси-сервер CORS. Дополнительную информацию о CORS можно найти здесь . Мы добавим прокси-сервер CORS в будущем выпуске». Вот полная статья.