Override Preservation On Nested Icons Youtube Learn how to preserve color overrides on nested icon components.figma is free to use. sign up here: bit.ly 3msp0ov. Hi, i’m building a big library and have a popular problem with icon color override which is not supported. i’m have read a lot of topics and following them, unfortunately, it doesn’t work all the time in my case. i created a button variant: a button with icons. then i’m creating an instance and i’m replacing the icon symbol. the color keeps override. hurra! i’m changing the state.
Nested Symbol Overrides In Sketch 41 Inside Design Blog Same names everywhere works for me like was mentioned here or in “new” video tutorial (override preservation on nested icons ) for classic button. but then i put buttons into another component like “button navigation”. Checks for override preservation. with this launch, figma is also changing the way overrides are preserved. figma will now preserve all supported overrides, including overrides to fill and stroke properties, and blur or shadow effects. this will apply when swapping between instances, as well as selecting different variants. For me variant component icons are not honoring color overrides. this is probably a bug i can’t see it being an acceptable implementation exception. the use case is crystal, icon button variant (of buttons) swap icon, icon should still be same color as variant design main. The problem is that ui icon switches its icon set depending on the ui state of its ancestors. but ui state active on the element further up the hierarchy appears to take precedence over ui state default on its immediate parent, resulting in an icon that typically blends in with its background.
Preserve Icon Color Overrides Figma For me variant component icons are not honoring color overrides. this is probably a bug i can’t see it being an acceptable implementation exception. the use case is crystal, icon button variant (of buttons) swap icon, icon should still be same color as variant design main. The problem is that ui icon switches its icon set depending on the ui state of its ancestors. but ui state active on the element further up the hierarchy appears to take precedence over ui state default on its immediate parent, resulting in an icon that typically blends in with its background. Technique i learned while using sketch and zeplin to build out a design system at scale, was to separate libraries, like icons, theming and layouts resulting… edryd sharp on linkedin: override. Overrides for text are often a large hurdle to jump over when starting your design system journey, but there are two main things we can do to reduce potential losses and maintain override preservation within our instances. “override preservation” is quite a mouthful, so let’s define that first. a generic input field. (large preview).
Comments are closed.