To reduce component weight, my design system team has been exploring using variable modes to toggle between different “variants” of a component, rather than just using variants. The benefit of this is that for these “style” specific properties, where just styles are changed like fill and stroke, using modes significantly reduces the weight of a component in the system. In this example I use a Badge component, and variables to change between the colors of the badge.

However, my component code still has a “color” prop. Because I don’t have a color prop on my Figma component, but rather a “BadgeColor” mode that controls this property, is there a way in which CodeConnect can still map this to the correct code property? Currently it doesn’t seem like CodeConnect can read anything that is not a property. Realistically all I need is the CodeConnect to be able to read the string value of the mode, and map that to the actual code prop.