Как покрасить иконку в фигме

В Figma покрасить иконку можно несколькими способами: через панель свойств с помощью инструмента Recolor, вручную изменив цвет заливки или обводки, либо применив стили. Главное — убедиться, что иконка разгруппирована и состоит из векторных контуров, а не изображения.

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

Векторные и растровые иконки: как определить тип

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

Если вы импортировали иконку из PNG или JPG, скорее всего, она растровая. Такую иконку нельзя покрасить стандартными методами. Её можно только замаскировать цветом или применить эффекты вроде Tint, но результат будет ограниченным. Векторная иконка, напротив, открывается для глубокого редактирования.

Определить тип иконки просто: выберите объект и посмотрите на панель свойств справа. Если в разделе «Fill» есть параметр цвета — перед вами вектор. Если же вы видите только опции типа «Image fill», значит, это растровое изображение. Также векторные объекты можно редактировать с помощью Pen Tool после двойного клика.

Откуда берутся нередактируемые иконки

Многие бесплатные иконки из интернета скачиваются в виде группированных компонентов или символов (Symbols), которые защищены от изменений. Иногда авторы блокируют слои, чтобы сохранить целостность дизайна. Другая частая причина — использование текстовых глифов вместо векторных фигур. Например, иконка может быть шрифтом, и тогда для смены цвета нужно менять цвет текста, а не заливку.

• SVG-файлы могут содержать группы, маски, эффекты — всё это требует разборки.
• Иконки из библиотек вроде Material Icons или FontAwesome часто привязаны к стилям.
• Компоненты из Figma Community могут быть экземплярами, которые нельзя редактировать напрямую.

Подготовка иконки к редактированию

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

Первый шаг — разгруппировать объект. Выделите иконку и нажмите Ctrl+Shift+G (Cmd+Shift+G на Mac). Повторяйте до тех пор, пока не исчезнут все уровни группировки. После этого проверьте, есть ли внутри составные фигуры: круги, прямоугольники, пути. Если да — вы на правильном пути.

Затем убедитесь, что иконка не заблокирована. В правом верхнем углу панели слоёв найдите значок замка. Если он активен — щёлкните, чтобы разблокировать. Также проверьте, не является ли объект экземпляром компонента. Экземпляры обозначаются серым значком в панели слоёв. Чтобы редактировать их, нужно сделать «Detach from component» — отсоединить от компонента.

Когда нужна конвертация в вектор

Если иконка — это изображение, но вы уверены, что оригинал был векторным, можно попробовать использовать автоматические конвертеры. Например, онлайн-сервисы вроде Vectorizer.io или Image Trace в Adobe Illustrator помогут преобразовать PNG в SVG. После импорта в Figma такая иконка станет редактируемой.

Однако будьте осторожны: автоматическая трассировка может создать слишком много лишних точек, что затруднит работу. В таком случае потребуется ручная очистка с помощью Node Tool (A). Удалите дублирующиеся узлы, упростите контуры и объедините близкие фигуры.

Методы изменения цвета иконки

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

Наиболее распространённый способ — изменение заливки (Fill) через панель свойств. Выделите нужный элемент, найдите раздел Fill, кликните по квадратику цвета и выберите новый оттенок. Если иконка состоит из нескольких фигур, повторите операцию для каждой. Это удобно при точечной настройке, но долго при работе с большими наборами.

Более быстрый вариант — использование стилей. Создайте цветовой стиль (например, «Icon/Primary») и примените его. Тогда при изменении стиля все связанные элементы обновятся автоматически. Это особенно полезно в дизайн-системах.

Изменение обводки (Stroke)

Некоторые иконки выполнены не заливкой, а обводкой — например, outline-стиль. В этом случае нужно менять не Fill, а Stroke. На панели свойств найдите раздел Stroke, выберите цвет и убедитесь, что толщина линии (Weight) соответствует вашим требованиям.

Если иконка содержит и заливку, и обводку, изменяйте оба параметра. Иногда дизайнеры забывают про обводку, и после смены цвета часть иконки остаётся старой. Особенно это заметно на иконках типа «галочка» или «стрелка».

Как использовать инструмент Recolor

Один из самых мощных инструментов Figma — Recolor. Он позволяет массово заменить цвета в сложных векторных объектах, включая иконки с несколькими слоями. Чтобы использовать Recolor, объект должен быть векторным и не содержать растровых элементов.

