Override preservation on nested icons

Learn how to preserve color overrides on nested icon components.
Figma is free to use. Sign up here: bit.ly/3msp0OV
____________________________________________________
Find us on ⬇️
Twitter: / figma
Instagram: / figma
LinkedIn: / figma
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #figmatips

[@natecooper01]

This is great! Naming conventions matter. That's one of my favorite things about component design and properties. The available features have everything to do with structure and names. Simple, but very flexible functionality.

[@petergrant6498]

This answered exactly the issue I was trying to resolve. Little deep-cut nuggets of product insight like this are invaluable. Please keep them coming!

[@ChristianBaptiste]

We use a simple hack where we have what we call "ColorIcon". This icon blends two components, a color component (basically a full-size shape component like 24 X 24 that holds the selection color value) and another component which is the icon we want to use (i.e. a floppy disc icon). The "ColorIcon" blends these two components as a mask of the color layer. And then we use nested component properties to make it easy to change the underlying icon (the floppy disc icon to any other icon). The reason why this works is that the color layer never changes its name of the layer (thus a similar idea). The main difference in the approaches is that we don't have to do extra work on each icon.

[@DarrinLin]

woah blast from the past cause that’s the same hack we used when we were still on sketch

[@tinawei9489]

This is very clever too!!!

[@g_higa]

​@@DarrinLin Could you please provide a screenshot or a file copy of this hack? I would like to understand better how this is structured. Thank you

[@cale971]

THANK YOU!!! Spent the whole day trying to figure this out and your the only person I found who explains it properly and also you're the only person who has figured it out. You're brilliant!!

[@tien8712]

its from figma team LMAO.

[@BigYoof]

I appreciate the video! This has been a struggle of mine while managing our icon library (material icons). My main complaint with this hack is that it forces you to detach the icons from the material design library and you lose the connection to the main component with the different icon styles. If you want to preserve an icon with the various style options, you then need to create a second version of the same icon which clutters up your icon library and the component search panel. Regardless, I will be making use of it for now until things improve. Keep up the good work!

[@simonedalena9419]

The issue is you should't use their library you should fork it and make sure that all icons preserve this so you do not lose that connection. This operation is obviously meant to be done in the icon library.

[@thiago_santarem]

I think what blew my mind the most was CMD + R to rename the layers... This whole time I've been using a plugin like a fool! 🤯

[@syphon583]

This is a great workaround. Thank you for sharing! Let me say that again, though. This is a great WORKAROUND. @Figma should not expect their users to have to manually restructure and rename all of their icons to make what should be a simple fix on their end. Sure, if a user has the material icon library, they can do this once and call it good. But that library is constantly updated with new and updated icons which means we'd have to do this every time there's an update. I'm fairly new to figma and I've been loving almost everything so far. But this is a serious bug that Figma needs to fix if they expect designers to properly and EASILY maintain design systems.

[@JakeDesaulniers]

Now that I've watched this it feels so obvious, like I should have already known. Thanks for sharing! This makes my life so much easier.

[@virginiadominguezcarrera8816]

I'm crying. This was a lifesaver for my design system. THANKS💥

[@Cuthalion999]

I´ve been struggling with this exact issue for days now. Thank you so much.

[@goldenvox]

Oh my gosh, thank you! This helped me solve a problem I actually had a few months ago, but now I know. Awesome!

[@dar00st33r]

Problem solved! Thank you for posting this as I need to address this within our design system. 🎉

[@tinawei9489]

This is so useful... I used to make icon set variants of different colours before. Now only one colour is enough!!!

[@rizkizfajar]

I found another way one month ago, you actually can solve this with naming your icons with naming conventions for example: Icons/ cart-fill, Icons/ Chat-fill. this will save your time. In my case I also put all the icons in a frame called icons too.

[@chloeatchue-mamlet6764]

This is presented like a universal solution, but it's very limited. You can't do this with duotone icons for example.

[@jswanson859]

I love this feature! Makes total sense. I will definitely be incorporating it into my workflow.

