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

Question

[Vladimir]

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

Comments

[Андрей Баранцев]

Хороший способ без использования масок: https://www.youtube.com/watch?v=kola_gyzepM

Answer 1

[Степан Воеводин]

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

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


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


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


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

Comments

[Vladimir]

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

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

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

[Степан Воеводин]

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

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

[Vladimir]

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

[Степан Воеводин]

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

Answer 2

[This_Urban]

Все куда проще.

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

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

Answer 3

[Андрей Баранцев]

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

Comments

[Vladimir]

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