Как поменять цвет иконки в фигме
Перейти к содержимому

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

  • автор:

Как сохранить цвета иконок в компонентах различных вариантов?

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

  • Вопрос задан более года назад
  • 723 просмотра

1 комментарий

Простой 1 комментарий

andreybarantsev

Андрей Баранцев @andreybarantsev
Хороший способ без использования масок: https://www.youtube.com/watch?v=kola_gyzepM
Решения вопроса 1

melpnz

Степан Воеводин @melpnz Куратор тега Figma
UX/UI дизайнер

К сожалению, пока самый оптимальный вариант через маску внутри иконки, потому что не нужно плодить лишних вариантов и всё работает стабильно.

63c69d4e1242d347921089.png

У самого каждая иконки хранятся в таком виде:

63c69d8151ec1556247197.png

Главное не забывать слою с цветом ставить Scale, чтобы нормально масштабировалось.

Зато результат стабилен:

Раскидать слой с цветом и наложить маску на 60 иконок заняло не более 30 мин. Зато теперь теперь не нужно держать в голове какой должен тут быть цвет и каждый раз из-за этого нервничать. Но естественно усложнилась передача иконок в разработку, но тут вообще оптимально заранее выгружать пак svg иконок и передавать их архивом.

Ответ написан более года назад
Нравится 2 4 комментария

Fors-X

Vladimir @Fors-X Автор вопроса

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

Я решил не заморачиваться с масками и запилил 2 стопки иконок с разными цветами. НО это не лучшее решение

Ждем от фигма какое то другое решение

melpnz

Степан Воеводин @melpnz Куратор тега Figma

согласен, что ни один из вариантов не идеальный. Но у маски в этом случае преимущество, что самому удобнее так применять. А для разработки можно сделать один раз выгрузку всех иконок, обжать через SVGO и положить в отдельный репозиторий на Гитхабе. И уже ссылаться туда.

Что касательно Figma, сам жду когда они разродятся сделать у Properties компонента изменение цвета.

Fors-X

Vladimir @Fors-X Автор вопроса

Степан Воеводин, согласен. Также жду не дождусь когда они папки придумают. А то лежат куча файлов все в одном месте как на помойке, хрен найдешь ))

melpnz

Степан Воеводин @melpnz Куратор тега Figma

Fors-X, так папки есть) просто на бесплатной версии они не доступны. А с подпиской в командном проекте можно создавать сколько угодно.

Ответы на вопрос 2
This_Urban @This_Urban

63ee92ec42172245754953.png

Сам вектор иконки (шейп внутри компонента) у всех иконок назовите одинаково, например Vector. Тогда не будет слетать цвет при замене компонента иконки.

Изменить можно сразу массив векторов в компонентах иконок,
выделив их и переименова все через СMD+R or CTRL+R.

Ответ написан более года назад
Комментировать
Нравится 1 Комментировать

andreybarantsev

Андрей Баранцев @andreybarantsev

Если иконка стоит внутри другого компонента, который имеет состояния, то из иконок также нужно сделать сет со всеми состояниями (normal, hover итд).

Ответ написан более года назад

Fors-X

Vladimir @Fors-X Автор вопроса

Привет, спасибо за ответ, пробовал так делать, не работает, стоит только изменить иконку на другую, перекрашивается в мастер цвет иконки

Как поменять цвет PNG иконки в Figma?

Иконка канала Сделай Сам на 100%

Простое и быстрое решение если вам необходимо изменить цвет вашей PNG картинке. Но настоятельно советую иконки использовать только в векторном формате. Это видео на случай, если вариантов больше нет, но цвет у картинки надо поменять. _____ Научиться делать сайты с нуля на Tilda — https://bykorolev.org/onesite _____ Моя деятельность: Услуги агентства — http://korolev.agency/ Онлайн-школа — https://bykorolev.org/ Купить мою книгу — https://ridero.ru/books/vzlom_konversii _____ Я в социальных сетях: Инстаграм — https://www.instagram.com/bykorolev/ Телеграм — https://tmgo.me/bykorolev Вконтакте — https://vk.com/rinatkorolev

Показать больше

Войдите , чтобы оставлять комментарии

Как изменить цвет PNG иконки в Figma

Довольно популярный вопрос, как у новичка, так и у профессионала — как же в этой долбанной фигме пенять цвет png иконки?

Да, действительно, поменять цвет растровой иконки совсем не просто, ведь фигма у нас векторная и приспособлена использоваться SVG иконки, а там все меняется довольно быстро и просто. Но пнг — это растр, фигма не дружит с растром, но способ наложить другой цвет на иконку есть. Он не такой простой, как в фотошопе, но тем не менее существует

Заходи на телеграмм канал — там еще больше полезного

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

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

Как покрасить одну png фигуру таким же цветом, как другую в figma?

6496c39d144df070792336.png

У меня есть png фигура которая имеет следующий цвет, как я могу скопировать этот цвет для другой похожей фигуры?

  • Вопрос задан 24 июн. 2023
  • 244 просмотра

Комментировать

Решения вопроса 0

Ответы на вопрос 1

pozZzitiv

Дизайнер и перфекционист

6496c52cedfe9902393123.png

PNG растровый формат и перекрасить в Фигме напрямую нельзя, но можно схитрить через режимы наложения или маски.
Если, речь о какой-либо произвольной фигуре с однородной заливкой цветом, то можно сделать маску по форме пнг-файла с цветной фигурой внутри.

Если же нужно как-то перекрасить части растрового изображения, то либо цветокоррекция режимами наложения может помочь, либо какие-то плагины, если они есть, либо придётся обрабатывать картинку в растровом редакторе и уже потом загружать в Фигму.

PS Если бы показали пример конкретного изображения и/или приложили файл с ним, то было бы удобнее отвечать, не пытаясь угадывать =)

Ответ написан 24 июн. 2023

Комментировать

Нравится Комментировать

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *