Как изменить цвет иконки в фигме

Изменение цвета иконки в Figma — базовая, но критически важная задача для дизайнеров интерфейсов. Это необходимо при адаптации элементов под разные состояния (активное/неактивное), темы (светлая/тёмная) или брендбук. К счастью, Figma предоставляет несколько эффективных способов сделать это без необходимости редактировать сам вектор в графическом редакторе. Процесс зависит от типа иконки: является ли она простым вектором, компонентом, SVG-файлом или частью библиотеки символов.

Типы иконок в Figma

Перед тем как менять цвет, важно определить, с каким типом иконки вы работаете. От этого напрямую зависит подход к редактированию. В Figma можно встретить четыре основных категории: простые векторные объекты, компоненты, импортированные SVG и символы из библиотек.

Простые векторные иконки — это группы путей, созданных вручную или скопированных из других источников. Они не привязаны к библиотекам и не имеют статуса компонента. Такие иконки легко редактируются: достаточно выбрать нужный контур и изменить его заливку.

Компоненты — это переиспользуемые элементы, часто входящие в дизайн-системы. Иконки в виде компонентов могут быть защищены от изменений через параметры «переопределения» (overrides). Например, если цвет задан как стиль слоя, вы не сможете просто так поменять fill — нужно сначала разрешить переопределение.

Импортированные SVG-файлы ведут себя как группы векторов. После импорта они могут требовать разгруппировки, чтобы получить доступ к внутренним путям. Иногда цвет в таких файлах «зашит» на уровне атрибутов SVG, что ограничивает гибкость.

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

Как определить тип иконки

• Выберите иконку и посмотрите панель свойств справа.
• Если есть значок компонента (кубик) — это экземпляр. При наведении появится надпись «Instance».
• Если видите раздел «Vector» с пунктами «Fill», «Stroke» — это векторный объект.
• Если иконка не реагирует на изменение цвета, проверьте, не заблокированы ли слои или не используется ли стиль слоя.

Как изменить цвет простого вектора

Самый простой случай — когда иконка представляет собой обычный векторный объект. Здесь процесс сводится к нескольким кликам.

Сначала выделите иконку с помощью инструмента «Selection» (V). Убедитесь, что выделена вся группа, а не отдельный путь. Если иконка состоит из нескольких слоёв, Figma покажет их в левой панели слоёв. Раскройте группу, чтобы увидеть все вложенные объекты.

Далее перейдите в панель свойств справа. Найдите секцию «Paint» (Заливка). Она обозначается квадратом с точкой внутри. Нажмите на текущий цвет и выберите новый из палитры. Можно ввести HEX-код вручную, использовать eyedropper (пипетку) или выбрать цвет из библиотеки стилей.

Если иконка содержит обводку (stroke), измените и её цвет отдельно. Обратите внимание: иногда иконки используют комбинацию заливки и обводки для достижения нужного визуального эффекта. Изменение только одного параметра может исказить восприятие.

Пошаговый алгоритм

1. Выделите иконку с помощью V.
2. Убедитесь, что в правой панели активна вкладка Design.
3. Найдите параметр Fill и щёлкните по цветовому квадрату.
4. Выберите нужный цвет из палитры, введите HEX или используйте пипетку.
5. При необходимости измените Stroke Color аналогичным образом.
6. Проверьте результат в разных масштабах (100%, 200%).

Работа с компонентами и экземплярами

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

Когда вы вставляете экземпляр компонента, Figma блокирует некоторые свойства. Цвет может быть задан как «locked override», то есть недоступен для изменения. Чтобы проверить это, выберите иконку и посмотрите на панель свойств. Если рядом с Fill стоит замочек — вы не можете его изменить.

Решение зависит от того, имеете ли вы доступ к мастер-компоненту. Если да — откройте его (двойной клик), найдите слой с заливкой и включите возможность переопределения. Для этого щёлкните по трём точкам рядом с названием свойства и выберите «Make overridable».

Если доступа к мастер-компоненту нет, остаётся два варианта: разорвать связь с компонентом или продублировать его. Разрыв связи делается через контекстное меню: клик правой кнопкой → Detach Instance. После этого иконка становится обычной группой, и вы можете менять цвет свободно.

Альтернатива: создание собственного компонента

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

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

Использование Replace Image и SVG

Figma позволяет быстро заменять изображения и иконки через функцию «Replace Image». Это особенно полезно, если вы работаете с загруженными SVG-файлами.

Если у вас есть SVG-иконка с определённым цветом, вы можете импортировать её в Figma. После импорта файл станет группой векторов. Выделите группу, разгруппируйте (Ctrl+Shift+G), чтобы получить доступ к отдельным путям.

