Как изменить цвет PNG иконки в Figma
Довольно популярный вопрос, как у новичка, так и у профессионала — как же в этой долбанной фигме пенять цвет png иконки?
Да, действительно, поменять цвет растровой иконки совсем не просто, ведь фигма у нас векторная и приспособлена использоваться SVG иконки, а там все меняется довольно быстро и просто. Но пнг — это растр, фигма не дружит с растром, но способ наложить другой цвет на иконку есть. Он не такой простой, как в фотошопе, но тем не менее существует
Сменил цвет черной png иконки на красный
Берешь пнг иконку, копируешь ее, создаешь из двух слоев маску. У верхнего слоя меняешь цвет на тот, который тебе нужно — наслаждаешься.
Даже можешь создать градиентную заливку, заливку фото — все что хочешь можно сделать с цветом пнг иконки таким способом.
Вот такой простой или не очень простой способ менять цвет у растровых элементов с прозрачным фотом в Фигма.
Иконки для Figma
Шаблон сайта для Figma. Тематика — продвижение диджея.
Как добавить иконку в фигме
Для того чтобы вставить иконку в фигму вам нужно:
- Скачать эту иконку в svg или растровом формате на ваш компьютер (png, jpg и др.)
- Перетащить иконки с вашего компьютера в рабочее поле программы Figma
Если вы используете растровый формат изображений, то вы можете использовать функцию Place Image (Ctrl + Alt + K).
Как в фигме поменять цвет иконки
Если ваша иконка в jpg, png или любом другом растровом формате, то цвет изменить не удастся.
Для того чтобы изменить цвет иконки в фигме (иконка в формате svg), нужно данную иконку выделить (выделить фрейм или сам векторный элемент), после этого в панели “Fill” меняете цвет у иконки.
Как перекрасить иконку в фигме в разные цвета?
Для этого вам нужно перейти в векторное редактирование (несколько раз кликните на иконку, чтобы появились опорные точки). После этого просто выделяете точки фигуры, которые вам нужно перекрасить и через панель Fill делаете это.
Редактируем иконки: раскрашиваем иконку SVG
Итак, вы скачали иконку SVG и обнаружили, что её надо немного изменить. В этой статье мы рассмотрим, как залить пустые части цветом.
Открываем иконку в Figma.
Исходник можно скачать по ссылке
Figma заливает один вектор одним цветом (либо одним градиентом). Если нам надо сделать заливку несколькими цветами, вектор надо продублировать.
Мы будем делать цветную иконку с контуром, поэтому продублируем заднюю часть и перейдем в режим редактирования (дважды кликаем по вектору, либо выделяем и жмем Enter).
Figma может залить только замкнутое пространство. Если есть разрывы, то заливка не будет видна.
Закрываем область для заливки с помощью пера: в режиме редактирования выбираем перо (P) и цепляясь к привзякам соединяем точки вокруг пустого пространства.
Незамкнутая область 
После правок
Выбираем инструмент заливки Paint Bucket (B).
Инструмент заливки в Figma
Наводим на область, которую надо залить, и кликаем.
Видео заливки
Меняем цвет заливки