[@koenvanniekerk4231]

Nice! Exactly what I ran into the day before I saw this video. Thanks!

[@marselgaliullin]

Oh my God, I’m just shocked that this is how it works! Thanks for the video

[@id125_pichayaphulphean2]

Thanks for sharing! you are totally my life saver TTT

[@feelerino]

cool, but problem is: if I change the color of the source component at some point in the future, the instances won't update to the new color even though the structure of all icons is literally the same, same name, everything

[@dennis8636]

This requirement of consistent layer count and naming can't seriously be the official solution for color overrides

[@czerskip]

That's a nice hack. Still a hack, though. Figma should handle overrides on different levels (content, style) much better, to be honest. Only the very latest updates introduced the features the community has been begging for for years… How about opening the format btw? 🤣🤑

[@MR-DURO]

Grouping some of my icons using the UNION selection sometimes created strange merge where I would lose some of the vector element. In my case, I didn't need to maintain individual vector layers and decided using "Flatten Selection" (CMD-E) and it seems to be doing the trick for me.

[@lindaduong289]

Hey thanks I was wondering the same thing here!

[@oZenakos]

Many thanks for the video these tips saved me tons of time

[@dailydoseofleomessi9142]

This issue still persists if there's 2 or more layers of nesting. As soon as you change a component property (for example: different color) of an instance, the color gets messed up.

[@ttorres]

Exactly, why is no one else saying this?!

[@dinakarunia9892]

I'm struggling with this issue. Do you have some tips how to handle this without manually change the color? 😢

[@federicomolfino9904]

you saved my life. Thank you!

[@playbak]

Make sure your original icons in the library are a color that will NEVER be used in buttons (or any component with a nested icon). Use some tertiary or a color outside of your color system for the icon library, this will ensure icon color overrides work as intended.

[@mathieucartier4926]

Thank you!

[@donegan50]

I had no idea this is why overrides were not working with my icons.

[@IsaquePereira]

But if I need to update the icon color to red on the button's primary master, those swapped instances will not update to red, they will keep the last color (white). Is there a way to prevent that?

[@nophathaivasasmith3604]

Thanks a lot this save my life

[@SkrezaStudio]

thanks a lot .... it's makes me crazy from the day one

[@h4mil70n]

Thank you for sharing this as it works when designing, however with prototyping the instance returns to it's default color state. Do you happen to have a solution for that?

[@kevintuskey]

For each of the button variants, how is color the icon changed? Do you select a different fill color for the icon?

[@mischugo]

Nice explanation. Thank you. But, what is the best way to do this when using the Material Symbols plugin? Whenever I need an icon I have to "disassemble" and prepare it first? I already have as standard a number of 30 icons in two sizes (24 and 20) and each in gray and white... but sometimes I would have to replace an existing colored icon (light blue or green) with these. How do I get there an overwrite? Is that possible? Couldn't the Figma team maybe show more topics from their daily work as short videos. So, not how a feature works on its own, but how it works together with other objects. Overwrite, organize, flow, compatibility, autolayout hacks, grids ... Would be more than nice ;-)

[@likunakadagishvili9542]

⚡⚡⚡Heeeeeeelp !!!⚡⚡⚡if i have one vector shape and it does not unionize, then when swapping, it gets filled or gets some unwanted changes. As a solution, i duplicated so it gave me permission to Unionize and then it worked! But I believe there must be an easier solution to not have duplicated shapes in one icon. Help, please. 🙏

[@faithegwuenu]

Thanks for sharing 🤗

[@ArifMatubber-km4nv]

Thanks you so much and that was awesome

[@nasmith67]

this is not working for me using the Material Plugin icons. All icons have 1 sublayer - named = icon. In order to the the sublayers down to 1 I removed the "bounding box" from the icons and named the remaining (eponymous) layer "icon." Tried this with both the bounding box and removed. Please advise. Thank you!

[@sophiapatyk4993]

