How to preserve icon color override and size?

I’m having a hard time understanding what Rogie’s set up offers that is different or better than using overrides and swapping with a simple flattened vector:

Screen Shot 2021-11-24 at 8.14.47 AM

This :point_up: is not a union, it’s just a vector in a main component frame. The main component is named after the shape, and the vector nested within is named “Icon”, and this naming structure is what allows us to override an icon’s color (at the “Icon” layer level), swap the component with another, and that overridden color will persist after the swap is made.

Here’s an example of this happening when the icon is nested inside a component like a button. I used Rogie’s file in this example:

icon color swap

:heavy_check_mark: The pink color override persisted after I swapped because the vector layer inside the icon component shared the same name and structure.
:heavy_check_mark: The size of the icon persisted after I swapped because it’s following the size I set in my button component. All the original icons in Rogie’s file are 39x39px, and you can see I shrunk this down to 21x21px for my button component.

If I’m misunderstanding the use case for Rogie’s method I’d appreciate someone letting me know :pray: I was surprised to see this thread for a lot of the reasons folks have already mentioned: this method reminds me of what had to be done in Sketch, and I very much don’t want to return to that world :sweat_smile:

If folks would find it helpful, here’s a view-access link to the Figma file I used to create those screenshots and GIFs to get a closer look at the layers and whatnot.

5 Likes