Skip to main content

Hi everyone!


I was updating a file and just noticed this for the first time in a while.


The case:


I have a collection of Icons, each one being a component isolated. They are all black.


I also have an Icon Action component that is basically one of those Icons with auto-layout and some padding, and I kept the original icon color. In that case, I use an “Icon Placeholder”, a dashed circle or a grid. So, when I’m really using it, I just swap the icon placeholder instance to the desired one.


Let’s imagine that, for no substantiated reason, the icon color should be changed from black (original) to red. The logic path is made this change on the master by electing that Placeholder Icon on Icon Action component and changing the color, right?


Not exactly.


All the Icons swapped inside the Icon Action, still black (original icon color).

But at the same time, if I change the Icon color to blue for example, those swapped icons became blue.


I couldn’t find a way around this. Not even to just reset the fill and keep the instance swapped.


Example in video:




File:


Figma – 14 Dec 23

If you know any hack to not go through this again, please share!

My nightmare is updating a thousand of instances just because of this 😦


If there is any feature request about this, share too o/


Thanks!

Adding comment to hear potential solutions - I ran into this recently as well when building out designs for a new app from scratch (icons nested the same way) and tweaking colors through normal design process.

Hi. I bring some news to this case.


For some, it can be quite obvious, but I’ll share anyway.


CleanShot 2023-12-15 at 11.39.24@2x


I did some tests and experiments (all on previously mentioned file).


The best solution so far is getting instances of all icons and creating another components without detaching them. So we’ll have the “root icons” that serves generic purpose and it’s standalone. Also, we’ll have “Icons for Buttons/Components”, that serves this specific purpose of being inside another components.


In my example, I changed the color not inside the button master, but the whole “Icons for Button”, and it got through the button master and instances.


So, the conclusion is keep “re-componentized” versions in all colors or for group of components (icon buttons and normal button probably have the same visual, for example).

Example:



  • Black/Default

  • Brand Primary (re-componentized)

  • White Primary (re-componentized)


In that way we can isolate the usage, making changes that affects specific componentes and their instances.


Since it isn’t the best way from my point of view, I’ll keep studying this.

Reply


Terms & ConditionsCookie settings