Работа с иконками: Оптимизация и создание библиотек

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

Готовим иконки для Figma

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

1. Формат SVG. Всегда используйте SVG (Scalable Vector Graphics). Это векторный формат, который масштабирует иконки без потери качества на любых разрешениях.
2. Оптимизация SVG.
   • Удалите лишнее. Перед экспортом убедитесь, что в SVG-файле нет скрытых слоев, пустых групп или метаданных. Векторные редакторы (Adobe Illustrator, Sketch, Affinity Designer) часто добавляют лишний код, который увеличивает размер файла и может вызвать проблемы в Figma.
   • Объедините контуры. Если иконка состоит из нескольких пересекающихся фигур, объедините их в один составной контур (Compound Path) или группу. Это упростит управление цветом и свойствами.
   • Преобразуйте текст в кривые. Если в иконке есть текст, обязательно преобразуйте его в кривые, чтобы избежать проблем со шрифтами.
3. Единый размер артборда/фрейма. Экспортируйте иконки с квадратным артбордом (например, 24x24px, 16x16px), даже если сама иконка не заполняет его полностью. Это поможет поддерживать единообразие размеров иконок в компонентах.
4. Единообразная толщина линий. Если иконки выполнены в линейном стиле, убедитесь, что толщина линий везде одинакова. Это критично для визуальной гармонии.

Совет: Для оптимизации SVG используйте онлайн-инструменты, например SVGOMG. Они удаляют ненужный код и уменьшают размер файла.

Создаём иконки-компоненты в Figma

Подготовили иконки? Теперь превратим их в компоненты Figma для централизованного управления и создания библиотеки.

1. Импортируйте SVG. Перетащите SVG-файлы прямо в Figma или используйте File > Place Image/Video.
2. Создайте компонент. Выберите импортированную иконку и нажмите Shift + Alt + K (или Shift + Option + K на Mac) или кликните правой кнопкой мыши и выберите Create Component.
3. Назовите компоненты. Используйте логичную иерархическую систему именования, чтобы иконки было легко находить. Например:
   • Icon/24px/Arrow/Left
   • Icon/16px/User/Profile
   • Icon/Social/Facebook Это позволит группировать иконки по размеру, категории и названию в панели ассетов.
4. Настройте цвет.
   • Убедитесь, что цвет иконки установлен как Fill (заливка), а не Stroke (обводка), если это не линейная иконка.
   • Для гибкости оставьте цвет иконки нейтральным (например, чёрным или тёмно-серым). Пользователи смогут легко переопределять его, используя стили цвета, которые вы создали ранее.
   • Если иконка имеет несколько цветов, убедитесь, что каждый из них можно переопределить.

Организуем библиотеки иконок

Эффективная организация иконок в библиотеке Figma — ключ к удобству использования и масштабированию дизайн-системы.

1. Отдельный файл для иконок. Рекомендуем создать отдельный файл Figma, который будет содержать только мастер-компоненты иконок. Это упрощает управление, обновление и публикацию.
2. Страницы для категорий. Внутри файла иконок можно использовать страницы для группировки иконок по категориям (например, "Навигация", "Действия", "Социальные сети", "Интерфейс").
3. Опубликуйте библиотеку.
   • Откройте файл с иконками.
   • Нажмите на иконку "Assets" (Ассеты) в левой боковой панели.
   • Нажмите на иконку книги (Library) в правом верхнем углу панели "Assets".
   • Включите переключатель рядом с названием вашего файла, чтобы опубликовать его как библиотеку.
   • Обязательно добавьте описание изменений при каждом обновлении библиотеки.

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

Практическое задание

1. Найдите набор иконок. Скачайте бесплатный набор иконок в формате SVG (например, с Flaticon или The Noun Project).
2. Оптимизируйте иконки. Используйте SVGOMG или другой инструмент для оптимизации нескольких иконок из набора.
3. Создайте файл библиотеки. В Figma создайте новый файл и назовите его, например, Design System/Icons.
4. Импортируйте и создайте компоненты. Импортируйте оптимизированные иконки в этот файл. Превратите каждую иконку в мастер-компонент, используя логичную систему именования (например, Icon/24px/Home, Icon/24px/Settings).
5. Организуйте на страницах. Если иконок много, разделите их по смысловым страницам внутри файла.
6. Опубликуйте библиотеку. Опубликуйте этот файл как библиотеку Figma.

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