it doesn't work at all. if the icon is a single vector, then it works, but if you use Union for 2-3 vectors - then it doesn't work. I don't understand why

[@the_true_hier_to_the_sharingan]

Instead of creating a Union, Flatten (Ctrl + E) multiple vectors. Won't work if you use more than 1 color in the icon. For more than 1 color, aka, duotone icons, there is another short watch it.

[@alessandroviatore8119]

❤ thank you!!!

[@abirsomech]

If I decide the use a different color for the main component it will not update the icon instance, any thoughts?

[@giselevotre9560]

Great! thanks! :)

[@dinakarunia9892]

The issue still there when I use the 2nd or 3rd nesting. Please solve this issue immediately. I had to reset the variant property first, then start over the process to change the icon. This is super tiring and getting worst when I create the prototype. For example in a simple button with hover state. The color changing doesn't work when I hover the button, some time it works and most of the time is doesn't work at all 😵‍💫😵‍💫

[@hanihassan6957]

But still issuing on prototype, if I change the variant color

[@Thefrenchsearch]

THANKS!

[@001abhishekgautam6]

not working for me

[@1deplatt]

good stuff

[@dsandoval1]

How would you stucture your icons if some of them have one color and others have 2 or 3?

[@fernando219]

Is it possible to overwrite the stroke width of the icon, and keep it with the icon swap?

[@tallamariachi]

This is not working if you are using an external library

[@mat5844]

It's still not working for me :__ anyone else?

[@naikomichail]

Could you share the file?

[@welsewool]

Still a hack... Which ruins as soon as you use dual-tone icons Also it will be ruined if you use icons in variant, then master button and buttons as variants, which use icons

[@ludovicabonaldo]

It works even with dual tone icons. You need two vectors instead of one and rename them with two different names (like "stroke" and "fill", or "color1" and "color2")

[@welsewool]

@@ludovicabonaldo try to import all google icons and you will see. you have 5 styles, and when you want to switch from one style to another everything will be broken.

[@ludovicabonaldo]

@@welsewool really in a design system or project do you need all 5 styles of icons? try to import only the ones you need, importing even one set of all material design icons is useless and weighs down your file.

[@welsewool]

@@ludovicabonaldo we don't talk about user need, we talk about the place to improve without hacks. It's my user pain and there is a way to solve the issue. Do not ask user to adapt, help user!

[@rjabrm]

Not working 👎

[@TheTrueHarlequin]

Is this a new fix? Even with layers all named "Vector" before it did not do this.

[@azmodel]

I've been using Figma for several years and it has worked like this for as long as I remember. Honestly I thought this was a bug that turned out into a feature

[@JoshChadwick1]

Was this a subtle request for Google to clean up there icon library? 😂

[@rjabrm]

I don't get it.. 1. you still have layers after the union 2. you did Enter what?

[@greatndabai]

Yeah, you'll still have a layer after the union, but now you have only one layer in all the icon components. Then you rename the layers (using the same name for the layers in all the icon components)

[@azmodel]

You can have extra elements inside as long as the one you want to keep the changes has the same name.

[@naimurrahman8543]

First view 🥰

[@LegatoTube]

Yeah I'm not adjusting hundreds of icons. Come up with a better sooution, Figma

[@rmmixd]

Find an intern to do it for you! 😊

[@DarrinLin]

you wouldn’t have a job if figma did everything for you 💀

[@LegatoTube]

@@DarrinLin what a junior thing to say 💀

[@DarrinLin]

@@LegatoTube what a lazy thing to say 🤷🏻‍♂️

[@chetanRajputR]

I remember how I was creating Ui in photoshop before figma or xd

[@likunazation30]

⚡⚡⚡Heeeeeeelp !!!⚡⚡⚡if i have one vector shape and it does not unionize, then when swapping, it gets filled or gets some unwanted changes. As a solution, i duplicated so it gave me permission to Unionize and then it worked! But I believe there must be an easier solution to not have duplicated shapes in one icon. Help, please. 🙏