Теперь вы можете изменить цвет каждого пути. Однако есть нюанс: если в SVG цвет задан через атрибут style=»fill:#fff», Figma может игнорировать его и использовать собственные стили. Лучше заранее очистить SVG от inline-стилей перед импортом.

Функция «Replace Image» работает и с растровыми изображениями, но для иконок она менее применима. Зато вы можете использовать её для быстрой замены одной SVG-иконки на другую: выберите иконку → кликните по кнопке «Replace» в правой панели → загрузите новую SVG-файл.

Оптимизация SVG перед импортом

• Используйте инструменты вроде SVGO или Figma’s built-in SVG cleaner.
• Удалите лишние теги: <title>, <desc>, inline-стили.
• Убедитесь, что fill задан как «currentColor» — это позволит управлять цветом через Figma.
• Проверьте viewBox — он должен соответствовать размеру иконки.

Создание динамических иконок с помощью Variants

Для продвинутых пользователей Figma предлагает мощный инструмент — Variants (варианты). Он позволяет создавать иконки с разными цветами в одном компоненте, переключаясь между ними через выпадающее меню.

Представьте, что у вас есть иконка «лайк», которая может быть серой (неактивной) и красной (активной). Вместо двух отдельных компонентов вы создаёте один компонент с двумя вариантами.

Сначала создайте две иконки с разными цветами. Превратите каждую в компонент. Затем объедините их в один фрейм и нажмите «Create Component Set». Теперь в правой панели появится выпадающий список с названиями ваших вариантов.

Настройте параметры вариантов: например, добавьте property «Color» со значениями «Default» и «Active». Теперь, когда вы вставляете эту иконку, вы можете быстро переключать цвет через панель свойств.

Пример структуры компонента

• Component Set: «Notification Icon»
• Variants:
  • State: Default / Active
  • Color: Gray / Red / Blue
  • Badge: Hidden / Visible
• Итог: 6 комбинаций в одном компоненте

Ошибки и как их избежать

Даже опытные дизайнеры допускают ошибки при работе с цветом иконок. Ниже — самые распространённые проблемы и способы их решения.

Первая ошибка — попытка изменить цвет через Opacity. Это не меняет сам fill, а лишь делает иконку прозрачной. Результат: на тёмном фоне иконка теряется. Всегда используйте Fill Color, а не прозрачность, чтобы контролировать цвет.

Вторая — игнорирование контрастности. Согласно стандартам WCAG, минимальный контраст между иконкой и фоном должен быть 3:1 для крупных элементов и 4.5:1 для мелких. Используйте плагины вроде «Contrast Checker» для проверки.

Третья — работа с растром вместо вектора. Если вы используете PNG-иконку, изменить её цвет нельзя без потери качества. Всегда отдавайте предпочтение SVG.

Чек-лист перед публикацией

• Проверено: иконка — вектор, а не растровое изображение.
• Подтверждено: цвет соответствует дизайн-системе.
• Протестировано: иконка читаема на всех фонах (светлом, тёмном, градиенте).
• Убедились: компонент позволяет переопределение, если нужно.
• Замеряли: контрастность соответствует WCAG.

Экспорт и совместимость

После изменения цвета важно правильно экспортировать иконку. Figma позволяет экспортировать в PNG, SVG, JPG. Для иконок рекомендуется использовать SVG — он масштабируется без потерь и сохраняет прозрачность.

При экспорте SVG убедитесь, что в настройках выбрано «Include ‘id’ attributes» и «Minify». Также можно включить «Show code» для просмотра внутреннего кода. Это поможет разработчику понять, какие стили применены.

Если иконка используется в dark mode, экспортируйте обе версии — светлую и тёмную. Или создайте компонент с вариантами, чтобы разработчик мог управлять состоянием через код.

Экспертное мнение

Современные дизайн-системы всё чаще используют динамические иконки. Например, Material Icons от Google позволяют менять цвет через CSS-переменные. В Figma это можно смоделировать с помощью Variants и стилей.

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

Вопросы и ответы

Заключение

Изменение цвета иконки в Figma — простая задача при понимании структуры объектов. Ключ — определить тип иконки: вектор, компонент, SVG или экземпляр. От этого зависит метод редактирования.

Главное — не действовать вслепую. Проверяйте свойства слоя, учитывайте контекст использования и соответствие дизайн-системе. Используйте современные инструменты, такие как Variants, чтобы создавать гибкие, масштабируемые решения.

• Определяйте тип иконки до начала редактирования.
• Для векторов используйте панель Fill в Design-вкладке.
• Разрывайте связь с компонентом только при необходимости.
• Применяйте Variants для создания динамических иконок.
• Всегда проверяйте контрастность и совместимость с фоном.