Создание компонента для иконок и управление их свойствами

Мы подготовили базу: теперь у вас есть оптимизированные SVG-файлы с правильной структурой слоев. В реальном проекте на Next.js недостаточно просто перетаскивать иконки в макет. Вам нужен инструмент, который позволяет менять символ, размер и цвет за пару кликов, сохраняя чистоту кода.

Для этого мы создадим компонент иконки (Icon Wrapper). Это контейнер, который управляет поведением любой вложенной в него графики.

Логика компонента

В разработке на React/Next.js иконка часто передается как пропс (свойство) в компонент кнопки или навигации. Мы воссоздадим эту логику в Figma. Вместо поиска нужного SVG в слоях мы будем использовать один мастер-компонент, внутри которого реализована переключаемая иконка.

Механика строится на свойстве Instance Swap (замена экземпляра). Мы создаем «рамку», а затем меняем её содержимое на любую иконку из библиотеки.

Как показано на Схеме 1, такая структура позволяет централизованно управлять размерами и цветами, не меняя каждую иконку вручную.

Шаг 1. Создание Icon Wrapper

1. Создайте фрейм 24x24 px.
2. Поместите внутрь любую подготовленную иконку.
3. Отцентрируйте её по горизонтали и вертикали.
4. Нажмите Cmd + Opt + K, чтобы создать компонент. Назовите его _Icon/Base. Префикс _ скроет технический компонент из общей библиотеки.

Шаг 2. Настройка переключаемой иконки

Добавим возможность выбора символа.

1. Выделите вложенный экземпляр иконки внутри мастер-компонента.
2. В правой панели рядом с названием иконки нажмите кнопку Create component property и выберите Instance Swap.
3. Назовите свойство Icon.

Теперь при использовании компонента выбор иконки доступен на верхней панели свойств — «проваливаться» в слои больше не нужно.

<Button 
  label="Отправить" 
  icon={<IconName />} // Аналог Instance Swap в Figma
/>

Шаг 3. Управление размером через переменные

Использовать жесткие размеры (16, 24, 32) неудобно для масштабирования системы. Мы свяжем размер контейнера с числовыми переменными (Variables).

1. Откройте панель Local Variables.
2. Создайте коллекцию Dimensions и добавьте токены: size/sm (16), size/md (24), size/lg (32).
3. Выделите _Icon/Base и привяжите ширину и высоту к соответствующей переменной.

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

Шаг 4. Семантический цвет

Чтобы иконка в Next.js корректно реагировала на контекст (например, становилась серой в состоянии disabled), привяжите её цвет к семантическим токенам.

Сравнение 1 показывает разницу в подходах к покраске.

Практическое упражнение

Проверьте компонент на отказоустойчивость.

Мы создали гибкий атом системы. В следующей теме мы перейдем к композиции компонентов: объединим иконки и токены в адаптивные карточки и элементы навигации для вашего приложения.