Активируйте инструмент, выделив иконку и нажав на значок «Recolor» в верхней панели (или через Ctrl+Alt+C). Откроется диалоговое окно, где вы увидите все текущие цвета, используемые в иконке. Кликните по любому цвету и выберите новый из палитры, библиотеки стилей или введите HEX-код.

Recolor особенно эффективен при работе с библиотеками. Например, вы скачали набор иконок в синем цвете, но вам нужен зелёный. Вместо ручного изменения десятков фигур — одна операция, и весь набор обновлён. Инструмент умён: он распознаёт цвета даже если они называются по-разному, но имеют одинаковый HEX.

1. Выберите иконку или группу иконок.
2. Нажмите кнопку Recolor в верхней панели.
3. В диалоговом окне кликните по исходному цвету.
4. Выберите новый цвет из палитры или стилей.
5. Подтвердите изменения — Figma автоматически обновит все совпадающие элементы.

Ограничения Recolor

Инструмент не работает с растровыми изображениями, текстом, компонентами, которые не были подготовлены к перекрашиванию. Также Recolor может не распознать цвет, если он задан как Gradient или Image Fill. В таких случаях нужно вручную заменить тип заливки на Solid.

Если вы видите, что Recolor неактивен, проверьте:

• Не является ли объект экземпляром компонента.
• Есть ли внутри растровые слои.
• Не заблокированы ли слои.
• Применены ли эффекты, мешающие анализу цвета.

Работа со стилями и библиотеками

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

Создайте цветовой стиль: выделите элемент, измените Fill, затем в правом нижнем углу панели свойств нажмите на значок «+» рядом с «Local styles». Назовите стиль, например, «Icon/Active», и примените его ко всем активным иконкам. Теперь при изменении стиля все связанные объекты обновятся автоматически.

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

Создание компонентов с цветовыми вариантами

Если вы часто используете одни и те же иконки в разных цветах, создайте компонент с вариантами (Variants). Например, иконка «heart» может иметь состояния: default, hover, active, disabled — каждый с своим цветом.

Чтобы настроить Variants:

• Создайте несколько версий иконки с разными цветами.
• Выделите их все и нажмите «Create component set».
• Настройте свойства, например, «State» = default/hover/active.
• Теперь при вставке экземпляра можно быстро переключать цвет через панель свойств.

Типичные ошибки и как их избежать

Даже опытные дизайнеры иногда допускают ошибки при работе с иконками. Вот самые распространённые:

• Попытка покрасить растровое изображение как вектор. Результат — отсутствие реакции на изменение Fill. Решение — импортировать SVG или конвертировать изображение.
• Игнорирование группировки. Многие не разгруппировывают иконку и пытаются изменить цвет всей группы. Но если внутри несколько фигур с разными цветами — результат будет непредсказуемым.
• Изменение цвета экземпляра без отсоединения. Если не отключить связь с компонентом, изменения не сохранятся. Всегда используйте Detach при необходимости правки.
• Применение Recolor к тексту. Текстовые иконки (например, через иконочные шрифты) не поддаются Recolor. Цвет меняется только через Text Color.

Проверочный чек-лист перед покраской

Перед тем как менять цвет, пройдите по этому списку:

1. Убедитесь, что иконка векторная (проверьте панель свойств).
2. Разгруппируйте объект (Ctrl+Shift+G).
3. Проверьте, не заблокирован ли слой.
4. Если это экземпляр — отсоедините от компонента.
5. Проверьте наличие нескольких заливок или обводок.
6. Примените Recolor или вручную измените Fill/Stroke.

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

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

Особенно актуально это в условиях тёмной темы, A/B-тестирования или ребрендинга. Одно изменение в библиотеке — и тысячи иконок по всем экранам становятся новыми.

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

Заключение

Изменение цвета иконки в Figma — простая задача при правильном подходе. Ключевые принципы: работайте с векторными объектами, разгруппируйте перед редактированием, используйте стили и инструмент Recolor. Эти шаги превращают рутину в быстрый и предсказуемый процесс.

• Всегда проверяйте тип иконки: вектор или растр.
• Разгруппируйте и отсоедините от компонента перед правкой.
• Используйте Recolor для массового изменения цвета.
• Применяйте цветовые стили для согласованности.
• Организуйте иконки в библиотеки с вариантами состояний.